/* AUTO-COPIED from threedoors-wiki/marketing/brand/design-system. Do not edit here — edit the wiki source and re-run _build-assets.py. */

/* ============================================================
   ThreeDoors — colors_and_type.css
   Locked brand canon → CSS custom properties.
   Dark theme is default. Light theme overrides under [data-theme="light"].
   Editorial scale (1.333 perfect-fourth), base 16px.

   FONTS: Loaded from Google Fonts (no local TTFs in canon).
     Fraunces — variable, opsz/wght — display + headings
     Inter    — 400/500/600/700 — body + UI
     Special Elite — single weight — artefact only, ≤ 13px
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=Special+Elite&display=swap");

:root {
  /* ---------- Raw palette (locked) ---------- */
  --color-door-cream:        #F1E7D2;
  --color-cipher-teal:       #0E5C63;
  --color-threshold-crimson: #B5132A;
  --color-cipher-ink:        #0A2326;
  --color-crimson-hover:     #C8243B;

  /* Documented ink lifts — same hue family, lifted half / one step */
  --color-ink-lift-1:        #0F2A2E;
  --color-ink-lift-2:        #14383C;

  /* Sage lift — teal toward cream, for foreground roles on ink */
  --color-sage-lift:         color-mix(in oklab, var(--color-cipher-teal) 55%, var(--color-door-cream));
  /* Crimson lift — crimson toward cream, for foreground roles on ink */
  --color-crimson-lift:      color-mix(in oklab, var(--color-threshold-crimson) 55%, var(--color-door-cream));

  /* ---------- Semantic colour (dark, default) ---------- */
  --color-bg:             var(--color-cipher-ink);
  --color-surface:        var(--color-ink-lift-1);
  --color-surface-raise:  var(--color-ink-lift-2);
  --color-border:         var(--color-ink-lift-2);
  --color-border-strong:  rgba(241, 231, 210, 0.30);
  --color-text:           var(--color-door-cream);
  --color-text-body:      rgba(241, 231, 210, 0.92);
  --color-text-muted:     rgba(241, 231, 210, 0.68);
  --color-text-soft:      rgba(241, 231, 210, 0.50);
  --color-accent:         var(--color-sage-lift);
  --color-accent-block:   var(--color-cipher-teal);
  --color-accent-ink:     var(--color-door-cream);
  --color-critical:       var(--color-threshold-crimson);
  --color-critical-fg:    var(--color-crimson-lift);
  --color-critical-hover: var(--color-crimson-hover);
  --color-critical-ink:   var(--color-door-cream);
  --color-focus-ring:     rgba(241, 231, 210, 0.55);

  /* ---------- Typography ---------- */
  --font-serif:    "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-sans:     "Inter", "Helvetica Neue", "Arial", sans-serif;
  --font-artefact: "Special Elite", "Courier Prime", "Courier New", monospace;

  /* Editorial scale (1.333 perfect-fourth) */
  --t-display:    4.5rem;     /* 72px */
  --t-h1:         3.25rem;    /* 52px */
  --t-h2:         2.375rem;   /* 38px */
  --t-h3:         1.75rem;    /* 28px */
  --t-h4:         1.375rem;   /* 22px */
  --t-body-lg:    1.125rem;   /* 18px */
  --t-body:       1rem;       /* 16px */
  --t-caption:    0.875rem;   /* 14px */
  --t-caption-xs: 0.75rem;    /* 12px */
  --t-artefact-max: 13px;

  /* Line heights */
  --lh-display: 1.04;
  --lh-h1:      1.08;
  --lh-h2:      1.12;
  --lh-h3:      1.20;
  --lh-h4:      1.25;
  --lh-body-lg: 1.50;
  --lh-body:    1.55;
  --lh-caption: 1.40;

  /* Letter-spacing */
  --ls-display: -0.022em;
  --ls-h1:      -0.015em;
  --ls-h2:      -0.012em;
  --ls-h3:      -0.010em;
  --ls-h4:       0;
  --ls-body:     0;
  --ls-caption:  0.02em;
  --ls-caption-xs: 0.04em;
  --ls-eyebrow:  0.06em;

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ---------- Spacing — 8px base, 9 steps ---------- */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8: 128px;
  --space-9: 192px;

  /* ---------- Radius — universal 4px ---------- */
  --r-0:  0;
  --r-1:  4px;
  --r-2:  8px;   /* reserved */
  --radius: var(--r-1);

  /* ---------- Motion ---------- */
  --motion-fast:   160ms;
  --motion-base:   240ms;
  --motion-slow:   360ms;
  --ease-out-slow: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Layout ---------- */
  --measure:        66ch;
  --measure-narrow: 40ch;
  --shell-max:     1200px;
}

/* ============================================================
   Light theme — Door Cream ground.
   ============================================================ */
:root[data-theme="light"] {
  --color-bg:             var(--color-door-cream);
  --color-surface:        rgba(14, 92, 99, 0.06);
  --color-surface-raise:  rgba(14, 92, 99, 0.10);
  --color-border:         rgba(14, 92, 99, 0.20);
  --color-border-strong:  rgba(14, 92, 99, 0.42);
  --color-text:           var(--color-cipher-ink);
  --color-text-body:      var(--color-cipher-teal);
  --color-text-muted:     rgba(14, 92, 99, 0.78);
  --color-text-soft:      rgba(10, 35, 38, 0.55);
  --color-accent:         var(--color-cipher-teal);
  --color-accent-block:   var(--color-cipher-teal);
  --color-accent-ink:     var(--color-door-cream);
  --color-critical:       var(--color-threshold-crimson);
  --color-critical-fg:    var(--color-threshold-crimson);
  --color-critical-hover: var(--color-crimson-hover);
  --color-critical-ink:   var(--color-door-cream);
  --color-focus-ring:     rgba(14, 92, 99, 0.55);
}

/* ============================================================
   Semantic element defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-critical); color: var(--color-critical-ink); }

/* Headings — Fraunces */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: var(--w-semibold);
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }

p     { margin: 0; max-width: var(--measure); text-wrap: pretty; }
small { font-size: var(--t-caption); color: var(--color-text-muted); letter-spacing: var(--ls-caption); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--motion-fast) var(--ease-out-slow),
              color var(--motion-fast) var(--ease-out-slow);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  :root {
    --t-display: 3.5rem;
    --t-h1:      2.5rem;
    --t-h2:      1.875rem;
  }
}