/* ═══════════════════════════════════════════════════════════════════════════
   DSDS Design Tokens

   Centralized CSS custom properties for all visual attributes.
   Every web component and stylesheet references these tokens directly
   (no legacy-name aliasing layer — style.css uses the --ds-* names too).

   Tokens are organized by category and use a constrained scale
   to enforce visual consistency across the system.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "DM Sans";
    src: url("fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype-variations");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DM Mono";
    src: url("fonts/Lilex[wght].ttf") format("truetype");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    --ds-color-accent-seed: #f5a445;

    /* ── Color: Background ──────────────────────────────────────────────── */
    --ds-color-bg: #d5cbc2;

    /* Progressive enhancement: browsers without relative-color-syntax
       support keep the static fallback above; browsers that support it
       override with a value derived from the accent seed. */
    /* stylelint-disable-next-line declaration-block-no-duplicate-custom-properties */
    --ds-color-bg: oklch(from var(--ds-color-accent-seed) calc(l + 0.135) calc(c - 0.13) h);
    --ds-color-bg-inverse: #fff;
    --ds-color-bg-raised: var(--ds-color-bg-inverse);
    --ds-color-bg-accent: var(--ds-color-accent-seed);
    --ds-color-bg-subtle: var(--ds-color-bg-raised);
    --ds-color-bg-muted: var(--ds-color-bg-raised);
    --ds-color-bg-dark: #1b1f24;

    /* ── Color: Text ────────────────────────────────────────────────────── */
    --ds-color-text: #1a1a1a;
    --ds-color-text-inverse: #fff;

    /* ── Color: Accent / Link ───────────────────────────────────────────── */

    /* Derived from the accent seed (same one --ds-color-bg above uses), not
       a disconnected, hand-picked blue — same progressive-enhancement
       pattern: static fallback for browsers without relative-color-syntax
       support, then an oklch(from ...) override for browsers that have it.
       Hover/interaction states aren't separate tokens — see the
       color-mix(in oklch, ...) calls at each :hover call site instead. */
    --ds-color-accent: #642500;
    /* stylelint-disable-next-line declaration-block-no-duplicate-custom-properties */
    --ds-color-accent: oklch(from var(--ds-color-accent-seed) calc(l - 0.43) calc(c - 0.043) calc(h - 21.92));
    --ds-color-accent-subtle: #e8f0fe;

    /* ── Color: Border ──────────────────────────────────────────────────── */
    --ds-color-border: #d4d4d8;
    --ds-color-border-light: #e8e8eb;

    /* ── Color: Semantic — Status badges ────────────────────────────────── */

    /* success-text backs the callout "tip" variant via the encouraged-text
       alias below, not a badge variant directly — ds-badge's "kind" variant
       uses --ds-color-text (see badge.js), not a semantic color. */
    --ds-color-success-text: #1b5e20;
    --ds-color-warning-text: #8c5800;

    /* ── Color: Semantic — Note/Callout ─────────────────────────────────── */

    /* Same hue as success — reused for the callout "tip" variant. */
    --ds-color-encouraged-text: var(--ds-color-success-text);

    /* ── Color: Syntax highlighting ─────────────────────────────────────── */
    --ds-syntax-light-key: #0558B2;
    --ds-syntax-light-string: #BE2709;
    --ds-syntax-light-number: #267860;
    --ds-syntax-light-bool: #4231DD;

    /* ── Font Family ────────────────────────────────────────────────────── */
    --ds-font-body:
        "DM Sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue",
        arial, sans-serif;
    --ds-font-mono:
       "DM Mono", "SFMono-Regular", consolas, "Liberation Mono", menlo, courier, monospace;

    /* ── Font Size ──────────────────────────────────────────────────────── */
    --ds-font-size-xs: 0.67rem;
    --ds-font-size-sm: 0.75rem; /* 12px — small text, labels, badges; h6 */
    --ds-font-size-base: 0.875rem; /* 14px — body; h5 */
    --ds-font-size-md: 1rem; /* 16px — h4 */
    --ds-font-size-lg: 1.125rem; /* 18px — h3 */
    --ds-font-size-xl: 1.375rem; /* 22px — h2 */
    --ds-font-size-2xl: 1.75rem; /* 28px — h1 */

    /* ── Font Weight ────────────────────────────────────────────────────── */
    --ds-font-weight-regular: 460;
    --ds-font-weight-bold: 600;

    /* ── Line Height ────────────────────────────────────────────────────── */
    --ds-line-height-snug: 1.3;
    --ds-line-height-normal: 1.4;
    --ds-line-height-relaxed: 1.5;
    --ds-line-height-loose: 1.6;

    /* ── Spacing — 4px base scale ───────────────────────────────────────── */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-4: 16px;
    --ds-space-8: 32px;
    --ds-space-16: 64px;

    /* ── Border Width ───────────────────────────────────────────────────── */
    --ds-border-width: 1px;

    /* ── Layout Widths ──────────────────────────────────────────────────── */
    --ds-width-content: 820px;

    /* ── Layout Heights ─────────────────────────────────────────────────── */
    --ds-height-nav: 64px;

    /* ── Z-Index ────────────────────────────────────────────────────────── */
    --ds-z-base: 1;
    --ds-z-nav: 100;
    --ds-z-overlay: 200;
    --ds-z-skip-link: 300;

    /* ── Letter Spacing ─────────────────────────────────────────────────── */
    --ds-tracking-wide: 0.04em;

    /* ── Motion ─────────────────────────────────────────────────────────── */

    /* Small on purpose — one pair of durations and one easing curve, used
       only for the handful of obvious hover/toggle states that benefit
       from it (links, nav items, icon buttons). Not a general-purpose
       animation system. */
    --ds-duration-fast: 200ms;
    --ds-duration-base: 300ms;
    --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsing the duration tokens to 0 here — rather than adding
   `@media (prefers-reduced-motion: reduce)` overrides at every call site —
   is enough on its own: every transition/animation in this file and every
   component's shadow DOM sets its duration from one of these two tokens
   (custom properties inherit through shadow boundaries), so this one block
   silences all of them at once. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ds-duration-fast: 0s;
        --ds-duration-base: 0s;
    }
}