/* Without - design tokens
 * ============================================================================
 * The single source of colour, type, spacing and shadow for every page.
 * Generated from the "Without Design System" bundle (tokens/*.css), with two
 * deliberate departures that are documented where they occur:
 *
 *   1. FONTS ARE SELF-HOSTED, not loaded from Google's CDN.
 *   2. A DARK PALETTE IS DERIVED, because the system does not define one.
 *
 * Everything else is the system's values, unchanged.
 *
 * HOW TO USE IT: do not write raw hex anywhere else. If a colour is missing
 * here, it belongs here - a one-off `#e8e8e8` in one file is how a design
 * system stops being one.
 * ========================================================================= */

/* ── 1. Fonts - self-hosted, on purpose ─────────────────────────────────────
 * The design system loads these with @import from fonts.googleapis.com. We do
 * not, and this is the one place we knowingly depart from it.
 *
 * That @import sends every visitor's IP address to Google in the US on every
 * page load. LG München I held that to be a GDPR breach in January 2022; the
 * mass cease-and-desist campaign that followed was stopped as abusive in 2023,
 * but the damages claim itself survived, and in early 2026 the BGH referred the
 * core questions to the ECJ - so it is open, not settled. Our privacy policy
 * names no Google service, and the imprint on the same site carries a home
 * address. Self-hosting removes the question for the price of one folder.
 *
 * The files are the variable fonts from Google Fonts (SIL Open Font License),
 * subsetted to Latin + Latin Extended-A + punctuation + currency and converted
 * to woff2: 532 KB for all four, and the italics are only fetched if italic
 * text is actually rendered. OFL requires the licence to travel with them -
 * it is in assets/fonts/OFL-*.txt.
 *
 * The stacks below still name Georgia and Helvetica as fallbacks, exactly as
 * the design system does, so a failed font load degrades to the right shapes
 * rather than to something arbitrary.
 * ------------------------------------------------------------------------- */
@font-face{
  font-family:"Literata";
  src:url("assets/fonts/Literata.woff2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Literata";
  src:url("assets/fonts/Literata-Italic.woff2") format("woff2");
  font-weight:200 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Schibsted Grotesk";
  src:url("assets/fonts/SchibstedGrotesk.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Schibsted Grotesk";
  src:url("assets/fonts/SchibstedGrotesk-Italic.woff2") format("woff2");
  font-weight:400 900; font-style:italic; font-display:swap;
}

:root{
  /* ── Brand red - sampled from the logo (Pantone 186 C) ──────────────────── */
  --red-50:#FCF1F3; --red-100:#F9E0E4; --red-200:#F2BCC6; --red-300:#E68CA0;
  --red-400:#D95270; --red-500:#C8102E; --red-600:#A90D27; --red-700:#8A0B20;
  --red-800:#690818; --red-900:#470510;

  /* ── Warm ink and paper. Greenish-warm greys, never blue-grey. ──────────── */
  --paper:#F4F4F0;
  --ink-900:#101010; --ink-800:#26241F; --ink-700:#3D3A33; --ink-600:#57534A;
  --ink-500:#736E63; --ink-400:#948F84; --ink-300:#B8B3A9; --ink-200:#D6D2C9;
  --ink-100:#E7E4DD; --ink-50:#EFEDE7; --white:#FFFFFF;

  /* ── Status. Present, but kept quiet. ───────────────────────────────────── */
  --green-600:#2E6B45; --green-100:#DFEDE3; --amber-600:#8F6410; --amber-100:#F5EAD1;

  /* ── Semantic aliases ───────────────────────────────────────────────────── */
  --color-primary:var(--red-500);
  --color-primary-hover:var(--red-600);
  --color-primary-press:var(--red-700);
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-tint:var(--red-50);
  --surface-ink:var(--ink-900);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-tertiary:var(--ink-500);
  --text-inverse:#FDFDFB;
  --text-accent:var(--red-500);
  --text-on-primary:#FFFFFF;
  --border-subtle:var(--ink-100);
  --border-strong:var(--ink-300);
  --border-input:var(--ink-200);
  --status-success:var(--green-600); --status-success-bg:var(--green-100);
  --status-warning:var(--amber-600); --status-warning-bg:var(--amber-100);
  --status-danger:var(--red-600);    --status-danger-bg:var(--red-50);
  --focus-ring:0 0 0 2px var(--surface-page),0 0 0 4px var(--red-500);
  /* The ring above sits OUTSIDE the element, which needs 4px of clear space
     around it. Dense UI does not have that: a scroll container with 2px of
     padding clips it, and the ring appears sliced off at the edge. This one is
     drawn inside the element's own box, so nothing can cut it - and because it
     lands exactly on the border, focus reads as one thicker border rather than
     as a second ring around a first. */
  --focus-ring-inset:inset 0 0 0 2px var(--color-primary);

  /* ── Monogram palette. Typographic avatars, never photos. ───────────────── */
  --mono-1-bg:#F2BCC6; --mono-1-fg:#690818;
  --mono-2-bg:#D6D2C9; --mono-2-fg:#26241F;
  --mono-3-bg:#DFEDE3; --mono-3-fg:#1F4930;
  --mono-4-bg:#F5EAD1; --mono-4-fg:#6B4A0C;
  --mono-5-bg:#101010; --mono-5-fg:#F4F4F0;

  /* ── Type. The split IS the brand: serif for what a person wrote, ────────
   *    sans for what the app says. Fallbacks are the system's own. */
  --font-serif:"Literata",Georgia,"Times New Roman",serif;
  --font-sans:"Schibsted Grotesk","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --text-caption:12px; --text-label:13px; --text-body-sm:14px; --text-body:16px;
  --text-body-lg:18px; --text-title-sm:20px; --text-title:24px;
  --text-headline:30px; --text-display:40px; --text-hero:56px;
  --leading-tight:1.15; --leading-snug:1.3; --leading-body:1.55; --leading-reading:1.65;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700; --weight-heavy:800;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-label:0.01em; --tracking-caps:0.08em;

  /* ── Spacing, radius, targets ───────────────────────────────────────────── */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;
  --container-app:420px; --container-page:720px;
  --hit-target:44px;

  /* ── Effects. Soft, warm, low contrast. No borders AND shadow on a card. ── */
  --shadow-card:0 1px 2px rgba(16,16,16,0.05),0 4px 12px rgba(16,16,16,0.06);
  --shadow-raised:0 2px 4px rgba(16,16,16,0.06),0 10px 28px rgba(16,16,16,0.10);
  --shadow-overlay:0 8px 16px rgba(16,16,16,0.10),0 24px 56px rgba(16,16,16,0.18);
  --ease-out:cubic-bezier(0.2,0.8,0.2,1);
  --ease-in-out:cubic-bezier(0.45,0,0.25,1);
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms;

  /* ══ Bridge to the existing stylesheets ═════════════════════════════════
   * Every page was written against --bg / --surface / --text / --muted /
   * --line / --brand. Redefining those in terms of the tokens above moves the
   * whole site onto the system in one place, instead of rewriting several
   * thousand declarations by hand - which is how you introduce a hundred small
   * regressions to change nine colours.
   *
   * These are aliases, not a second palette. Nothing new is invented here. */
  --bg:var(--paper);
  --surface:var(--white);
  --surface-2:var(--ink-50);
  --text:var(--text-primary);
  --muted:var(--text-secondary);
  --faint:var(--text-tertiary);
  --line:var(--border-subtle);
  --line-strong:var(--border-input);
  --accent:var(--ink-900);            /* the primary button is ink, not red */
  --accent-hover:#000000;
  --on-accent:var(--white);
  --accent2:var(--red-500);
  --on-accent2:var(--white);
  --brand:var(--red-500);
  --brand-hover:var(--red-600);
  --red:var(--red-500);
  --red-soft:var(--status-danger-bg);
  --red-line:var(--red-100);
  --ok:var(--ink-900);                /* confirmed = ink. The brand has no green. */
  --ok-soft:var(--white);
  --ok-line:var(--ink-900);
  --shadow:var(--shadow-raised);
  --radius:var(--radius-lg);
  /* Used by app.html and the brand guide only. Listed here so that removing
     their inline palettes does not quietly drop nine colours. */
  --accent2-hover:var(--red-600);
  --accent2-soft:var(--red-50);
  --accent2-line:var(--red-100);
  --accent2-ink:var(--red-700);
  --red-ink:var(--red-700);
  --danger:var(--status-danger);
  --like:var(--ink-900);              /* the like button is ink; red is the hover */
  --like-hover:var(--red-500);
  --like-soft:var(--surface-tint);
  /* Verification is a STATUS, and the design system does define one green for
     exactly that - "semantic green/amber exist but stay quiet". I was too strict
     when I stripped every green earlier: the brand guide carries none, but the
     token file does, and a verified badge is the textbook case for it. Red is
     the signal that means "look here"; being verified is not a call to action. */
  --verified:var(--status-success);
  --verified-soft:var(--status-success-bg);
  --verified-line:#C3DCCB;
  --on-verified:var(--white);
  --on-like:var(--white);
}

/* ── 2. Dark ────────────────────────────────────────────────────────────────
 * The design system defines no dark mode - there is not one prefers-color-scheme
 * rule in the whole bundle. That is an absence, not a prohibition, and this app
 * has had a working Auto/Light/Dark switch since testers asked for one.
 *
 * So the dark palette is DERIVED from the system's own ink scale rather than
 * invented: ink-900 becomes the page, ink-800 the card, paper becomes the text.
 * The red lifts to red-400, because red-500 on near-black fails contrast - that
 * is the one value here the bundle does not contain, and it is taken from the
 * bundle's own red ramp rather than mixed by hand.
 *
 * `data-theme` wins over the media query, so the manual switch in Settings
 * still overrides the system preference.
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E0E0D;
    --surface-page:#0E0E0D;
    --surface-card:var(--ink-900);
    --surface-tint:#2A1417;
    --text-primary:#F4F4F0;
    --text-secondary:#B8B3A9;
    --text-tertiary:#948F84;
    --text-inverse:var(--ink-900);
    --text-accent:var(--red-400);
    --border-subtle:#26241F;
    --border-input:#3D3A33;
    --border-strong:#57534A;
    --status-danger-bg:#2A1417;

    --bg:#0E0E0D;
    --surface:var(--ink-900);
    --surface-2:var(--ink-800);
    --accent:#F4F4F0;
    --accent-hover:var(--white);
    --on-accent:var(--ink-900);
    --accent2:var(--red-400);
    --brand:var(--red-400);
    --brand-hover:var(--red-300);
    --red:var(--red-400);
    --red-soft:#2A1417;
    --red-line:#452027;
    --ok:#F4F4F0;
    --ok-soft:var(--ink-900);
    --ok-line:#F4F4F0;
    --focus-ring:0 0 0 2px #0E0E0D,0 0 0 4px var(--red-400);
    --shadow-card:0 1px 2px rgba(0,0,0,0.35),0 4px 12px rgba(0,0,0,0.45);
    --shadow-raised:0 2px 4px rgba(0,0,0,0.4),0 10px 28px rgba(0,0,0,0.55);
    --shadow-overlay:0 8px 16px rgba(0,0,0,0.5),0 24px 56px rgba(0,0,0,0.65);
    --accent2-hover:var(--red-300);     --accent2-soft:#2A1417;
    --accent2-line:#452027;             --accent2-ink:var(--red-200);
    --red-ink:var(--red-200);           --danger:var(--red-400);
    --like:#F4F4F0;     --like-hover:var(--red-400);
    --like-soft:#2A1417;     --on-like:var(--ink-900);
    --verified:#6CC08B; --verified-soft:#14261B;
    --verified-line:#24412F; --on-verified:var(--ink-900);
  }
}
:root[data-theme="dark"]{
  --paper:#0E0E0D;
  --surface-page:#0E0E0D;
  --surface-card:var(--ink-900);
  --surface-tint:#2A1417;
  --text-primary:#F4F4F0;
  --text-secondary:#B8B3A9;
  --text-tertiary:#948F84;
  --text-inverse:var(--ink-900);
  --text-accent:var(--red-400);
  --border-subtle:#26241F;
  --border-input:#3D3A33;
  --border-strong:#57534A;
  --status-danger-bg:#2A1417;

  --bg:#0E0E0D;
  --surface:var(--ink-900);
  --surface-2:var(--ink-800);
  --accent:#F4F4F0;
  --accent-hover:var(--white);
  --on-accent:var(--ink-900);
  --accent2:var(--red-400);
  --brand:var(--red-400);
  --brand-hover:var(--red-300);
  --red:var(--red-400);
  --red-soft:#2A1417;
  --red-line:#452027;
  --ok:#F4F4F0;
  --ok-soft:var(--ink-900);
  --ok-line:#F4F4F0;
  --focus-ring:0 0 0 2px #0E0E0D,0 0 0 4px var(--red-400);
  --shadow-card:0 1px 2px rgba(0,0,0,0.35),0 4px 12px rgba(0,0,0,0.45);
  --shadow-raised:0 2px 4px rgba(0,0,0,0.4),0 10px 28px rgba(0,0,0,0.55);
  --shadow-overlay:0 8px 16px rgba(0,0,0,0.5),0 24px 56px rgba(0,0,0,0.65);
  --accent2-hover:var(--red-300);   --accent2-soft:#2A1417;
  --accent2-line:#452027;           --accent2-ink:var(--red-200);
  --red-ink:var(--red-200);         --danger:var(--red-400);
  --like:#F4F4F0;   --like-hover:var(--red-400);
  --like-soft:#2A1417;   --on-like:var(--ink-900);
  --verified:#6CC08B; --verified-soft:#14261B;
  --verified-line:#24412F; --on-verified:var(--ink-900);
}

/* ── 3. The split ───────────────────────────────────────────────────────────
 * "Literata for anything a person wrote, Schibsted Grotesk for anything the app
 * says." Chrome is sans by default; anything carrying someone's own words opts
 * into the serif with .prose.
 * ------------------------------------------------------------------------- */
body{font-family:var(--font-sans)}
/* Literata carries an optical-size axis (7-72pt). Letting it follow the
   rendered size is the point of the typeface; "none" would freeze it. */
.prose,blockquote{font-optical-sizing:auto}
.prose,
.prose p,
blockquote{
  font-family:var(--font-serif);
  line-height:var(--leading-reading);
}

/* The red period is the signature. Use as <span class="dot">.</span> */
.dot{color:var(--brand)}

/* ── 4. Shared shapes ───────────────────────────────────────────────────── */
:where(button,.btn,.chip){border-radius:var(--radius-pill)}
:where(input,textarea,select){border-radius:var(--radius-md)}
/* Form controls get the inset ring; they live inside tight containers and they
   already have a border for it to sit on. Everything else keeps the offset ring
   from the design system, where there is room for it. */
:where(input,textarea,select):focus-visible{
  outline:none; box-shadow:var(--focus-ring-inset); border-color:var(--color-primary);
}
:where(a,button,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--focus-ring);
}