/* ============================================================
   CHITRANGANA — COLORS & TYPE
   Single source of truth for color tokens, type tokens,
   and semantic element styling. Import this once in any
   page that needs the Chitrangana visual system.
   ============================================================ */

/* ---------- Fonts -------------------------------------------- */
/*
   Type families in use:
   - IBM Plex Sans   — primary. Everywhere.
   - IBM Plex Serif  — companion. Used as inline italic highlight
                       inside Sans copy (the brand signature move).
                       Also: long-read editorial pull-quotes.
   - IBM Plex Mono   — extremely rare. Reserved for legal copy,
                       fine-print, dates in document layouts, and
                       UI element where monospaced numerals matter.
                       Two weights provided (Thin, Text).
*/

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSans-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Light.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 450;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Text.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Italic.woff2") format("woff2");
}

/* IBM Plex Serif — companion italic highlight family.
   No Regular Italic shipped; the system maps italic@400 to
   the closest available cut (Text Italic, weight 450). */
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-Light.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  /* No Regular Italic in the family — fall back to Text Italic */
  src: url("fonts/IBMPlexSerif-TextItalic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 450;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-Text.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 450;
  font-style: italic;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-TextItalic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/IBMPlexSerif-BoldItalic.woff2") format("woff2");
}

/* IBM Plex Mono — reserved. Only Thin + Text shipped. */
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Text weight (450) — the only "body" cut we have for Mono */
  src: url("fonts/IBMPlexMono-Text.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 450;
  font-style: normal;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Text.woff2") format("woff2");
}

/* ---------- Tokens ------------------------------------------- */

:root {
  /* Brand color — raw tokens */
  --ct-blue:        #1B3FE0;   /* Chitrangana Blue — primary */
  --ct-blue-deep:  #1E3CD9;   /* Slight push for gradient stops */
  --ct-navy:        #010E35;   /* Deep Navy — headlines, hero bg */
  --ct-navy-soft:   #0D1430;   /* Navy companion, softer on screen */
  --ct-sky:         #72C8FE;   /* Sky base */
  --ct-sky-pale:    #EAF6FF;   /* Sky surface — atmospheric bg */
  --ct-sky-mist:    #F0F9FF;   /* Sky gradient end — near-white */
  --ct-emerald:     #00805A;   /* Growth / success accent */
  --ct-gold:        #D4AF7A;   /* Premium accent, dividers */
  --ct-cream:       #F2EBDC;   /* Editorial warm surface */

  /* Neutrals — derived from navy, used for text & rules */
  --ct-ink:         #010E35;   /* Same as navy — body on light */
  --ct-ink-2:       #2A3563;   /* Secondary body text */
  --ct-ink-3:       #5C6588;   /* Tertiary / meta */
  --ct-ink-4:       #98A0BB;   /* Disabled / placeholder */
  --ct-line:        #DCE2EE;   /* Hairline divider on white */
  --ct-line-2:      #ECEFF6;   /* Soft fill / row hover */
  --ct-paper:       #FFFFFF;   /* Page background — primary surface */
  --ct-paper-2:     #F7F9FC;   /* Page background — secondary surface */

  /* On-dark neutrals */
  --ct-on-navy-1:   #FFFFFF;
  --ct-on-navy-2:   #B8C2E0;
  --ct-on-navy-3:   #7C88B5;
  --ct-on-navy-line:#1B2657;

  /* Semantic color */
  --ct-fg-1:        var(--ct-ink);     /* Primary text */
  --ct-fg-2:        var(--ct-ink-2);   /* Secondary text */
  --ct-fg-3:        var(--ct-ink-3);   /* Tertiary text */
  --ct-fg-4:        var(--ct-ink-4);   /* Disabled */
  --ct-fg-brand:    var(--ct-blue);    /* Brand-tinted text */
  --ct-fg-on-brand: #FFFFFF;
  --ct-bg-1:        var(--ct-paper);
  --ct-bg-2:        var(--ct-paper-2);
  --ct-bg-brand:    var(--ct-blue);
  --ct-bg-navy:     var(--ct-navy);
  --ct-bg-sky:      var(--ct-sky-pale);
  --ct-bg-cream:    var(--ct-cream);
  --ct-border:      var(--ct-line);
  --ct-border-strong: #C2C9DC;
  --ct-success:     var(--ct-emerald);
  --ct-warning:     var(--ct-gold);
  --ct-danger:      #C53030;
  --ct-info:        var(--ct-sky);

  /* Brand action — brighter azure used in deep-blue → azure shift */
  --ct-azure:       #1F5CFF;

  /* Signature gradients — pulled directly from brand.svg stops.
     ----------------------------------------------------------
     Use these as the brand moments. The Sea→Shore gradient is
     the headline gradient for the 2026 "Sea & Earth" direction. */

  /* Wordmark gradient — Navy → Blue (Linear2/5+ in brand.svg). */
  --ct-grad-blue: linear-gradient(
    180deg,
    #010E35 0%,
    #1B3FE0 73%,
    #1D3DDB 85%,
    #1B3FE0 100%
  );

  /* Sky gradient — the exact 5-stop curve from brand.svg.
     Atmospheric base, illustration washes, fresh hero panels. */
  --ct-grad-sky: linear-gradient(
    180deg,
    #72C8FE   0%,
    rgba(174,223,255,.70) 36%,
    rgba(207,236,255,.82) 48%,
    rgba(240,249,255,.95) 62%,
    #FFFFFF 100%
  );

  /* Azure shift — Deep Blue → brighter Azure (Linear4).
     Used on tight surfaces (chips, accent bars, cards). */
  --ct-grad-azure: linear-gradient(135deg, #1E3CD9 0%, #1F5CFF 100%);

  /* Sea → Shore — 2026 SIGNATURE.
     Sky descending into Cream. Sea meets earth. Use this on
     atmospheric hero panels and editorial section breaks. */
  --ct-grad-sea-earth: linear-gradient(
    180deg,
    #72C8FE   0%,
    #B9E0FE  28%,
    #EAF6FF  52%,
    #F7EFDE  78%,
    #F2EBDC 100%
  );

  /* Earth — Cream warmed with a hint of gold. Editorial. */
  --ct-grad-earth: linear-gradient(180deg, #F2EBDC 0%, #ECE0C6 100%);

  /* Navy depth — subtle vertical fade on hero panels. */
  --ct-grad-navy:   linear-gradient(180deg, #010E35 0%, #0D1430 100%);

  /* Type — families */
  --ct-font-sans:   "IBM Plex Sans", ui-sans-serif, system-ui,
                     -apple-system, "Segoe UI", Roboto, sans-serif;
  --ct-font-mono:   "IBM Plex Mono", ui-monospace, "SF Mono",
                     Menlo, Consolas, monospace;
  --ct-font-serif:  "IBM Plex Serif", "Source Serif Pro",
                     "Times New Roman", Times, serif;

  /* Type — weights */
  --ct-w-thin:        100;
  --ct-w-extralight:  200;
  --ct-w-light:       300;
  --ct-w-regular:     400;
  --ct-w-text:        450;
  --ct-w-medium:      500;
  --ct-w-semibold:    600;
  --ct-w-bold:        700;

  /* Type — scale (modular, comfortable density) */
  --ct-size-xs:    12px;
  --ct-size-sm:    14px;
  --ct-size-md:    16px;
  --ct-size-lg:    18px;
  --ct-size-xl:    20px;
  --ct-size-2xl:   24px;
  --ct-size-3xl:   30px;
  --ct-size-4xl:   38px;
  --ct-size-5xl:   48px;
  --ct-size-6xl:   64px;
  --ct-size-7xl:   80px;
  --ct-size-8xl:   104px;

  /* Tracking — Plex needs a touch tightened at display sizes */
  --ct-track-tight:   -0.02em;
  --ct-track-snug:    -0.01em;
  --ct-track-normal:  0;
  --ct-track-loose:   0.02em;
  --ct-track-eyebrow: 0.14em;

  /* Leading */
  --ct-lh-tight:   1.04;
  --ct-lh-snug:    1.16;
  --ct-lh-normal:  1.4;
  --ct-lh-relaxed: 1.55;

  /* Spacing scale (4px base) */
  --ct-sp-0: 0;
  --ct-sp-1: 4px;
  --ct-sp-2: 8px;
  --ct-sp-3: 12px;
  --ct-sp-4: 16px;
  --ct-sp-5: 20px;
  --ct-sp-6: 24px;
  --ct-sp-8: 32px;
  --ct-sp-10: 40px;
  --ct-sp-12: 48px;
  --ct-sp-16: 64px;
  --ct-sp-20: 80px;
  --ct-sp-24: 96px;
  --ct-sp-32: 128px;

  /* Radii — Chitrangana favors subtle, editorial rounding */
  --ct-r-xs: 4px;
  --ct-r-sm: 6px;
  --ct-r-md: 10px;
  --ct-r-lg: 14px;
  --ct-r-xl: 20px;
  --ct-r-2xl: 28px;
  --ct-r-pill: 999px;

  /* Shadows — navy-tinted, soft, never gray */
  --ct-shadow-xs:  0 1px 2px rgba(1, 14, 53, 0.06);
  --ct-shadow-sm:  0 2px 6px rgba(1, 14, 53, 0.07);
  --ct-shadow-md:  0 8px 20px rgba(1, 14, 53, 0.08);
  --ct-shadow-lg:  0 20px 40px rgba(1, 14, 53, 0.10);
  --ct-shadow-xl:  0 32px 64px rgba(1, 14, 53, 0.14);
  --ct-shadow-brand: 0 12px 30px rgba(27, 63, 224, 0.30);

  /* Motion */
  --ct-ease:       cubic-bezier(0.2, 0.7, 0.2, 1);   /* default */
  --ct-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);    /* entries */
  --ct-ease-in:    cubic-bezier(0.7, 0, 0.84, 0);    /* exits */
  --ct-dur-1: 120ms;
  --ct-dur-2: 200ms;
  --ct-dur-3: 320ms;
  --ct-dur-4: 480ms;
}

/* ---------- Base + semantic element styles ------------------- */

html { color-scheme: light; }

body {
  font-family: var(--ct-font-sans);
  font-weight: var(--ct-w-regular);
  font-size: var(--ct-size-md);
  line-height: var(--ct-lh-relaxed);
  color: var(--ct-fg-1);
  background: var(--ct-bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ct-blue);
  color: #fff;
}

/* Headings — Chitrangana display style:
   ExtraLight at large sizes (matches brand board),
   tight tracking, snug leading. */

h1, .ct-h1 {
  font-family: var(--ct-font-sans);
  font-weight: var(--ct-w-extralight);
  font-size: clamp(40px, 6vw, var(--ct-size-7xl));
  line-height: var(--ct-lh-tight);
  letter-spacing: var(--ct-track-tight);
  color: var(--ct-fg-1);
  margin: 0 0 var(--ct-sp-6);
  text-wrap: balance;
}
h2, .ct-h2 {
  font-family: var(--ct-font-sans);
  font-weight: var(--ct-w-light);
  font-size: clamp(28px, 4vw, var(--ct-size-5xl));
  line-height: var(--ct-lh-snug);
  letter-spacing: var(--ct-track-snug);
  color: var(--ct-fg-1);
  margin: 0 0 var(--ct-sp-5);
  text-wrap: balance;
}
h3, .ct-h3 {
  font-family: var(--ct-font-sans);
  font-weight: var(--ct-w-regular);
  font-size: var(--ct-size-2xl);
  line-height: var(--ct-lh-snug);
  letter-spacing: var(--ct-track-snug);
  color: var(--ct-fg-1);
  margin: 0 0 var(--ct-sp-4);
}
h4, .ct-h4 {
  font-family: var(--ct-font-sans);
  font-weight: var(--ct-w-medium);
  font-size: var(--ct-size-lg);
  line-height: var(--ct-lh-snug);
  color: var(--ct-fg-1);
  margin: 0 0 var(--ct-sp-3);
}
h5, .ct-h5, .ct-eyebrow {
  font-family: var(--ct-font-sans);
  font-weight: var(--ct-w-medium);
  font-size: var(--ct-size-xs);
  line-height: 1.2;
  letter-spacing: var(--ct-track-eyebrow);
  text-transform: uppercase;
  color: var(--ct-fg-brand);
  margin: 0 0 var(--ct-sp-3);
}

p, .ct-p {
  margin: 0 0 var(--ct-sp-4);
  color: var(--ct-fg-2);
  font-size: var(--ct-size-md);
  line-height: var(--ct-lh-relaxed);
  text-wrap: pretty;
}

.ct-lede {
  font-size: var(--ct-size-xl);
  line-height: 1.5;
  color: var(--ct-fg-1);
  font-weight: var(--ct-w-light);
  letter-spacing: var(--ct-track-snug);
}

small, .ct-small {
  font-size: var(--ct-size-sm);
  color: var(--ct-fg-3);
}

a, .ct-link {
  color: var(--ct-fg-brand);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--ct-dur-2) var(--ct-ease),
              opacity var(--ct-dur-2) var(--ct-ease);
}
a:hover, .ct-link:hover { color: var(--ct-navy); }

code, kbd, samp, .ct-code {
  font-family: var(--ct-font-mono);
  font-size: 0.92em;
  background: var(--ct-paper-2);
  border: 1px solid var(--ct-border);
  padding: 0.12em 0.4em;
  border-radius: var(--ct-r-xs);
  color: var(--ct-fg-1);
}

hr, .ct-rule {
  border: 0;
  border-top: 1px solid var(--ct-border);
  margin: var(--ct-sp-8) 0;
}
.ct-rule-gold {
  border: 0;
  border-top: 1px solid var(--ct-gold);
}

blockquote, .ct-quote {
  font-family: var(--ct-font-sans);
  font-weight: var(--ct-w-light);
  font-size: var(--ct-size-2xl);
  line-height: 1.35;
  letter-spacing: var(--ct-track-snug);
  color: var(--ct-fg-1);
  border-left: 2px solid var(--ct-gold);
  padding-left: var(--ct-sp-5);
  margin: var(--ct-sp-6) 0;
}

/* ---------- Serif companion ---------------------------------
   Plex Serif used as an inline highlight inside Sans copy.
   Pattern: a noun-phrase set in serif italic punches editorial
   weight into otherwise-Sans body. Use sparingly — one or two
   highlights per screen, never a whole sentence.
   -------------------------------------------------------- */
.ct-serif {
  font-family: var(--ct-font-serif);
  font-weight: var(--ct-w-regular);
  font-style: normal;
}
.ct-serif-italic {
  font-family: var(--ct-font-serif);
  font-style: italic;
  font-weight: var(--ct-w-regular);
  letter-spacing: 0;
  /* Plex Serif's italic optical size sits slightly smaller than
     Plex Sans at the same px — nudge up a hair to align. */
  font-size: 1.04em;
}
.ct-serif-italic--display {
  font-family: var(--ct-font-serif);
  font-style: italic;
  font-weight: var(--ct-w-light);
  font-size: 1.02em;
  letter-spacing: -0.005em;
  color: var(--ct-blue);
}

/* ---------- Section paints ----------------------------------
   Drop-in surface utilities for full-bleed sections. */
.ct-paint-navy      { background: var(--ct-navy); color: #fff; }
.ct-paint-blue      { background: var(--ct-blue); color: #fff; }
.ct-paint-sky       { background: var(--ct-grad-sky); color: var(--ct-navy); }
.ct-paint-sea-earth { background: var(--ct-grad-sea-earth); color: var(--ct-navy); }
.ct-paint-cream     { background: var(--ct-cream); color: var(--ct-navy); }
.ct-paint-earth     { background: var(--ct-grad-earth); color: var(--ct-navy); }