/*
  Semantic tokens (visual direction › Semantic tokens): the only tokens components may use.
  Light and dark come from light-dark(), driven by color-scheme. The system setting decides unless
  [data-theme] on <html> overrides it.
*/
:root {
    color-scheme: light dark;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

:root {
    --surface-chrome: light-dark(var(--stone-100), var(--stone-950));
    --layer-content: light-dark(var(--white), var(--stone-900));
    --layer-raised: light-dark(var(--white), var(--stone-800));
    --layer-overlay: light-dark(var(--white), var(--stone-800));
    --fill-subtle: light-dark(var(--stone-900-a4), var(--stone-50-a6));
    --fill-subtle-pressed: light-dark(var(--stone-900-a8), var(--stone-50-a10));
    --scrim: light-dark(var(--black-a40), var(--black-a60));
    --shadow-overlay: 0 8px 24px light-dark(var(--stone-900-a12), transparent);

    --text-primary: light-dark(var(--stone-900), var(--stone-50));
    --text-secondary: light-dark(var(--stone-600), var(--stone-400));
    --text-placeholder: light-dark(var(--stone-500), var(--stone-400));
    --text-disabled: light-dark(var(--stone-400), var(--stone-600));
    --text-on-accent: light-dark(var(--white), var(--stone-950));
    --text-accent: light-dark(var(--accent-700), var(--accent-300));

    --stroke-divider: light-dark(var(--stone-200), var(--stone-800));
    --stroke-subtle: light-dark(var(--stone-200), var(--stone-700));
    --stroke-control: light-dark(var(--stone-450), var(--stone-500));
    --stroke-focus: light-dark(var(--accent-600), var(--accent-400));

    --accent-fill: light-dark(var(--accent-700), var(--accent-400));
    --accent-fill-hover: light-dark(var(--accent-800), var(--accent-300));
    --accent-fill-pressed: light-dark(var(--accent-900), var(--accent-500));
    --accent-subtle: light-dark(var(--accent-50), var(--accent-950));
    --accent-indicator: light-dark(var(--accent-600), var(--accent-400));
    /* The bar in the brand mark: the brand masters' bar, Accent600 on light grounds and Accent500 on dark. */
    --logo-accent: light-dark(var(--accent-600), var(--accent-500));

    --danger-text: light-dark(var(--red-700), var(--red-400));
    --danger-subtle: light-dark(var(--red-50), var(--red-950));
    --danger-fill: light-dark(var(--red-700), var(--red-400));
    --text-on-danger: light-dark(var(--white), var(--stone-950));
    --warning-text: light-dark(var(--amber-700), var(--amber-400));
    --warning-subtle: light-dark(var(--amber-50), var(--amber-950));
    --success-text: light-dark(var(--green-700), var(--green-400));
    --success-subtle: light-dark(var(--green-50), var(--green-950));
    --info-subtle: light-dark(var(--stone-100), var(--stone-800));
}