/* =============================================================
   PRAVAH SOLUTION — Design System Tokens
   colors_and_type.css  v4
   Palette drawn from the Pravah lotus mark:
     Midnight navy → peacock teal → gold — darkness, flow, authority.
   ============================================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ── Fonts ── */
  --font-display   : 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-condensed : 'Barlow Condensed', 'Impact', 'Arial Narrow', sans-serif;
  --font-body      : 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono      : 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Dark surfaces (logo navy) ── */
  --midnight   : #080F18;   /* deepest dark — footer, overlays */
  --ink        : #0C1A28;   /* primary dark surface — hero, nav */
  --ink-raised : #122238;   /* panels / cards on dark */
  --ink-border : rgba(255,255,255,0.08); /* dividers on dark */

  /* ── Light surfaces (parchment) ── */
  --parchment      : #F0E9D8;   /* primary light surface */
  --parchment-deep : #E6DCC8;   /* section band / alternate light */
  --vellum         : #CEBF9A;   /* dividers, card edges on light */
  --paper          : #FFFFFF;

  /* ── Brand teal (logo outer petals) ── */
  --peacock        : #0B6E68;   /* brand teal — primary */
  --peacock-bright : #0E8A83;   /* hover / lighter teal */
  --peacock-deep   : #084E49;   /* pressed / dark teal */
  --peacock-soft   : #A8D4D0;   /* teal on dark surfaces */
  --peacock-wash   : rgba(11, 110, 104, 0.12);

  /* ── Gold (logo center petals) ── */
  --gold        : #C8962A;   /* primary gold accent */
  --gold-bright : #DBA82E;   /* hover */
  --gold-pale   : #E8CC78;   /* gold on dark */
  --gold-deep   : #9B7020;   /* deep pressed gold */
  --gold-wash   : rgba(200, 150, 42, 0.1);

  /* ── Semantic aliases ── */
  --saffron     : #C8962A;
  --cream       : var(--parchment);
  --cream-deep  : var(--parchment-deep);
  --khadi       : var(--vellum);

  /* ── Text ── */
  --slate       : #2E3D4A;   /* primary text on light */
  --slate-mid   : #4A5E6C;   /* secondary text on light */
  --slate-soft  : #6B7E8C;   /* tertiary / captions on light */
  --stone       : var(--slate-mid);   /* compat */
  --stone-soft  : var(--slate-soft);  /* compat */

  /* ── Power accent ── */
  --crimson     : #7A1714;   /* rally CTA section bg */
  --crimson-mid : #9B2018;   /* hover */
  --crimson-soft: #C4302A;   /* alerts */
  --danger      : #B5392B;

  /* ── Civic ── */
  --navy        : #0D2448;
  --navy-deep   : #081830;
  --navy-soft   : #B0C4D8;
  --teal        : var(--peacock);   /* compat */
  --teal-soft   : var(--peacock-soft);

  /* ── Missing vars from old components ── */
  --indigo-vote  : var(--navy);
  --verdict-red  : var(--crimson-soft);

  /* ── Semantic tokens ── */
  --hairline        : rgba(46, 61, 74, 0.18);   /* on light */
  --hairline-dark   : rgba(255, 255, 255, 0.1); /* on dark */
  --surface         : var(--parchment);
  --surface-dark    : var(--ink);
  --surface-raised  : var(--paper);
  --text-primary    : var(--slate);
  --text-secondary  : var(--slate-mid);
  --text-on-dark    : var(--parchment);
  --accent          : var(--gold);
  --link-color      : var(--peacock);
  --shadow-card     : 0 2px 12px rgba(8, 15, 24, 0.1);
  --shadow-card-dark: 0 4px 24px rgba(4, 8, 15, 0.5);

  /* ── Motion ── */
  --ease-out     : cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-power   : cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 380ms;
  --duration-slow: 600ms;

  /* ── Spacing (8 px grid) ── */
  --s-1  : 4px;
  --s-2  : 8px;
  --s-3  : 12px;
  --s-4  : 16px;
  --s-6  : 24px;
  --s-8  : 32px;
  --s-12 : 48px;
  --s-16 : 64px;
  --s-24 : 96px;
  --s-32 : 128px;
  --s-48 : 192px;

  /* ── Borders & radius ── */
  --radius-card  : 2px;
  --radius-btn   : 2px;
  --radius-input : 2px;
}

/* ── Minimal reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  font-family    : var(--font-body);
  font-size      : 16px;
  line-height    : 1.5;
  color          : var(--slate);
  background     : var(--ink);
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family    : var(--font-display);
  font-weight    : 600;
  line-height    : 1.1;
  letter-spacing : -0.02em;
  color          : var(--slate);
}

p   { line-height: 1.6; }
img { display: block; max-width: 100%; }

a {
  color           : var(--peacock);
  text-decoration : none;
  transition      : color var(--duration-fast) var(--ease-out);
}
a:hover { text-decoration: underline; }

button {
  font-family : inherit;
  cursor      : pointer;
  border      : none;
  background  : none;
}

/* ── Eyebrow utility ── */
.eyebrow {
  font-family    : var(--font-condensed);
  font-size      : 13px;
  font-weight    : 700;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--slate-mid);
}
.eyebrow--accent { color: var(--gold); }
.eyebrow--teal   { color: var(--peacock-bright); }
.eyebrow--light  { color: rgba(240, 233, 216, 0.6); }