/* ==========================================================================
   TNSTC design tokens · "Peacock & Marigold"
   A palette drawn from Tamil Nadu itself: peacock-blue Kanjeevaram silk,
   marigold garlands, kumkum red, zari gold borders and kolam-chalk cream.
   Raw palette → semantic roles. Components only ever read semantic roles,
   so dark mode is a remap of ~20 variables, never a per-component override.
   ========================================================================== */

/* Metric-matched fallbacks. Until the web fonts arrive (or if they never do), Arial is scaled to the
   same widths and vertical metrics as Catamaran / Hind Madurai, measured in Chrome, so lines wrap the
   same way and nothing jumps when the fonts swap in. Android has no Arial and keeps the plain fallback. */
@font-face { font-family: "Catamaran Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 88.8%; ascent-override: 123.9%; descent-override: 60.8%; line-gap-override: 0%; }
@font-face { font-family: "Catamaran Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 90.5%; ascent-override: 121.6%; descent-override: 59.7%; line-gap-override: 0%; }
@font-face { font-family: "Catamaran Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 800; size-adjust: 93.4%; ascent-override: 117.7%; descent-override: 57.8%; line-gap-override: 0%; }
@font-face { font-family: "Hind Madurai Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 93.6%; ascent-override: 104.7%; descent-override: 42.7%; line-gap-override: 0%; }
@font-face { font-family: "Hind Madurai Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 500; size-adjust: 95.2%; ascent-override: 102.9%; descent-override: 42%; line-gap-override: 0%; }
@font-face { font-family: "Hind Madurai Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 91.4%; ascent-override: 107.2%; descent-override: 43.8%; line-gap-override: 0%; }
@font-face { font-family: "Hind Madurai Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 93.5%; ascent-override: 104.9%; descent-override: 42.8%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); font-weight: 400; size-adjust: 100%; ascent-override: 102%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Mono Fallback"; src: local("Courier New Bold"), local("CourierNewPS-BoldMT"); font-weight: 600; size-adjust: 100%; ascent-override: 102%; descent-override: 27%; line-gap-override: 0%; }

:root {
  /* ---- Raw palette ------------------------------------------------------ */
  --peacock-950: #04202e;
  --peacock-900: #062f44;
  --peacock-800: #08405c;
  --peacock-700: #0a5276; /* primary: government trust, peacock silk */
  --peacock-600: #0b5f8a;
  --peacock-500: #1478a6;
  --peacock-300: #86cbea;
  --peacock-100: #cfe7f1;
  --peacock-50:  #e3f0f5;

  --marigold-600: #d98a00;
  --marigold-500: #f4a300; /* primary CTAs only */
  --marigold-300: #ffc94d;
  --marigold-100: #ffefc7;
  --marigold-ink: #2a1a00;

  --kumkum-700: #9c1f17;
  --kumkum-600: #b3261e;
  --kumkum-100: #fbe4df;

  --zari-700: #8a6417;
  --zari-500: #c08f2e;
  --zari-300: #d4a84a;
  --zari-100: #f5ead2;

  --leaf-700: #23703a;
  --leaf-500: #2f9a52;
  --leaf-50:  #e5f2e7;

  --sand-0:   #fffcf7;
  --sand-25:  #fbf6ee;
  --sand-50:  #f7f1e6; /* kolam-chalk cream page */
  --sand-100: #f2eadc;
  --sand-150: #e8ddcb;
  --sand-200: #d8c9b0;
  --sand-400: #a3927a;
  --sand-600: #6e6151;
  --sand-700: #4a4036;
  --sand-900: #1f1a15;

  /* ---- Semantic colour roles (light) ------------------------------------ */
  --bg:          var(--sand-50);
  --surface:     var(--sand-0);
  --surface-2:   var(--sand-25);
  --surface-sunk:var(--sand-100);
  --line:        var(--sand-150);
  --line-strong: var(--sand-200);
  --text:        var(--sand-900);   /* 16.9:1 on surface */
  --text-2:      var(--sand-700);   /*  9.9:1 */
  --text-muted:  var(--sand-600);   /*  5.9:1 on surface, 5.0:1 on sunk */
  --brand:       var(--peacock-700);
  --brand-deep:  var(--peacock-900);
  --brand-ink:   #ffffff;           /*  8.5:1 on brand */
  --brand-soft:  var(--peacock-50);
  --brand-soft-2:var(--peacock-100);
  --link:        var(--peacock-600);/*  6.8:1 on surface */
  --cta:         var(--marigold-500);
  --cta-hover:   var(--marigold-600);
  --cta-ink:     var(--marigold-ink);/* 8.1:1 on marigold */
  --accent-soft: var(--marigold-100);
  --accent-text: #8a4b00;           /*  6.0:1 on accent-soft */
  --festive:     var(--kumkum-600);
  --festive-soft:var(--kumkum-100);
  --zari:        var(--zari-500);
  --zari-text:   var(--zari-700);   /*  5.2:1 on surface */
  --success:     var(--leaf-700);   /*  5.3:1 on success-soft */
  --success-soft:var(--leaf-50);
  --danger:      var(--kumkum-600);
  --danger-soft: var(--kumkum-100);
  --focus:       var(--peacock-500);
  --scrim:       rgb(4 32 46 / .55);
  --hero-fade:   var(--sand-50);
  --kolam-ink:   rgb(10 82 118 / .07);

  /* ---- Typography -------------------------------------------------------
     Catamaran (display) and Hind Madurai (text) both carry Tamil and Latin
     in one family, so mixed-script lines share one rhythm. */
  --font-display: "Catamaran", "Catamaran Fallback", "Hind Madurai", "Noto Sans Tamil", system-ui, sans-serif;
  --font-body:    "Hind Madurai", "Hind Madurai Fallback", "Catamaran", "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-en: var(--font-body);
  --font-ta: var(--font-body);
  --font: var(--font-body);

  /* Tamil glyphs are taller and more detailed: render ~6% larger with
     looser leading. Every size below is multiplied by --ts. */
  --ts: 1;
  --lh-tight: 1.12;
  --lh-body: 1.55;

  --fs-xs:   calc(.8125rem * var(--ts)); /* 13, the smallest allowed size */
  --fs-sm:   calc(.875rem  * var(--ts)); /* 14 */
  --fs-base: calc(1rem     * var(--ts)); /* 16 */
  --fs-md:   calc(1.125rem * var(--ts)); /* 18 */
  --fs-lg:   calc(1.25rem  * var(--ts)); /* 20 */
  --fs-xl:   calc(1.5rem   * var(--ts)); /* 24 */
  --fs-2xl:  calc(1.875rem * var(--ts)); /* 30 */
  --fs-3xl:  calc(2.375rem * var(--ts)); /* 38 */
  --fs-4xl:  calc(3.25rem  * var(--ts)); /* 52 */

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

  /* ---- Spacing (8px grid; 4 is the only half-step) ----------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 80px;

  /* ---- Radius ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Elevation: warm, low, crisp --------------------------------------- */
  --sh-1: 0 1px 0 rgb(31 26 21 / .04), 0 1px 3px rgb(31 26 21 / .06);
  --sh-2: 0 2px 0 rgb(31 26 21 / .04), 0 10px 24px -10px rgb(31 26 21 / .18);
  --sh-3: 0 30px 60px -24px rgb(4 32 46 / .45), 0 2px 0 rgb(31 26 21 / .04);
  --sh-cta: 0 3px 0 var(--marigold-600), 0 10px 20px -8px rgb(217 138 0 / .55);

  /* ---- Sizing & motion --------------------------------------------------- */
  --tap: 44px;
  --field-h: 56px;
  --container: 1200px;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: 180ms;

  color-scheme: light;
}

:root:lang(ta) {
  --ts: 1.06;
  --lh-tight: 1.3;
  --lh-body: 1.7;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

/* ---- Dark mode: "Marina at night" ----------------------------------------
   The site always opens in light mode. Dark applies only when the visitor picks it
   with the theme toggle (saved as tnstc.theme), never from the OS setting alone. */
:root[data-theme="dark"] {
  --bg:          #08161b;
  --surface:     #0f2229;
  --surface-2:   #132a32;
  --surface-sunk:#0b1c22;
  --line:        #1f3842;
  --line-strong: #2b4955;
  --text:        #f4ede1;
  --text-2:      #d5ccbd;
  --text-muted:  #a99d8b;
  --brand:       var(--peacock-500);
  --brand-deep:  #062330;
  --brand-soft:  #12313d;
  --brand-soft-2:#18404f;
  --link:        var(--peacock-300);
  --accent-soft: #3a2a08;
  --accent-text: var(--marigold-300);
  --festive:     #ff8a80;
  --festive-soft:#3a1714;
  --zari:        var(--zari-300);
  --zari-text:   var(--zari-300);
  --success:     #6fd08c;
  --success-soft:#11301c;
  --danger:      #ff8a80;
  --danger-soft: #3a1714;
  --focus:       var(--peacock-300);
  --scrim:       rgb(0 0 0 / .65);
  --hero-fade:   #08161b;
  --kolam-ink:   rgb(134 203 234 / .06);
  --sh-1: 0 1px 2px rgb(0 0 0 / .4);
  --sh-2: 0 10px 24px -10px rgb(0 0 0 / .6);
  --sh-3: 0 30px 60px -24px rgb(0 0 0 / .8);
  color-scheme: dark;
}