/* Passant design tokens v0.1. One system, two expressions:
   passant.com defaults to the light theme, openpassant.org to the dark theme.
   Contrast ratios in comments are WCAG 2.x, measured, not estimated. */

:root {
  /* Brand colours */
  --ink: #14213A;            /* primary text and marks. 14.4:1 on ivory */
  --ivory: #F6F2E9;          /* primary ground */
  --ivory-deep: #EDE6D6;     /* alternate section ground on light */
  --ink-raised: #1D2D4D;     /* cards and code blocks on dark */
  --gold: #B8892B;           /* SHAPES ONLY on ivory (2.8:1). Fine as text on ink (5.1:1) */
  --gold-text-large: #8F6A1E;/* gold text at 24px and above on ivory (4.4:1) */
  --gold-text: #7E5C17;      /* gold text at any size on ivory (5.5:1) */
  --gold-on-ink: #E0B65A;    /* gold text and links on ink (8.4:1) */

  /* Neutrals */
  --muted: #5A6274;          /* secondary text on ivory (5.5:1) */
  --muted-on-ink: #C9CEDA;   /* secondary text on ink (10.2:1) */
  --line: rgba(20, 33, 58, 0.16);
  --line-on-ink: rgba(246, 242, 233, 0.18);

  /* Status. "Verified" is the most important state in the product. */
  --verified: #246B5A;       /* on ivory (5.7:1) */
  --verified-on-ink: #7FD1B9;/* on ink (9.0:1) */
  --failed: #A8421F;         /* on ivory (5.4:1) */
  --failed-on-ink: #F0997A;  /* on ink (7.3:1) */

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;       /* weight 600, tracking -0.02em */
  --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; /* weights 400 and 600 */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-xs: 0.75rem;    /* 12px labels, uppercase, tracking 0.08em, weight 600 */
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;/* 17px body, line-height 1.55 */
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: clamp(2.5rem, 6vw, 4.25rem); /* hero, line-height 1.05 */

  /* Spacing, 4px base */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;   --space-12: 3rem;   --space-16: 4rem;
  --space-24: 6rem;   --space-32: 8rem;
  --measure: 66ch;          /* max line length for prose */
  --page: 72rem;            /* max content width */

  /* Shape. The signature is the hallmark cartouche: clipped corners, not rounded ones. */
  --clip: 8px;
  --cartouche: polygon(var(--clip) 0, calc(100% - var(--clip)) 0, 100% var(--clip),
               100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%,
               var(--clip) 100%, 0 calc(100% - var(--clip)), 0 var(--clip));
  --radius: 4px;            /* everything that is not a cartouche */

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 180ms;
}

/* Semantic roles. Components use these, never the raw colours above. */
:root, [data-theme="light"] {
  --bg: var(--ivory); --bg-alt: var(--ivory-deep); --surface: #FFFFFF;
  --fg: var(--ink); --fg-muted: var(--muted); --border: var(--line);
  --accent-shape: var(--gold); --accent-text: var(--gold-text); --link: var(--ink);
  --ok: var(--verified); --bad: var(--failed);
  --button-bg: var(--ink); --button-fg: var(--ivory);
}
[data-theme="dark"] {
  --bg: var(--ink); --bg-alt: var(--ink-raised); --surface: var(--ink-raised);
  --fg: var(--ivory); --fg-muted: var(--muted-on-ink); --border: var(--line-on-ink);
  --accent-shape: var(--gold); --accent-text: var(--gold-on-ink); --link: var(--gold-on-ink);
  --ok: var(--verified-on-ink); --bad: var(--failed-on-ink);
  --button-bg: var(--ivory); --button-fg: var(--ink);
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }