/* =============================================================================
   Re:Action Foundation — Brand Design Tokens
   ============================================================================
   Source-of-truth for all brand color, type, and spacing decisions.
   Mirror these in Tailwind config / CSS custom props / design tooling as needed.
   ========================================================================= */

:root {
  /* ─── Color ───────────────────────────────────────────────────────────── */

  /* Foundation palette (PFD-derived, R2 institutional-sobriety compliant) */
  --color-paper:           #F2EFE7;  /* warm cream paper — primary background */
  --color-paper-tint:      #EAE6DC;  /* slightly darker paper — section dividers */
  --color-ink:             #1A1814;  /* deep ink — primary text + line work */
  --color-ink-soft:        #4A453E;  /* softened ink — secondary text */
  --color-mute:            #8B847A;  /* muted gray — captions, secondary labels */

  /* Civic-orange accent (R1 legitimacy density, used sparingly) */
  --color-civic:           #C5421E;  /* civic-orange — hairlines, current-data, mark fill */
  --color-civic-tint:      rgba(197, 66, 30, 0.10);  /* current-row tint, hover state */
  --color-civic-soft:      #C9B07C;  /* muted amber — cartographic translucent fills */

  /* WCAG AA contrast text on cream (7.4:1) */
  --color-accent-text:     #8A6624;  /* civic-orange-derived but AA-passing on cream */

  /* ─── Extended palette · sea + sand + rust ───────────────────────────
     Optional accent colors derived from the visual register of the
     brand's cartographic + architectural imagery (SF Bay water + Bay
     Bridge orange + cream parchment + cartographic land tone). Use for
     additional visual variety in diagrams, figures, and secondary
     accents. Civic stays the primary chromatic accent.
     ───────────────────────────────────────────────────────────────── */
  --color-sea:             #3D6B7A;  /* deep sea-teal, like SF Bay water */
  --color-sea-mid:         #689AAA;  /* lighter sea-teal, friendlier midtone */
  --color-sea-tint:        rgba(61, 107, 122, 0.10);
  --color-sand:            #C9B07C;  /* warm tan, cartographic land — same as civic-soft */
  --color-sand-deep:       #A88E5C;  /* darker warm tan, dimension-callout accent */
  --color-rust:            #A03A1E;  /* deeper civic, Bay Bridge International Orange depth */
  --color-rust-tint:       rgba(160, 58, 30, 0.10);

  /* Night mode (deep ink ground, cream type) */
  --color-night-bg:        #1A1814;
  --color-night-bg-soft:   #2A2620;
  --color-night-fg:        #F2EFE7;
  --color-night-fg-soft:   #B8B0A2;

  /* ─── Type ────────────────────────────────────────────────────────────── */

  /* Type stack — three faces, three roles */
  --font-display:  'Inter Tight', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:     'Source Serif Pro', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* Type scale — modular, 1.250 ratio */
  --text-xs:    0.75rem;    /* 12px — monospace meta */
  --text-sm:    0.875rem;   /* 14px — caption */
  --text-base:  1rem;       /* 16px — body */
  --text-md:    1.125rem;   /* 18px — lead body */
  --text-lg:    1.5rem;     /* 24px — sub-headings */
  --text-xl:    2rem;       /* 32px — section headings */
  --text-2xl:   2.5rem;     /* 40px — page sub-titles */
  --text-3xl:   3.5rem;     /* 56px — H1 default */
  --text-4xl:   4.5rem;     /* 72px — hero H1 */
  --text-5xl:   6rem;       /* 96px — stat treatment */

  /* Type weights */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* Tracking */
  --tracking-tight:   -0.02em;   /* display H1 tight */
  --tracking-normal:  0;         /* body */
  --tracking-wide:    0.05em;    /* monospace caps eyebrows */
  --tracking-wider:   0.10em;    /* tiny monospace labels */

  /* Leading */
  --leading-tight:   1.1;        /* display */
  --leading-snug:    1.3;        /* headings */
  --leading-normal:  1.5;        /* body */
  --leading-loose:   1.7;        /* long-form reading */

  /* ─── Space ───────────────────────────────────────────────────────────── */

  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-9:  3.5rem;    /* 56px */
  --space-10: 4rem;      /* 64px */
  --space-11: 5rem;      /* 80px */
  --space-12: 6rem;      /* 96px */
  --space-13: 7rem;      /* 112px */
  --space-14: 7.5rem;    /* 120px */
  --space-16: 8rem;      /* 128px — minimum section spacing per workspace standard */
  --space-20: 10rem;     /* 160px */

  /* ─── Stroke + Rule ──────────────────────────────────────────────────── */

  --rule-hair:   1px;
  --rule-thin:   2px;
  --rule-med:    3px;
  --rule-thick:  4px;
  --rule-heavy:  6px;

  /* ─── Mark sizing ────────────────────────────────────────────────────── */

  --mark-favicon:  16px;  /* favicon — minimum viable scale */
  --mark-icon:     32px;  /* OS icon */
  --mark-small:    48px;  /* inline brand chrome */
  --mark-medium:   80px;  /* header */
  --mark-large:    160px; /* hero / feature */
  --mark-display:  256px; /* full-page brand artifact */
}

/* ─── Night mode override ───────────────────────────────────────────────── */

[data-theme="night"] {
  --color-paper:        var(--color-night-bg);
  --color-paper-tint:   var(--color-night-bg-soft);
  --color-ink:          var(--color-night-fg);
  --color-ink-soft:     var(--color-night-fg-soft);
  --color-mute:         #6B655B;
  /* Civic stays the same hue but adjusts for ink-on-night contrast */
  --color-civic-tint:   rgba(197, 66, 30, 0.15);
  --color-accent-text:  #E5A55F;  /* night-mode AA-passing variant */
}