/* ==========================================================================
   tokens.css — the whole design system in one place.
   Every colour, type size and spacing step used anywhere else comes from here.
   Light ("day") is the default; [data-theme="night"] overrides the same names.
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --paper:        #FFFFFF;   /* cards, panels                              */
  --page:         #FBF8F2;   /* the page itself                            */
  --page-2:       #F3EEE4;   /* subtle bands, hovers                       */
  --night:        #141A38;   /* deep indigo — hero + AI surfaces           */
  --night-2:      #1E2752;   /* raised night surface                       */
  --night-ink:    #EEF1FA;   /* text on night                              */
  --night-soft:   #9AA4CC;   /* muted text on night                        */

  /* --- Text ----------------------------------------------------------- */
  --ink:          #1A2036;
  --ink-soft:     #56607C;
  --ink-faint:    #8A92AB;

  /* --- Accents. Each has exactly one job. ----------------------------- */
  --marigold:     #F5A524;   /* primary action, highlight, stamps          */
  --marigold-lo:  #FDF0D5;
  --teal:         #00A38C;   /* Science, "verified/cited" cues             */
  --teal-lo:      #D6F1EC;
  --blue:         #3D6FF5;   /* Mathematics                                */
  --blue-lo:      #DEE6FF;
  --coral:        #EF4E72;   /* Tamil, "saved to shelf"                    */
  --coral-lo:     #FCDEE6;
  --violet:       #7B5EA7;   /* Social Science                             */
  --violet-lo:    #EADFF5;
  --amber:        #C97A10;   /* English (darker so white text passes)      */
  --amber-lo:     #FBE7C8;

  /* --- Lines & shadows ------------------------------------------------ */
  --line:         #E8E1D4;
  --line-soft:    #F0EBE1;
  --shadow-xs:    0 1px 2px rgba(26,32,54,.06);
  --shadow-sm:    0 2px 6px -2px rgba(26,32,54,.12);
  --shadow-md:    0 8px 20px -8px rgba(26,32,54,.22);
  --shadow-lg:    0 22px 48px -20px rgba(26,32,54,.34);
  --shadow-night: 0 24px 60px -24px rgba(10,14,34,.75);

  /* --- Radii ---------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Spacing scale (4px base) --------------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  /* --- Type ----------------------------------------------------------- */
  --display: 'Outfit', 'Anek Tamil', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Anek Tamil', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs:   12px;
  --t-sm:   13.5px;
  --t-base: 16px;
  --t-md:   17.5px;
  --t-lg:   20px;
  --t-xl:   26px;
  --t-2xl:  34px;
  --t-3xl:  clamp(34px, 5vw, 58px);

  /* --- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .3, 1);
  --pop:  cubic-bezier(.34, 1.56, .64, 1);

  /* --- Layout --------------------------------------------------------- */
  --wrap: 1220px;
  --nav-h: 68px;
}

[data-theme="night"] {
  --paper:      #1B2140;
  --page:       #10152E;
  --page-2:     #1B2144;
  --night:      #0C1128;
  --night-2:    #182047;
  --night-ink:  #EEF1FA;
  --night-soft: #98A2C8;

  --ink:        #ECEFF8;
  --ink-soft:   #AEB6CE;
  --ink-faint:  #7E87A3;

  --marigold-lo: #3A2E15;
  --teal-lo:     #0E3630;
  --blue-lo:     #172449;
  --coral-lo:    #3B1D28;
  --violet-lo:   #2A2140;
  --amber-lo:    #38290F;

  --line:      #2A3157;
  --line-soft: #232948;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 6px -2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 20px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 22px 48px -20px rgba(0,0,0,.7);
}