/* ==========================================================================
   Gautam's Piano Lessons — design tokens
   Generated from brand/tokens.json. Do not hand-edit values here; change
   tokens.json first, then mirror the change into this file.

   Rule from STYLE-GUIDE.md §2.2: components reference SEMANTIC tokens only.
   Never reach for a primitive (--indigo-950) inside a component.
   ========================================================================== */

:root {
  /* ---- Primitives ------------------------------------------------------ */
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C6D2FF;
  --indigo-300: #A3B3FF;
  --indigo-400: #7C86FF;
  --indigo-500: #615FFF;
  --indigo-600: #4F39F6;
  --indigo-700: #432DD7;
  --indigo-800: #372AAC;
  --indigo-900: #312C85;
  --indigo-950: #1E1A4D;

  --lime-50:  #F7FEE7;
  --lime-100: #ECFCCA;
  --lime-200: #D8F999;
  --lime-300: #BBF451;
  --lime-400: #9AE600;
  --lime-500: #7CCF00;
  --lime-600: #5EA500;
  --lime-700: #497D00;
  --lime-800: #3C6300;
  --lime-900: #35530E;
  --lime-950: #192E03;

  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CAD5E2;
  --slate-400: #90A1B9;
  --slate-500: #62748E;
  --slate-600: #45556C;
  --slate-700: #314158;
  --slate-800: #1D293D;
  --slate-900: #0F172B;
  --slate-950: #020618;

  --white: #FFFFFF;

  /* ---- Semantic: brand ------------------------------------------------- */
  --brand-primary:        var(--indigo-950);
  --brand-primary-hover:  var(--indigo-900);
  --brand-accent:         var(--lime-300);
  --brand-accent-hover:   var(--lime-400);
  --brand-accent-on-dark: var(--lime-200);
  --brand-accent-text:    var(--lime-700);
  /* The lime the wordmark itself is drawn in (brand/logo-kara.svg is
     #7CCF00). Kept as its own token so anything that has to read as "the
     brand's own green" tracks the logo rather than the button fill. */
  --brand-mark:           var(--lime-500);

  /* ---- Semantic: surface ----------------------------------------------- */
  --surface-default:          var(--white);
  --surface-subtle:           var(--slate-50);
  --surface-muted:            var(--slate-100);
  --surface-inverse:          var(--indigo-950);
  --surface-inverse-elevated: var(--indigo-900);

  /* ---- Semantic: text -------------------------------------------------- */
  --text-primary:       var(--slate-900);
  --text-secondary:     var(--slate-600);
  --text-muted:         var(--slate-500);
  --text-tertiary:      var(--slate-400);
  --text-brand:         var(--indigo-950);
  --text-accent:        var(--lime-700);
  --text-inverse:       var(--white);
  --text-inverse-muted: var(--slate-300);
  --text-on-accent:     var(--indigo-950);

  /* ---- Semantic: border ------------------------------------------------ */
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-inverse: var(--indigo-900);
  --border-focus:   var(--indigo-500);

  /* ---- Typography ------------------------------------------------------ */
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Inria Serif", Georgia, serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Desktop scale — Major Third (1.250), base 16px */
  --size-display: 76px;
  --size-stat: 92px;
  --size-h1: 61px;
  --size-h2: 49px;
  --size-h3: 39px;
  --size-h4: 31px;
  --size-h5: 25px;
  --size-h6: 20px;

  /* Mobile scale — ratio 1.150, below 768px */
  --size-display-m: 43px;
  --size-h1-m: 37px;
  --size-h2-m: 32px;
  --size-h3-m: 28px;
  --size-h4-m: 24px;
  --size-h5-m: 21px;
  --size-h6-m: 18px;

  /* Body — sizes do not change between breakpoints */
  --size-body-lg: 20px;
  --size-body: 16px;
  --size-body-sm: 13px;
  --size-caption: 11px;
  --size-overline: 11px;

  --lh-display: 1.1;
  --lh-h1: 1.15;
  --lh-h2: 1.15;
  --lh-h3: 1.2;
  --lh-h4: 1.25;
  --lh-h5: 1.3;
  --lh-h6: 1.35;
  --lh-body-lg: 1.6;
  --lh-body: 1.6;
  --lh-body-sm: 1.55;
  --lh-caption: 1.45;
  --lh-overline: 1.4;

  --track-display: -0.02em;
  --track-h1: -0.015em;
  --track-h2: -0.01em;
  --track-h3: -0.005em;
  --track-h4: 0em;
  --track-h5: 0.005em;
  --track-h6: 0.01em;
  --track-body: 0em;
  --track-body-sm: 0.005em;
  --track-caption: 0.01em;
  --track-overline: 0.08em;

  /* ---- Spacing — base unit 4px ---------------------------------------- */
  --space-0: 0px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 9999px;

  /* ---- Shadow — elevation only, never on dark indigo surfaces ---------- */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1440px;
  --content-max: 1200px;
  --gutter: var(--space-16);   /* 64px desktop */
  --gutter-mobile: var(--space-4); /* 16px */
  --header-h: 64px;
  --header-h-mobile: 56px;

  /* Page-background scroll bands (matches Framer "Page Background" component) */
  --bg-light: var(--white);
  --bg-dark: var(--indigo-950);
  --bg-subtle: #F8FAFC;
  --bg-transition: 0.65s cubic-bezier(0.42, 0, 0.58, 1);
}