/* FreePeriodicals.net design tokens, v2.1 (2026-09-12).
   The only file in the codebase where colours are defined. Included before app.css on every page.
   Contrast ratios (WCAG 2.2, relative luminance) are noted so the rules can be checked, not guessed. */

:root {
  /* brand */
  --fp-orange: #FF5400;         /* Signal Orange. One element per viewport. 6.1:1 on carbon, 3.2:1 on white (never text on light) */
  --fp-orange-hover: #FF4500;
  --fp-orange-ink: #B8380A;     /* orange text and links on light surfaces. 5.8:1 on white, 5.4:1 on paper, 5.0:1 on newsprint */

  /* dark surfaces */
  --fp-carbon: #0B0C10;         /* page background, dark */
  --fp-carbon-2: #14161D;       /* secondary band, dark */
  --fp-carbon-card: #1C1F29;    /* card surface on carbon */
  --fp-carbon-line: #3A3F4D;    /* borders on carbon. 1.9:1 against carbon: always paired with --fp-shadow-dark */
  --fp-on-dark: #D1D5DB;        /* body text on dark. 12.3:1 on the card */
  --fp-on-dark-2: #9CA3AF;      /* labels and captions on dark. 7.1:1 on the card; never below 14 px */
  --fp-heading-on-dark: #FFFFFF;

  /* light surfaces */
  --fp-paper: #F7F7F5;          /* page background, light */
  --fp-newsprint: #F1EEE6;      /* warm tint: cards on paper, the pages in the mark */
  --fp-white: #FFFFFF;          /* card surface on paper */
  --fp-paper-line: #E5E7EB;
  --fp-ink: #0B0C10;            /* headings and body on light. 19.6:1 on white */
  --fp-ink-2: #3F4450;          /* secondary text on light. 9.1:1 on paper */
  --fp-muted: #6B7280;          /* captions and sources on light. 4.8:1 on white, 4.5:1 on paper; never below 14 px */

  /* cool partner */
  --fp-harbour: #146C94;        /* links, second chart series, instrument cues on light. 5.8:1 on white */
  --fp-harbour-light: #5FB3D3;  /* the same roles on dark. 8.3:1 on carbon */

  /* status: platform states only, never the brand */
  --fp-ok: #15803D;      --fp-ok-on-dark: #4ADE80;
  --fp-warn: #B45309;    --fp-warn-on-dark: #FBBF24;
  --fp-error: #B91C1C;   --fp-error-on-dark: #F87171;

  /* type */
  --fp-font-display: "Poppins", "Segoe UI", Arial, sans-serif;
  --fp-font-text: "Inter", "Segoe UI", Arial, sans-serif;
  --fp-text-sm: 14px;  --fp-text: 16px;  --fp-text-lg: 18px;
  --fp-h3: 20px;  --fp-h2: 28px;  --fp-h1: 40px;  --fp-display: 56px;
  --fp-leading: 1.5;  --fp-leading-tight: 1.15;
  --fp-measure: 65ch;

  /* shape and space */
  --fp-radius: 12px;  --fp-radius-sm: 6px;  --fp-radius-pill: 999px;
  --fp-shadow-dark: 0 20px 40px rgba(0, 0, 0, .45);
  --fp-shadow-light: 0 12px 30px rgba(11, 12, 16, .10);
  --fp-s1: 4px; --fp-s2: 8px; --fp-s3: 12px; --fp-s4: 16px; --fp-s5: 24px; --fp-s6: 32px; --fp-s7: 48px; --fp-s8: 64px;
  --fp-target: 44px;
}

/* Theme roles. Components read these and never the raw colours above.
   The rgb triplets exist for Tailwind opacity modifiers (bg-canvas/95). Keep them in step with --bg and --surface. */
[data-theme="carbon"] {
  --bg: var(--fp-carbon);          --bg-rgb: 11 12 16;
  --bg-2: var(--fp-carbon-2);
  --surface: var(--fp-carbon-card); --surface-rgb: 28 31 41;
  --line: var(--fp-carbon-line);
  --shadow: var(--fp-shadow-dark);
  --text: var(--fp-on-dark);
  --text-2: var(--fp-on-dark-2);
  --heading: var(--fp-heading-on-dark);
  --accent: var(--fp-orange);
  --accent-text: var(--fp-orange);
  --link: var(--fp-harbour-light);
  --ok: var(--fp-ok-on-dark);
  --warn: var(--fp-warn-on-dark);
  --error: var(--fp-error-on-dark);
  --input-bg: var(--fp-carbon);
  color-scheme: dark;
}

[data-theme="paper"] {
  --bg: var(--fp-paper);           --bg-rgb: 247 247 245;
  --bg-2: var(--fp-newsprint);
  --surface: var(--fp-white);      --surface-rgb: 255 255 255;
  --line: var(--fp-paper-line);
  --shadow: var(--fp-shadow-light);
  --text: var(--fp-ink);
  --text-2: var(--fp-ink-2);
  --heading: var(--fp-ink);
  --accent: var(--fp-orange);
  --accent-text: var(--fp-orange-ink);
  --link: var(--fp-harbour);
  --ok: var(--fp-ok);
  --warn: var(--fp-warn);
  --error: var(--fp-error);
  --input-bg: var(--fp-white);
  color-scheme: light;
}

/* Legacy aliases from app.css v2.0.0, so templates keep working while they are converted. Remove once nothing references them. */
[data-theme] {
  --signal: var(--fp-orange);
  --signal-hover: var(--fp-orange-hover);
  --canvas: var(--bg);
  --raised: var(--surface);
  --body: var(--text-2);
  --chip: var(--bg-2);
}