/* ============================================================
   StudyFox Design Tokens · v1.0 · brandkit.studyfox.io
   Source of truth for web, mobile and marketing surfaces.
   Light theme on :root; dark theme via media query or
   [data-theme="dark"] on the root element.
   ============================================================ */

:root {
  /* ---- Brand: Fox (primary) ---- */
  --fox-50:  #FFF4EC;
  --fox-100: #FFE6D5;
  --fox-200: #FDCCAB;
  --fox-300: #FAA976;
  --fox-400: #F5813D;
  --fox-500: #ED5C0F; /* brand anchor — graphics, large text, fills */
  --fox-600: #C74A0A; /* interactive: buttons, links (AA on white) */
  --fox-700: #A03C0C;
  --fox-800: #7D300E;
  --fox-900: #66280F;
  --fox-950: #3D1607;

  /* ---- Neutrals: Den (warm paper → burrow) ---- */
  --den-0:   #FFFFFF;
  --den-50:  #FAF8F5; /* page ground (light) */
  --den-100: #F2EFEA;
  --den-200: #E5E0D8;
  --den-300: #CFC9BF;
  --den-400: #A8A198;
  --den-500: #7E7870;
  --den-600: #5C5750;
  --den-700: #453F38;
  --den-800: #2E2A25;
  --den-900: #221E1A;
  --den-950: #191613; /* page ground (dark) */

  /* ---- Semantic (state ≠ brand accent) ---- */
  --ok-600:   #348544;
  --ok-100:   #EAF5EC;
  --err-600:  #C43333;
  --err-100:  #FBEDEB;
  --warn-600: #A66A00;
  --warn-100: #FBF3E0;
  --info-600: #33708F;
  --info-100: #E9F2F7;

  /* ---- Roles (use these in product code) ---- */
  --ground:        var(--den-50);
  --surface:       var(--den-0);
  --surface-2:     var(--den-100);
  --ink:           var(--den-900);
  --ink-muted:     var(--den-600);
  --ink-faint:     var(--den-400);
  --line:          var(--den-200);
  --line-strong:   var(--den-300);
  --brand:         var(--fox-500);
  --brand-strong:  var(--fox-600); /* text/buttons on light */
  --brand-wash:    var(--fox-50);
  --focus-ring:    var(--fox-500);

  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-sans:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:   0.75rem;   /* 12 — labels, badges */
  --text-sm:   0.84375rem;/* 13.5 — secondary */
  --text-base: 0.9375rem; /* 15 — body/UI default */
  --text-md:   1.0625rem; /* 17 — emphasized body */
  --text-lg:   1.25rem;   /* 20 — card titles */
  --text-xl:   1.5rem;    /* 24 — section titles */
  --text-2xl:  1.875rem;  /* 30 — page titles */
  --text-3xl:  2.375rem;  /* 38 — hero */
  --text-4xl:  3rem;      /* 48 — display */

  /* ---- Shape ---- */
  --radius-xs:  6px;   /* badges, chips */
  --radius-sm:  8px;   /* inputs, buttons */
  --radius-md:  12px;  /* cards */
  --radius-lg:  16px;  /* modals, feature cards */
  --radius-xl:  24px;  /* hero panels */
  --radius-pill: 999px;

  /* ---- Elevation (warm-tinted, never pure black) ---- */
  --shadow-sm: 0 1px 2px rgba(61, 22, 7, 0.06);
  --shadow-md: 0 2px 8px rgba(61, 22, 7, 0.08), 0 1px 2px rgba(61, 22, 7, 0.05);
  --shadow-lg: 0 8px 24px rgba(61, 22, 7, 0.12), 0 2px 6px rgba(61, 22, 7, 0.06);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  150ms; /* hovers, toggles */
  --dur-base:  250ms; /* reveals, panels */
  --dur-slow:  400ms; /* page-level transitions */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:       var(--den-950);
    --surface:      var(--den-900);
    --surface-2:    var(--den-800);
    --ink:          #F0EBE4;
    --ink-muted:    var(--den-300);
    --ink-faint:    var(--den-500);
    --line:         var(--den-800);
    --line-strong:  var(--den-700);
    --brand:        var(--fox-400);
    --brand-strong: var(--fox-400); /* on dark, 400 is the interactive tone */
    --brand-wash:   #2A1C10;
    --ok-100:   #1C2B1F;
    --err-100:  #2E1B19;
    --warn-100: #2B2313;
    --info-100: #16242C;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --ground:       var(--den-950);
  --surface:      var(--den-900);
  --surface-2:    var(--den-800);
  --ink:          #F0EBE4;
  --ink-muted:    var(--den-300);
  --ink-faint:    var(--den-500);
  --line:         var(--den-800);
  --line-strong:  var(--den-700);
  --brand:        var(--fox-400);
  --brand-strong: var(--fox-400);
  --brand-wash:   #2A1C10;
  --ok-100:   #1C2B1F;
  --err-100:  #2E1B19;
  --warn-100: #2B2313;
  --info-100: #16242C;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
  --ground:       var(--den-50);
  --surface:      var(--den-0);
  --surface-2:    var(--den-100);
  --ink:          var(--den-900);
  --ink-muted:    var(--den-600);
  --ink-faint:    var(--den-400);
  --line:         var(--den-200);
  --line-strong:  var(--den-300);
  --brand:        var(--fox-500);
  --brand-strong: var(--fox-600);
  --brand-wash:   var(--fox-50);
  --ok-100:   #EAF5EC;
  --err-100:  #FBEDEB;
  --warn-100: #FBF3E0;
  --info-100: #E9F2F7;
  --shadow-sm: 0 1px 2px rgba(61, 22, 7, 0.06);
  --shadow-md: 0 2px 8px rgba(61, 22, 7, 0.08), 0 1px 2px rgba(61, 22, 7, 0.05);
  --shadow-lg: 0 8px 24px rgba(61, 22, 7, 0.12), 0 2px 6px rgba(61, 22, 7, 0.06);
}