/* =====================================================================
   Canela Design System — colors & type
   Warm cinnamon palette for "Canela" (a friendly redesign of the
   NANDA-NIC-NOC nursing-diagnostics app — see README.md)
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* -------------------------------------------------------------------
     COLOR — base palette (sampled from the cinnamon puppy mascot)
     ------------------------------------------------------------------- */

  /* Surface — parchment / cream / off-white */
  --cream-50:   #FBF7F1;   /* page bg, lightest cream */
  --cream-100:  #F5EFE4;   /* card cream */
  --cream-200:  #ECE2CF;   /* subtle divider, hover surface */
  --cream-300:  #DDCDB0;   /* outline on cream */

  /* Cinnamon — warm brown spine of the brand */
  --cinnamon-50:  #FAEFE0;
  --cinnamon-100: #F1DCBF;
  --cinnamon-200: #E3BF8E;
  --cinnamon-300: #D29E5E;
  --cinnamon-400: #B97D3D;   /* primary cinnamon */
  --cinnamon-500: #A26430;   /* hover */
  --cinnamon-600: #874F25;   /* press, on-cream titles */
  --cinnamon-700: #6A3D1D;   /* deep walnut */
  --cinnamon-800: #4A2A14;   /* text on cream — softer than black */
  --cinnamon-900: #2E1B0D;   /* darkest walnut */

  /* Cheek pink — accent for hearts, badges, "love" actions */
  --blush-100: #FCE6E0;
  --blush-300: #F4B7A8;
  --blush-500: #E08572;

  /* Sage — calm secondary for NOC (resultados) */
  --sage-100: #E5EBDB;
  --sage-300: #B6C39A;
  --sage-500: #7E9460;
  --sage-700: #4F6438;

  /* Honey — warm tertiary (kept for legacy/accent use) */
  --honey-100: #FBE9C2;
  --honey-300: #F1C977;
  --honey-500: #D8A04A;
  --honey-700: #95682A;

  /* Wine — burgundy / rojizo for NANDA (diagnóstico) — pairs with cream */
  --wine-50:  #F8E5DE;
  --wine-100: #EFC4B8;
  --wine-300: #C97A6F;
  --wine-500: #8E3A36;
  --wine-700: #5A2222;
  --wine-900: #3A1414;

  /* Slate-blue — dusty blue for NIC (intervenciones) — warm-friendly */
  --blue-50:  #E3ECF1;
  --blue-100: #C2D4E0;
  --blue-300: #88A8C0;
  --blue-500: #4A7895;
  --blue-700: #2C516D;
  --blue-900: #18334A;

  /* Status */
  --red-500:    #C0573A;     /* warm rust, never pure red */
  --red-100:    #F8DCD0;
  --green-500:  #6E8A4C;     /* matches sage family */
  --green-100:  #E2EAD0;

  /* Pure neutrals (use sparingly — prefer cinnamon-tinted) */
  --white: #FFFFFF;
  --black: #1A1109;          /* warm black, never #000 */

  /* -------------------------------------------------------------------
     COLOR — semantic
     ------------------------------------------------------------------- */
  --bg-page:        var(--cream-50);
  --bg-card:        var(--white);
  --bg-card-warm:   var(--cream-100);
  --bg-elevated:    var(--white);
  --bg-overlay:     rgba(46, 27, 13, 0.55);   /* cinnamon-900 @ 55 */
  --bg-tint:        var(--cinnamon-50);

  --fg-primary:     var(--cinnamon-900);      /* body / titles */
  --fg-secondary:   var(--cinnamon-700);      /* support copy */
  --fg-muted:       #8A6B4E;                  /* metadata */
  --fg-on-cinnamon: var(--cream-50);          /* white-ish on brown */
  --fg-on-cream:    var(--cinnamon-800);

  --accent:         var(--cinnamon-400);      /* primary brand */
  --accent-hover:   var(--cinnamon-500);
  --accent-press:   var(--cinnamon-600);
  --accent-soft:    var(--cinnamon-50);

  --border-subtle:  var(--cream-200);
  --border-default: var(--cream-300);
  --border-strong:  var(--cinnamon-300);

  --link:           var(--cinnamon-600);
  --link-hover:     var(--cinnamon-700);

  --focus-ring:     var(--cinnamon-400);

  /* Domain colors — kept warm to match brand */
  --nanda:          var(--wine-500);       /* diagnoses — wine/burgundy */
  --nanda-soft:     var(--wine-50);
  --noc:            var(--sage-500);       /* outcomes / resultados */
  --noc-soft:       var(--sage-100);
  --nic:            var(--blue-500);       /* interventions — slate blue */
  --nic-soft:       var(--blue-50);

  /* -------------------------------------------------------------------
     TYPE — families
     ------------------------------------------------------------------- */
  --font-display: "Fraunces", "Cooper Hewitt", Georgia, serif;
  --font-body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* TYPE — scale (mobile-first; bump on tablet+) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  /* -------------------------------------------------------------------
     SPACING (4-base)
     ------------------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* RADIUS — generous, friendly */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* SHADOW — warm tinted, never neutral grey */
  --shadow-1: 0 1px 2px rgba(74, 42, 20, 0.06),
              0 1px 1px rgba(74, 42, 20, 0.04);
  --shadow-2: 0 2px 6px rgba(74, 42, 20, 0.08),
              0 1px 2px rgba(74, 42, 20, 0.05);
  --shadow-3: 0 6px 18px rgba(74, 42, 20, 0.10),
              0 2px 4px rgba(74, 42, 20, 0.06);
  --shadow-4: 0 16px 32px rgba(74, 42, 20, 0.14),
              0 4px 8px rgba(74, 42, 20, 0.08);
  --shadow-inner: inset 0 1px 2px rgba(74, 42, 20, 0.08);

  /* MOTION */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* =====================================================================
   SEMANTIC TYPE STYLES
   ===================================================================== */

html, body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-primary);
  background: var(--bg-page);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

p, .p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--fg-primary);
}

.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
}

.small, small {
  font-size: var(--fs-13);
  color: var(--fg-secondary);
}

.eyebrow {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: var(--fw-bold);
  color: var(--accent);
}

.code, code {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  background: var(--cream-100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  color: var(--cinnamon-700);
}

.label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-secondary);
  text-transform: uppercase;
}

a, .link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--cinnamon-200);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .link:hover { color: var(--link-hover); text-decoration-color: var(--cinnamon-400); }

/* Numeric tag — domain pills (NANDA/NOC/NIC) */
.tag-code {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
}

::selection { background: var(--cinnamon-200); color: var(--cinnamon-900); }

/* =====================================================================
   THEMES — switchable from the page (data-theme on <html>)
   Tokens are remapped so the whole app + landing recolor at once.
   Default (no attribute) = "claro" (Canela cream).
   ===================================================================== */

html { transition: background-color .3s ease, color .3s ease; }

/* ---- SEPIA — warm reading paper, softer brightness ---- */
html[data-theme="sepia"] {
  --cream-50:  #F1E6D2;
  --cream-100: #E8D9BF;
  --cream-200: #DBC8A4;
  --cream-300: #C7AE82;
  --white:     #F8EFDD;
  --cinnamon-50:  #EFE0CB;
  --cinnamon-100: #E2CEB0;
  --cinnamon-900: #2C1B0C;
  --cinnamon-800: #462C13;
  --fg-muted:  #7E6244;
}
html[data-theme="sepia"] .nav {
  background: rgba(241, 230, 210, 0.85);
}

/* ---- NOCTURNO — warm espresso dark, easy on the eyes ---- */
html[data-theme="noche"] {
  --cream-50:  #17120E;   /* page bg */
  --cream-100: #1F1812;   /* warm card */
  --cream-200: #2E241B;   /* divider / hover surface */
  --cream-300: #463525;   /* outline */
  --white:     #1E1712;   /* card surface */
  --cinnamon-50:  #271E16;
  --cinnamon-100: #34281D;

  --cinnamon-900: #F5E9DB;  /* titles */
  --cinnamon-800: #ECDDCB;  /* body */
  --cinnamon-700: #D8C2A9;  /* support copy */
  --cinnamon-600: #CCAE8E;  /* links */
  --fg-muted:     #A98D6E;

  --border-subtle:  #2E241B;
  --border-default: #463525;
  --bg-overlay: rgba(0, 0, 0, 0.66);

  /* warm up domain soft chips so they read on dark */
  --wine-50:  #3A211C;
  --wine-100: #4E2A24;
  --sage-100: #25301E;
  --sage-300: #3C4E2C;
  --blue-50:  #1C2C38;
  --blue-100: #25455C;
  --cinnamon-50: #271E16;
}
/* Inverted components that were intentionally dark — re-anchor in dark mode */
html[data-theme="noche"] .nav { background: rgba(20, 15, 11, 0.82); border-bottom-color: rgba(255,255,255,0.05); }
html[data-theme="noche"] .footer { background: #100C09; color: #C9B6A0; }
html[data-theme="noche"] .section-dark { background: #100C09; }
html[data-theme="noche"] .cc-formula textarea { background: #0E0A07; color: #E9D9C5; border-color: #463525; }
html[data-theme="noche"] .hero-moon { opacity: 0.5; }
/* brighten domain accent text a touch on dark */
html[data-theme="noche"] {
  --wine-700: #E59A8E;
  --sage-700: #A6C281;
  --blue-700: #88BCDD;
  --cinnamon-700: #D8C2A9;
}
html[data-theme="noche"] .ed-card.nanda .ed-sigla { color: #E59A8E; }
html[data-theme="noche"] .ed-card.noc .ed-sigla { color: #A6C281; }
html[data-theme="noche"] .ed-card.nic .ed-sigla { color: #88BCDD; }

/* Theme switcher control (lives in the nav) */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--cream-100); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 3px;
}
.theme-switch button {
  width: 30px; height: 30px; border-radius: 999px; border: none; cursor: pointer;
  background: transparent; color: var(--cinnamon-600);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.theme-switch button:hover { color: var(--cinnamon-800); }
.theme-switch button.on {
  background: var(--white); color: var(--cinnamon-900);
  box-shadow: var(--shadow-1);
}
html[data-theme="noche"] .theme-switch button.on { background: var(--cinnamon-100); }
.theme-switch button svg { width: 16px; height: 16px; }