/*
 * GENERATED FILE - DO NOT EDIT BY HAND.
 * Source: tokens.json. Regenerate with: python3 scripts/export-w3c-tokens.py
 * scripts/check-w3c-token-export.py fails CI when this file no longer matches tokens.json.
 *
 * A custom property is --of- plus the token's path in design-tokens.w3c.json, joined with
 * hyphens: color.role-bg is --of-color-role-bg, motion.duration.quick is --of-motion-duration-quick.
 *
 * Which block wins, and why the order matters. :root holds the light appearance. The dark one
 * replaces it under prefers-color-scheme: dark. [data-theme="light"] and [data-theme="dark"] come
 * after the media query with the same specificity, so a page (or a part of one) that sets the
 * attribute overrides the device preference in either direction. Every block that sets colours
 * sets all of them, aliases included: a custom property that reads another is resolved on the
 * element that declares it, so an element carrying data-theme needs its own alias lines.
 *
 * Under prefers-reduced-motion: reduce every motion.duration is 0ms, the cap included, so nothing
 * that reads these properties animates. The easings are left alone: with no time to run, they
 * do nothing.
 */

:root {
  color-scheme: light;
  --of-color-role-accent: #276b5b;
  --of-color-role-accent-fill: #3e8f7a;
  --of-color-role-bg: #f4f1ea;
  --of-color-role-button: #1b1d1c;
  --of-color-role-faint: #6e7573;
  --of-color-role-focus: #276b5b;
  --of-color-role-hatch: #b9b3a6;
  --of-color-role-ink: #1b1d1c;
  --of-color-role-ink-2: #474c4b;
  --of-color-role-ink-3: #5a605e;
  --of-color-role-line: #d9d4c9;
  --of-color-role-line-strong: #b9b3a6;
  --of-color-role-mesh: #f8f6f0;
  --of-color-role-on-accent: #ffffff;
  --of-color-role-on-button: #ffffff;
  --of-color-role-seen-tint: #e4eeea;
  --of-color-role-sunken: #ece8df;
  --of-color-role-surface: #fbfaf6;
  --of-color-role-value: #96501f;
  --of-color-role-void: #edeae1;
  --of-color-status-attention: #80611a;
  --of-color-status-failed: #a63d2a;
  --of-color-status-needs-you: #1b1d1c;
  --of-color-status-neutral: #474c4b;
  --of-color-status-ok: #276b5b;
  --of-color-status-unknown: #5a605e;
  --of-color-status-working: #80611a;
  --of-color-bg-border: var(--of-color-role-line);
  --of-color-bg-mesh: var(--of-color-role-mesh);
  --of-color-bg-root: var(--of-color-role-bg);
  --of-color-bg-surface: var(--of-color-role-surface);
  --of-color-bg-void: var(--of-color-role-void);
  --of-color-brand-primary: var(--of-color-role-accent);
  --of-color-hairline-strong: var(--of-color-role-line-strong);
  --of-color-text-faint: var(--of-color-role-faint);
  --of-color-text-micro: var(--of-color-role-ink-3);
  --of-color-text-primary: var(--of-color-role-ink);
  --of-color-text-secondary: var(--of-color-role-ink-2);
  --of-motion-duration-cap: 300ms;
  --of-motion-duration-local: 160ms;
  --of-motion-duration-none: 0ms;
  --of-motion-duration-quick: 120ms;
  --of-motion-duration-structural: 240ms;
  --of-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
  --of-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --of-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --of-color-role-accent: #6fb8a2;
    --of-color-role-accent-fill: #4fa38c;
    --of-color-role-bg: #15171a;
    --of-color-role-button: #eceae3;
    --of-color-role-faint: #858883;
    --of-color-role-focus: #6fb8a2;
    --of-color-role-hatch: #464b50;
    --of-color-role-ink: #eceae3;
    --of-color-role-ink-2: #b8b5ac;
    --of-color-role-ink-3: #9a978f;
    --of-color-role-line: #2e3236;
    --of-color-role-line-strong: #464b50;
    --of-color-role-mesh: #1a1d20;
    --of-color-role-on-accent: #0f1113;
    --of-color-role-on-button: #15171a;
    --of-color-role-seen-tint: #1b2624;
    --of-color-role-sunken: #0f1113;
    --of-color-role-surface: #1d2023;
    --of-color-role-value: #d48a55;
    --of-color-role-void: #101214;
    --of-color-status-attention: #d2a94a;
    --of-color-status-failed: #e07a5f;
    --of-color-status-needs-you: #eceae3;
    --of-color-status-neutral: #b8b5ac;
    --of-color-status-ok: #6fb8a2;
    --of-color-status-unknown: #9a978f;
    --of-color-status-working: #d2a94a;
    --of-color-bg-border: var(--of-color-role-line);
    --of-color-bg-mesh: var(--of-color-role-mesh);
    --of-color-bg-root: var(--of-color-role-bg);
    --of-color-bg-surface: var(--of-color-role-surface);
    --of-color-bg-void: var(--of-color-role-void);
    --of-color-brand-primary: var(--of-color-role-accent);
    --of-color-hairline-strong: var(--of-color-role-line-strong);
    --of-color-text-faint: var(--of-color-role-faint);
    --of-color-text-micro: var(--of-color-role-ink-3);
    --of-color-text-primary: var(--of-color-role-ink);
    --of-color-text-secondary: var(--of-color-role-ink-2);
  }
}

[data-theme="light"] {
  color-scheme: light;
  --of-color-role-accent: #276b5b;
  --of-color-role-accent-fill: #3e8f7a;
  --of-color-role-bg: #f4f1ea;
  --of-color-role-button: #1b1d1c;
  --of-color-role-faint: #6e7573;
  --of-color-role-focus: #276b5b;
  --of-color-role-hatch: #b9b3a6;
  --of-color-role-ink: #1b1d1c;
  --of-color-role-ink-2: #474c4b;
  --of-color-role-ink-3: #5a605e;
  --of-color-role-line: #d9d4c9;
  --of-color-role-line-strong: #b9b3a6;
  --of-color-role-mesh: #f8f6f0;
  --of-color-role-on-accent: #ffffff;
  --of-color-role-on-button: #ffffff;
  --of-color-role-seen-tint: #e4eeea;
  --of-color-role-sunken: #ece8df;
  --of-color-role-surface: #fbfaf6;
  --of-color-role-value: #96501f;
  --of-color-role-void: #edeae1;
  --of-color-status-attention: #80611a;
  --of-color-status-failed: #a63d2a;
  --of-color-status-needs-you: #1b1d1c;
  --of-color-status-neutral: #474c4b;
  --of-color-status-ok: #276b5b;
  --of-color-status-unknown: #5a605e;
  --of-color-status-working: #80611a;
  --of-color-bg-border: var(--of-color-role-line);
  --of-color-bg-mesh: var(--of-color-role-mesh);
  --of-color-bg-root: var(--of-color-role-bg);
  --of-color-bg-surface: var(--of-color-role-surface);
  --of-color-bg-void: var(--of-color-role-void);
  --of-color-brand-primary: var(--of-color-role-accent);
  --of-color-hairline-strong: var(--of-color-role-line-strong);
  --of-color-text-faint: var(--of-color-role-faint);
  --of-color-text-micro: var(--of-color-role-ink-3);
  --of-color-text-primary: var(--of-color-role-ink);
  --of-color-text-secondary: var(--of-color-role-ink-2);
}

[data-theme="dark"] {
  color-scheme: dark;
  --of-color-role-accent: #6fb8a2;
  --of-color-role-accent-fill: #4fa38c;
  --of-color-role-bg: #15171a;
  --of-color-role-button: #eceae3;
  --of-color-role-faint: #858883;
  --of-color-role-focus: #6fb8a2;
  --of-color-role-hatch: #464b50;
  --of-color-role-ink: #eceae3;
  --of-color-role-ink-2: #b8b5ac;
  --of-color-role-ink-3: #9a978f;
  --of-color-role-line: #2e3236;
  --of-color-role-line-strong: #464b50;
  --of-color-role-mesh: #1a1d20;
  --of-color-role-on-accent: #0f1113;
  --of-color-role-on-button: #15171a;
  --of-color-role-seen-tint: #1b2624;
  --of-color-role-sunken: #0f1113;
  --of-color-role-surface: #1d2023;
  --of-color-role-value: #d48a55;
  --of-color-role-void: #101214;
  --of-color-status-attention: #d2a94a;
  --of-color-status-failed: #e07a5f;
  --of-color-status-needs-you: #eceae3;
  --of-color-status-neutral: #b8b5ac;
  --of-color-status-ok: #6fb8a2;
  --of-color-status-unknown: #9a978f;
  --of-color-status-working: #d2a94a;
  --of-color-bg-border: var(--of-color-role-line);
  --of-color-bg-mesh: var(--of-color-role-mesh);
  --of-color-bg-root: var(--of-color-role-bg);
  --of-color-bg-surface: var(--of-color-role-surface);
  --of-color-bg-void: var(--of-color-role-void);
  --of-color-brand-primary: var(--of-color-role-accent);
  --of-color-hairline-strong: var(--of-color-role-line-strong);
  --of-color-text-faint: var(--of-color-role-faint);
  --of-color-text-micro: var(--of-color-role-ink-3);
  --of-color-text-primary: var(--of-color-role-ink);
  --of-color-text-secondary: var(--of-color-role-ink-2);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --of-motion-duration-cap: 0ms;
    --of-motion-duration-local: 0ms;
    --of-motion-duration-none: 0ms;
    --of-motion-duration-quick: 0ms;
    --of-motion-duration-structural: 0ms;
  }
}