/* =============================================
   ENGLISH UP! — tokens.css
   Design tokens: colores, tipografía, espacios,
   sombras, radios, transiciones.
============================================= */

:root {

  /* ── Brand Palette ───────────────────────────
     Warm amber/honey lead, teal accent, soft parchment bg.
     Feels educational, warm, trustworthy — not sterile.
  ────────────────────────────────────────── */
  --brand-50:  #fffbeb;
  --brand-100: #fef3c7;
  --brand-200: #fde68a;
  --brand-300: #fcd34d;
  --brand-400: #fbbf24;
  --brand-500: #f59e0b;   /* primary action */
  --brand-600: #d97706;   /* primary hover */
  --brand-700: #b45309;
  --brand-800: #92400e;
  --brand-900: #78350f;

  --teal-50:   #f0fdfa;
  --teal-100:  #ccfbf1;
  --teal-200:  #99f6e4;
  --teal-300:  #5eead4;
  --teal-400:  #2dd4bf;
  --teal-500:  #14b8a6;   /* secondary accent */
  --teal-600:  #0d9488;
  --teal-700:  #0f766e;

  --rose-400:  #fb7185;
  --rose-500:  #f43f5e;

  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;

  /* ── Neutrals ────────────────────────────── */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafaf9;
  --neutral-100: #f5f5f4;
  --neutral-150: #edede9;   /* extra step for borders */
  --neutral-200: #e7e5e4;
  --neutral-300: #d6d3d1;
  --neutral-400: #a8a29e;
  --neutral-500: #78716c;
  --neutral-600: #57534e;
  --neutral-700: #44403c;
  --neutral-800: #292524;
  --neutral-900: #1c1917;

  /* ── Semantic Colors ─────────────────────── */
  --color-bg:          var(--neutral-50);
  --color-surface:     var(--neutral-0);
  --color-surface-alt: var(--neutral-100);
  --color-border:      var(--neutral-200);
  --color-border-soft: var(--neutral-150);

  --color-text:        var(--neutral-900);
  --color-text-muted:  var(--neutral-500);
  --color-text-faint:  var(--neutral-400);

  --color-primary:       var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-primary-text:  var(--neutral-900);   /* text on brand-500 bg */

  --color-secondary:       var(--teal-500);
  --color-secondary-hover: var(--teal-600);
  --color-secondary-text:  var(--neutral-0);

  --color-success:  var(--green-500);
  --color-danger:   var(--rose-500);
  --color-warning:  var(--brand-400);
  --color-info:     var(--teal-500);

  /* Path node states */
  --node-done:      var(--green-500);
  --node-current:   var(--brand-500);
  --node-locked:    var(--neutral-300);

  /* ── Typography ──────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;   /* headings, wordmark */
  --font-body:    'Nunito', system-ui, sans-serif; /* UI, labels, body */

  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-md:   1.125rem;   /*  18px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  1.875rem;   /*  30px */
  --text-3xl:  2.25rem;    /*  36px */
  --text-4xl:  3rem;       /*  48px */

  --weight-normal:    400;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* ── Spacing ─────────────────────────────── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */

  /* ── Radius ──────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06);
  --shadow-glow-brand: 0 0 0 3px rgba(245,158,11,.25);
  --shadow-glow-teal:  0 0 0 3px rgba(20,184,166,.25);

  /* ── Transitions ─────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;

  /* ── Z-index scale ───────────────────────── */
  --z-base:    1;
  --z-dropdown:100;
  --z-navbar:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-ai:      150;

  /* ── Navbar height (used in layout offsets) ── */
  --navbar-h: 60px;

}

/* ── Dark mode (future-ready) ──────────────── */
[data-theme="dark"] {
  --color-bg:          var(--neutral-900);
  --color-surface:     var(--neutral-800);
  --color-surface-alt: var(--neutral-700);
  --color-border:      var(--neutral-700);
  --color-border-soft: var(--neutral-700);
  --color-text:        var(--neutral-50);
  --color-text-muted:  var(--neutral-400);
  --color-text-faint:  var(--neutral-500);
}

/* ── Global base styles ─────────────────────── */
body {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-text);
  background-color: var(--color-bg);
  line-height:      var(--leading-normal);
}

h1, h2, h3, h4 {
  font-family:  var(--font-display);
  line-height:  var(--leading-tight);
  font-weight:  var(--weight-bold);
}

em {
  font-style: italic;
}

/* ── Shared button base ─────────────────────── */
.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--sp-2);
  padding:          var(--sp-3) var(--sp-5);
  border-radius:    var(--radius-full);
  font-family:      var(--font-body);
  font-weight:      var(--weight-bold);
  font-size:        var(--text-sm);
  line-height:      1;
  white-space:      nowrap;
  transition:       background var(--duration-normal) var(--ease-default),
                    color      var(--duration-normal) var(--ease-default),
                    box-shadow var(--duration-normal) var(--ease-default),
                    transform  var(--duration-fast)   var(--ease-spring);
  user-select:      none;
}

.btn:active {
  transform: scale(0.96);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-primary);
  color:      var(--color-primary-text);
}

.btn-primary:hover {
  background:  var(--color-primary-hover);
  box-shadow:  var(--shadow-glow-brand);
}

.btn-secondary {
  background: var(--color-secondary);
  color:      var(--color-secondary-text);
}

.btn-secondary:hover {
  background: var(--color-secondary-hover);
  box-shadow: var(--shadow-glow-teal);
}

.btn-ghost {
  background:  transparent;
  color:       var(--color-text-muted);
  border:      1.5px solid var(--color-border);
}

.btn-ghost:hover {
  background: var(--color-surface-alt);
  color:      var(--color-text);
}

.btn-danger {
  background: var(--color-danger);
  color:      var(--neutral-0);
}

.btn-danger:hover {
  background: #e11d48;
}

.btn-sm {
  padding:   var(--sp-2) var(--sp-4);
  font-size: var(--text-xs);
}

.btn-lg {
  padding:   var(--sp-4) var(--sp-8);
  font-size: var(--text-md);
}

/* ── Badge chip ─────────────────────────────── */
.badge-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-1);
  padding:       2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
}

.badge-chip-green  { background: #dcfce7; color: var(--green-600); }
.badge-chip-amber  { background: var(--brand-100); color: var(--brand-700); }
.badge-chip-teal   { background: var(--teal-100); color: var(--teal-700); }
.badge-chip-rose   { background: #ffe4e6; color: #be123c; }
.badge-chip-gray   { background: var(--neutral-150); color: var(--neutral-600); }