/* tokens.css — GENERATED by tools/gen-tokens.mjs. Do not edit by hand.
 *
 * Source of truth: docs/design/icons-site.dez/tokens.json (the dez design bundle;
 * the same values are in theme/tokens.ig and typography/type.ig). Every colour
 * below is a dez value, copied verbatim. Build step: run `node tools/build.mjs`,
 * which regenerates this file and fails if it has drifted from the dez.
 *
 * The canonical dez roles come first (--bg, --text, --accent, ...). Everything
 * after the "aliases" heading maps a role onto the names the ported views
 * already reference (--primary -> --accent, --background -> --bg, the
 * --space-* scale, translucent status backgrounds). Those aliases are derived,
 * not hand-picked, so a view can only reference a token this file defines.
 */

:root {
  /* ——— canonical dez roles ——— */
  --bg: #F4F1EA;
  --bg-2: #EDE9E1;
  --panel: #FFFFFF;
  --panel-2: #FAF8F3;
  --line: #DBD6CB;
  --line-2: #E6E2D9;
  --line-3: #EEEAE2;
  --text: #1A1A1D;
  --text-2: #3F3F44;
  --muted: #6B6B70;
  --muted-2: #7C7B80;
  --dim: #9A9893;
  --dim-2: #BAB7B0;
  --accent: #C2410C;
  --accent-hover: #A3360A;
  --accent-2: #1F6F8B;
  --warn: #B45309;
  --danger: #B42318;
  --ok: #1E7B4F;

  /* dez size roles */
  --gutter: 32px;
  --section-pad: 100px;

  /* dez type roles */
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono: 'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-body: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-heading: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ——— aliases: canonical role -> the names the views reference ——— */
  /* foreground / surfaces */
  --foreground: var(--text);
  --background: var(--bg);
  --primary: var(--accent);
  --primary-ink: #ffffff;
  --color-text: var(--text);
  --color-text-2: var(--text-2);
  --color-text-muted: var(--muted);
  --text-muted: var(--muted);
  --text-secondary: var(--text-2);
  --text-soft: var(--text-2);
  --text-dim: var(--dim);
  --surface: var(--panel);
  --surface-primary: var(--panel);
  --surface-secondary: var(--bg-2);
  --surface-alt: var(--panel-2);
  --surface-canvas: var(--bg);
  --color-bg: var(--bg);
  --color-panel: var(--panel);
  --bg-secondary: var(--bg-2);
  --bg-tertiary: var(--panel-2);
  --bg-elevated: var(--panel);
  --bg-deep: var(--bg);
  --bg-subtle: var(--bg-2);

  /* borders */
  --border: var(--line);
  --border-default: var(--line);
  --border-light: var(--line-2);
  --border-soft: var(--line-2);
  --color-border: var(--line);
  --color-line: var(--line);

  /* accent */
  --accent-primary: var(--accent);
  --accent-glow: var(--accent-hover);
  --accent-soft: rgba(194, 65, 12, 0.18);
  /* The studio's white check board (admin-studio): a surface, not a status, and
     the one light background the contrast gate needs on this site. */
  --surface-invert: #ffffff;
  --color-accent: var(--accent);
  --color-accent-glow: var(--accent-hover);
  --color-accent-soft: rgba(194, 65, 12, 0.08);
  --accent-contrast: #ffffff;
  --ink-on-accent: #ffffff;

  /* status */
  --warning: var(--warn);
  --error: var(--danger);
  --success: var(--ok);
  --color-danger: var(--danger);
  --text-danger: var(--danger);
  --danger-bg: rgba(180, 35, 24, 0.12);
  --color-danger-bg: rgba(180, 35, 24, 0.10);
  --color-success-bg: rgba(30, 123, 79, 0.12);
  --color-warning-bg: rgba(180, 83, 9, 0.10);
  --status-success: var(--ok);
  --signal-ink: var(--accent);
  --color-white: var(--text);
  --status-bad-bg: rgba(180, 35, 24, 0.12);
  --status-bad-border: var(--danger);
  --status-bad-fg: var(--danger);

  /* token inspector (admin theme-token-field) */
  --token-bg-deep: var(--bg);
  --token-bg-subtle: var(--bg-2);
  --token-text-primary: var(--text);
  --token-text-secondary: var(--text-2);
  --token-amber: var(--warn);
  --token-green: var(--ok);

  /* translucent surfaces */
  --hero-glass: rgba(244, 241, 234, 0.5);
  /* dez Resolver board (playground/resolve) — the golden writes these alpha
   * values inline, with no space after the commas and a leading-dot alpha.
   * They are emitted verbatim so a view's var(--token) resolves back to the
   * exact string the golden declares. Source: the golden's .tile/.nav-link/
   * .badge/.chip/.btn:hover/.code declarations. */
  --hairline: rgba(26, 26, 29, .07);

  /* dez Not-found board: the golden stylesheet's .btn-primary:hover
   * background is a hand-authored press colour with no matching dez
   * role, so it is emitted verbatim for the same reason as --hairline. */
  --accent-press: #A3360A;
  --wash: rgba(26, 26, 29, .06);
  --tile-bg: #FAF8F3;

  /* dez board inline literals. The boards' markup (the dez assets that
   * tools/golden.mjs resolves) writes these colours inline, with no role in
   * tokens.json. They are named by value so a ported view can reference the
   * exact byte the board declares (tools/dez-port.mjs rewrites every inline
   * hex to the matching var(); gate 8 forbids the literal in compiled output). */
  --dez-000: #1A1A1D;
  --dez-0d0f11: #FAF8F3;
  --dez-0e1113: #FFFFFF;
  --dez-101315: #FAF8F3;
  --dez-2a3038: #DBD6CB;
  --dez-666d77: #9A9893;
  --dez-6c737c: #6B6B70;
  --dez-9ae6ff: #1F6F8B;
  --dez-b8bec7: #3F3F44;
  --dez-c08cff: #6D4ACF;
  --dez-dce1e7: #3F3F44;
  --dez-e8eaed: #1A1A1D;
  --dez-ff6b9d: #B8325E;
  --dez-ff8a3d: #B45309;
  --dez-ffb870: #B45309;
  --dez-ffd166: #9A6B00;
  --accent-ring: rgba(194, 65, 12, .3);
  --accent-wash: rgba(194, 65, 12, .07);
  --warn-ring: rgba(180, 83, 9, .4);
  --danger-ring: rgba(180, 35, 24, .4);
  --danger-ring-soft: rgba(180, 35, 24, .35);
  --ok-ring: rgba(30, 123, 79, .4);
  --ok-ring-strong: rgba(30, 123, 79, .6);
  --accent-2-ring: rgba(31, 111, 139, .35);
  /* dez board inline translucent literals (the boards' markup, see the
   * --dez-* hex block above): named by role where the sheet names one, by
   * alpha otherwise. tools/dez-port.mjs maps every inline rgba() to these. */
  --nav-glass: rgba(244, 241, 234, .78);
  --accent-wash-04: rgba(194, 65, 12, .04);
  --accent-wash-05: rgba(194, 65, 12, .05);
  --accent-wash-06: rgba(194, 65, 12, .06);
  --accent-wash-13: rgba(194, 65, 12, .13);
  --accent-wash-15: rgba(194, 65, 12, .15);
  --accent-ring-20: rgba(194, 65, 12, .2);
  --accent-ring-25: rgba(194, 65, 12, .25);
  --accent-ring-26: rgba(194, 65, 12, .26);
  --ok-ring-50: rgba(30, 123, 79, .5);
  --warn-ring-45: rgba(180, 83, 9, .45);
  --danger-ring-45: rgba(180, 35, 24, .45);
  --grid-line: rgba(26, 26, 29, .05);
  --scrim: rgba(26, 26, 29, .6);
  --color-surface-hover: rgba(26, 26, 29, 0.03);
  --color-muted-bg: rgba(107, 107, 112, 0.10);
  --color-badge-bg: rgba(26, 26, 29, 0.08);

  /* misc aliases */
  --link: var(--accent-2);
  --teal: var(--accent-2);
  --amber: var(--warn);
  --fg: var(--text);
  --dark: var(--bg);
  --icon-path-stroke: var(--dim-2);
  --crop-border: var(--danger);

  /* ——— spacing scale (derived from the dez gutter) ——— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ——— type scale ——— */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-hero-title: 64px;
  --font-size-title: 32px;
  --font-size-h3: 24px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-label: 11px;

  /* ——— radii ——— */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ——— shadows ——— */
  --shadow-glow: 0 0 40px rgba(194, 65, 12, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);

  /* ——— motion (dez animation/motion.ig: duration.fast) ——— */
  --transition-fast: 120ms;
  --transition-base: 200ms;
}

/* ——— dez per-node kind contract ———
 *
 * Ported verbatim from the dez boards' own scoped style block (every board in
 * docs/design/icons-site.dez/layouts/*.ui.ig carries the same three or four
 * rules). The dez marks each node with data-kind — container | link | heading
 * | paragraph | button — and resets the browser's default rendering for each.
 * A view element tagged with a data-kind therefore never falls back to the
 * UA stylesheet (default blue underline on links, 2em bold block h2 with
 * margins, system-boxed buttons). Colour is inherited, never a literal, so
 * the board's palette still comes from the tokens above.
 */
[data-kind="button"] { color: inherit; font-weight: normal; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
[data-kind="heading"] { color: inherit; font-weight: bold; margin: 0; }
[data-kind="link"] { color: inherit; font-weight: normal; text-decoration: none; }
[data-kind="paragraph"] { color: inherit; font-weight: normal; margin: 0; }

@theme("icon-design-language", "ignitions-theme-editor")
@theme("ink", "consent-loom")