/*
 * Design tokens, the single source of colour, type and spacing.
 *
 * Every component reads these names now, so the legacy block that carried the
 * old names through the migration is gone.
 *
 * Dark follows the reader's system setting. There is no theme switch in the
 * product, so the data-theme hooks below exist only so one can be added later
 * without touching this file: data-theme="light" holds a page in light on a
 * dark system, data-theme="dark" forces dark on a light one.
 */

:root {
  color-scheme: light;

  --surface-1: #f3f2f2;
  --surface-2: #eae9e9;
  --surface-3: #d7d3d3;
  --border: #c9c5c5;
  --border-strong: #201e1d;
  --text: #201e1d;
  --text-2: #605d5d;
  --text-3: #7d7979;
  --accent: #ec3013;
  --accent-ink: #ae1800;
  --accent-tint: #ffe0d9;
  /* The design gives a pressed fill for light only, and nothing reads it yet.
     A dark counterpart gets chosen when a pressed state is actually built,
     rather than invented here. */
  --accent-pressed: #dd2b0f;
  --warning: #8a5a0c;
  --warning-tint: #f4ead6;
  --success: #2f6b52;
  --success-tint: #e2ece7;

  /* One family in two roles, separated by weight and tracking. */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-text: "Archivo", system-ui, sans-serif;
  --t-display: 34px;
  --t-h1: 26px;
  --t-h2: 20px;
  --t-h3: 17px;
  --t-body: 15px;
  --t-small: 13px;
  --t-micro: 12px;
  --t-label: 11px;

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

  /* Zero everywhere. Avatars are the single exception and set 50% themselves. */
  --r-0: 0px;

  /* Rules carry hierarchy. No shadows are used anywhere. */
  --rule-strong: 2px;
  --rule-hair: 1px;
}

/*
 * The dark values are declared twice on purpose: once for the system setting,
 * once for an explicit choice, so a future switch wins in both directions.
 * Only the colours change. Type, spacing and radius are one set.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #181716;
    --surface-2: #211f1e;
    --surface-3: #2f2c2b;
    --border: #3d3a39;
    --border-strong: #f3f2f2;
    --text: #f3f2f2;
    --text-2: #bab6b6;
    --text-3: #9b9797;
    --accent: #ff563c;
    --accent-ink: #ff9783;
    --accent-tint: #3a1a13;
    --warning: #d6a24a;
    --warning-tint: #2c2317;
    --success: #7fb79c;
    --success-tint: #16241e;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #181716;
  --surface-2: #211f1e;
  --surface-3: #2f2c2b;
  --border: #3d3a39;
  --border-strong: #f3f2f2;
  --text: #f3f2f2;
  --text-2: #bab6b6;
  --text-3: #9b9797;
  --accent: #ff563c;
  --accent-ink: #ff9783;
  --accent-tint: #3a1a13;
  --warning: #d6a24a;
  --warning-tint: #2c2317;
  --success: #7fb79c;
  --success-tint: #16241e;
}