/* ============================================================================
   Karky Academy — Design Tokens
   The single source of visual truth for the whole web estate.
   Load this before components.css. Never hard-code a colour or size anywhere else.
   ========================================================================= */

/* ---------- Fonts -------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Tamil:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {

  /* ---------- Brand palette --------------------------------------------- */
  /* Navy is sampled from the Karky Academy logo. It is the master brand. */
  --navy-900: #001562;
  --navy-800: #0A1E6E;
  --navy-700: #101C56;
  --navy-600: #1B2A78;
  --navy-500: #2C3E8F;
  --navy-400: #4B5DAB;
  --navy-200: #A8B4DE;
  --navy-100: #D6DDF6;
  --navy-050: #EEF1FB;

  --coral-600: #C43F2A;
  --coral-500: #E2543E;   /* commercial CTA */
  --coral-100: #FBEAE6;

  --amber-600: #D4880A;
  --amber-500: #F5A623;   /* Thambaa warmth, highlights, achievement */
  --amber-100: #FFF0D4;

  --teal-600:  #0C7B70;
  --teal-500:  #0F9B8E;   /* progress, success */
  --teal-100:  #E6F7F4;

  --gold-600:  #A87A2C;
  --gold-500:  #C9933A;   /* honour contexts only */
  --gold-100:  #F5ECD8;

  --maroon-700:#5E1620;
  --maroon-600:#8C1C2C;   /* heritage / classical contexts only */
  --maroon-100:#F6E7E4;

  /* ---------- Neutrals --------------------------------------------------- */
  --ink:       #131A2E;
  --ink-soft:  #3D4761;
  --muted:     #6B7590;
  --faint:     #98A0B5;
  --line:      #E3E7F2;
  --line-soft: #EFF2F8;
  --paper:     #FFFFFF;
  --paper-2:   #F6F7FB;
  --cream:     #FDF6EC;
  --cream-2:   #FFFBF5;

  /* ---------- Semantic (Bright register — the default) ------------------- */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-2);
  --surface:       var(--paper);
  --text:          var(--ink);
  --text-soft:     var(--ink-soft);
  --text-muted:    var(--muted);
  --border:        var(--line);
  --border-soft:   var(--line-soft);
  --brand:         var(--navy-900);
  --brand-soft:    var(--navy-050);
  --accent:        var(--amber-500);
  --accent-soft:   var(--amber-100);
  --cta:           var(--coral-500);
  --cta-hover:     var(--coral-600);
  --on-brand:      #FFFFFF;
  --on-cta:        #FFFFFF;
  --kicker:        var(--amber-600);

  /* ---------- Typography ------------------------------------------------- */
  --font-display: 'Baloo Thambi 2', 'Noto Sans Tamil', system-ui, sans-serif;
  --font-body:    'Inter', 'Noto Sans Tamil', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-tamil:   'Noto Sans Tamil', 'Inter', sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;

  --fs-hero:    clamp(2.25rem, 5.2vw, 4rem);
  --fs-h1:      clamp(2rem,   4.2vw, 3rem);
  --fs-h2:      clamp(1.65rem, 3.4vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2.2vw, 1.55rem);
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-kicker:  0.75rem;

  --lh-tight:  1.14;
  --lh-snug:   1.32;
  --lh-body:   1.65;

  --ls-tight:  -0.022em;
  --ls-kicker:  0.16em;

  /* ---------- Space ------------------------------------------------------ */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  --section-y:  clamp(4rem, 9vw, 7rem);
  --wrap:       1160px;
  --wrap-tight: 780px;
  --gutter:     clamp(1.25rem, 4vw, 2rem);

  /* ---------- Shape ------------------------------------------------------ */
  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(19,26,46,.06);
  --shadow:    0 8px 30px rgba(19,26,46,.09);
  --shadow-lg: 0 20px 56px rgba(19,26,46,.14);
  --shadow-brand: 0 10px 30px rgba(0,21,98,.28);
  --shadow-cta:   0 10px 28px rgba(226,84,62,.34);

  /* ---------- Motion ----------------------------------------------------- */
  --dur-fast:  .18s;
  --dur:       .3s;
  --dur-slow:  .8s;
  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  /* ---------- Footer (always the navy band, in every register) ----------- */
  --footer-bg:    var(--navy-900);
  --footer-text:  #C9CEDE;
  --footer-head:  #FFFFFF;
  --footer-faint: #8B95BD;
  --footer-line:  rgba(255,255,255,.12);

  /* ---------- Floating layer instance defaults ---------------------------
     float.js overrides these per tile. Listed here so the fallbacks are
     visible in one place and a tile still renders if the script never runs. */
  --tile: 108px;   /* tile width */
  --rot:  0deg;    /* resting rotation */
  --op:   .78;     /* resting opacity */
  --py:   0px;     /* parallax offset, written on scroll by float.js */

  /* ---------- Layers ----------------------------------------------------- */
  --z-float:  1;
  --z-body:   2;
  --z-header: 100;
  --z-menu:   110;
  --z-modal:  200;
}

/* ============================================================================
   REGISTERS
   Three moods, one system. Put the class on a <section> or the <body>.
   Only surface colours and accents change — never type, spacing or components.
   ========================================================================= */

/* Bright — Home, Thambaa, Payil, Indie. Alive, playful, curious.
   (This is :root above; the class exists so it can be applied to one section.) */
.r-bright {
  --bg: var(--paper);        --bg-alt: var(--paper-2);   --surface: var(--paper);
  --text: var(--ink);        --text-soft: var(--ink-soft);
  --border: var(--line);     --border-soft: var(--line-soft);
  --brand: var(--navy-900);  --brand-soft: var(--navy-050);
  --accent: var(--amber-500);--accent-soft: var(--amber-100);
  --cta: var(--coral-500);   --cta-hover: var(--coral-600);
  --kicker: var(--amber-600);
}

/* Bright inverted — the hero, and any full-bleed navy band. */
.r-bright-dark {
  --bg: var(--navy-900);     --bg-alt: var(--navy-800);  --surface: var(--navy-800);
  --text: #FFFFFF;           --text-soft: #C9CEDE;       --text-muted: #9AA4CC;
  --border: rgba(255,255,255,.14); --border-soft: rgba(255,255,255,.08);
  --brand: #FFFFFF;          --brand-soft: rgba(255,255,255,.08);
  --accent: var(--amber-500);--accent-soft: rgba(245,166,35,.16);
  --cta: var(--coral-500);   --cta-hover: #EF6A55;
  --on-brand: var(--navy-900);
  --kicker: var(--amber-500);
}

/* Warm — About, heritage, literature, Winners. Rooted, classical, honoured. */
.r-warm {
  --bg: var(--cream);        --bg-alt: var(--cream-2);   --surface: var(--cream-2);
  --text: #241A14;           --text-soft: #4A3A30;       --text-muted: #6B5A4E;
  --border: #EADFCE;         --border-soft: #F3EADB;
  --brand: var(--maroon-600);--brand-soft: var(--maroon-100);
  --accent: var(--gold-500); --accent-soft: var(--gold-100);
  --cta: var(--maroon-600);  --cta-hover: var(--maroon-700);
  --kicker: var(--gold-600);
}

/* Sharp — Franchise, For Schools, pricing, decks. Confident, commercial, clear. */
.r-sharp {
  --bg: #FBFBF9;             --bg-alt: #FFFFFF;          --surface: #FFFFFF;
  --text: #1C2340;           --text-soft: #3A4262;       --text-muted: #5B6178;
  --border: #E7E8EF;         --border-soft: #F1F2F7;
  --brand: var(--navy-600);  --brand-soft: #EDEFF8;
  --accent: var(--coral-500);--accent-soft: var(--coral-100);
  --cta: var(--navy-600);    --cta-hover: var(--coral-500);
  --kicker: var(--coral-500);
}

/* ---------- Motion preference ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01ms; --dur: .01ms; --dur-slow: .01ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}