/* HTTPTunnel — design tokens.
   Single source of truth. No selectors below :root / [data-bs-theme].
   Theme switching is keyed off Bootstrap 5.3's [data-bs-theme] attribute. */

:root,
[data-bs-theme="light"] {
    /* Surfaces */
    --surface-0: #fafaf9;          /* page background (warm paper) */
    --surface-1: #ffffff;          /* card */
    --surface-2: #f4f4f1;          /* recessed (settings panel, input fill) */
    --surface-3: #ebebe7;          /* row hover, tertiary */

    /* Ink */
    --ink-0: #0a0a0a;              /* primary text */
    --ink-1: #2a2a2a;              /* secondary text */
    --ink-2: #6b6b67;              /* muted text */
    --ink-3: #a3a39f;              /* placeholder, disabled */

    /* Hairlines */
    --line-soft: rgba(10, 10, 10, 0.06);
    --line: rgba(10, 10, 10, 0.10);
    --line-strong: rgba(10, 10, 10, 0.18);

    /* Accent — signal-orange, used sparingly */
    --accent: #ff5a1f;
    --accent-press: #e64a13;
    --accent-soft: rgba(255, 90, 31, 0.10);
    --accent-on: #ffffff;          /* foreground on accent surfaces */

    /* Semantic */
    --ok: #15803d;
    --ok-soft: rgba(21, 128, 61, 0.10);
    --warn: #b45309;
    --warn-soft: rgba(180, 83, 9, 0.10);
    --bad: #b91c1c;
    --bad-soft: rgba(185, 28, 28, 0.10);
    --info: #1d4ed8;
    --info-soft: rgba(29, 78, 216, 0.10);

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(10, 10, 10, 0.04);
    --shadow-2: 0 2px 8px rgba(10, 10, 10, 0.08);
    --shadow-3: 0 12px 32px rgba(10, 10, 10, 0.12);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(255, 90, 31, 0.30);
}

[data-bs-theme="dark"] {
    /* Surfaces */
    --surface-0: #0a0a0a;
    --surface-1: #141414;
    --surface-2: #1c1c1c;
    --surface-3: #262626;

    /* Ink */
    --ink-0: #fafaf9;
    --ink-1: #d4d4d2;
    --ink-2: #a3a39f;
    --ink-3: #6b6b67;

    /* Hairlines */
    --line-soft: rgba(250, 250, 249, 0.06);
    --line: rgba(250, 250, 249, 0.12);
    --line-strong: rgba(250, 250, 249, 0.22);

    /* Accent — same hue, darker glow */
    --accent: #ff6a33;
    --accent-press: #ff8451;
    --accent-soft: rgba(255, 106, 51, 0.14);
    --accent-on: #0a0a0a;

    /* Semantic — same hue, lifted lightness for dark contrast */
    --ok: #4ade80;
    --ok-soft: rgba(74, 222, 128, 0.14);
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.14);
    --bad: #f87171;
    --bad-soft: rgba(248, 113, 113, 0.14);
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.14);

    /* Elevation */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.7);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(255, 106, 51, 0.36);
}

:root {
    /* Type stacks */
    --font-sans: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
    --font-display: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* Type scale */
    --fs-xs: 0.75rem;       /* 12 */
    --fs-sm: 0.875rem;      /* 14 */
    --fs-base: 1rem;        /* 16 */
    --fs-md: 1.125rem;      /* 18 */
    --fs-lg: 1.375rem;      /* 22 */
    --fs-xl: 1.75rem;       /* 28 */
    --fs-2xl: 2.25rem;      /* 36 */
    --fs-3xl: 3rem;         /* 48 */
    --fs-4xl: 4rem;         /* 64 — display only */

    /* Spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* Radii — restrained */
    --radius-0: 2px;
    --radius-1: 4px;
    --radius-2: 6px;
    --radius-3: 10px;
    --radius-pill: 999px;

    /* Motion */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;

    /* Container widths */
    --content-narrow: 720px;
    --content: 1100px;
    --content-wide: 1320px;
    --content-pad: 1rem;
}

@media (min-width: 768px) {
    :root { --content-pad: 1.5rem; }
}
@media (min-width: 1200px) {
    :root { --content-pad: 2rem; }
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }
}