/*
 * Modernist design system tokens, from the Claude Design handoff.
 * Flat, architectural, Archivo throughout, one accent, zero radius, 2px rules.
 *
 * Light is the ground the system was designed on. Dark is the check from
 * artboard 1c. Roles are defined here so no component ever needs a raw hex.
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  color-scheme: light;

  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-rule: color-mix(in srgb, #201e1d 18%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  /* Semantic pairs so components stay theme-agnostic. */
  --tag-bg: var(--color-accent-100);
  --tag-fg: var(--color-accent-800);
  --accent-ink: var(--color-accent-700);   /* accent at paragraph size */
  --on-accent: var(--color-bg);
  --scrim: color-mix(in srgb, #201e1d 28%, transparent);

  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-md: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #201e1d 10%, transparent);
  --shadow-md: 0 2px 8px color-mix(in srgb, #201e1d 14%, transparent);
  --shadow-lg: 0 8px 28px color-mix(in srgb, #201e1d 22%, transparent);

  --rule-strong: 2px solid var(--color-divider);
  --rule-hair: 1px solid var(--color-rule);
}

/* Dark, per artboard 1c. The tinted-fill pair inverts rather than the whole ramp:
   on a dark ground a tint is a low-alpha accent wash carrying light accent text. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #1a1918;
  --color-surface: #242221;
  --color-text: #f0eeec;
  --color-accent: #ff563c;
  --color-divider: color-mix(in srgb, #f0eeec 30%, transparent);
  --color-rule: color-mix(in srgb, #f0eeec 14%, transparent);

  --tag-bg: color-mix(in srgb, #ff563c 18%, transparent);
  --tag-fg: #ffc4b8;
  --accent-ink: #ff9783;
  --on-accent: #1a1918;
  --scrim: color-mix(in srgb, #000 55%, transparent);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 2px 10px rgb(0 0 0 / 50%);
  --shadow-lg: 0 10px 34px rgb(0 0 0 / 60%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #1a1918;
    --color-surface: #242221;
    --color-text: #f0eeec;
    --color-accent: #ff563c;
    --color-divider: color-mix(in srgb, #f0eeec 30%, transparent);
    --color-rule: color-mix(in srgb, #f0eeec 14%, transparent);

    --tag-bg: color-mix(in srgb, #ff563c 18%, transparent);
    --tag-fg: #ffc4b8;
    --accent-ink: #ff9783;
    --on-accent: #1a1918;
    --scrim: color-mix(in srgb, #000 55%, transparent);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 2px 10px rgb(0 0 0 / 50%);
    --shadow-lg: 0 10px 34px rgb(0 0 0 / 60%);
  }
}