/* ============================================================
   Tools  (ACTIVE)
   THE ACTIVE BRANDING. Apps link this file and never name a theme directly.
   Switch by editing tokens/active.json and rebuilding.

   GENERATED by build.ts from tokens/master.json + tokens/themes/tools.json
   Do not edit. Change the JSON and re-run `npm run build`.
   ============================================================ */

:root {
    /* ── Colour: core (brand sheet) ── */
    --sbc-primary: #EC008C;
    --sbc-neutral: #414042;

    /* ── Colour: extended ── */
    --sbc-accent: #00BCD4;
    --sbc-accent-warm: #CC9987;
    /* deprecated — use --sbc-surface-wood; expires 2026-10-22 */
    --sbc-surface-warm: #4A291E;
    /* deprecated — use --sbc-grain-wood; expires 2026-10-22 */
    --sbc-grain-warm: #916F63;
    --sbc-surface-wood: #272C2E;
    --sbc-grain-wood: #3B3C3E;
    --sbc-ink: #0D0D0D;
    --sbc-charcoal: #2A2A2A;
    --sbc-background: #121212;
    --sbc-surface: #1E1E1E;
    --sbc-text-primary: #E0E0E0;
    --sbc-text-secondary: #BDBDBD;
    --sbc-text-tertiary: rgba(255,255,255,0.6);
    --sbc-hairline: rgba(255,255,255,0.12);
    --sbc-hairline-strong: rgba(255,255,255,0.4);
    --sbc-on-accent: #06232A;

    /* ── Colour: semantic ── */
    --sbc-success: #66BB6A;
    --sbc-error: #EF5350;
    --sbc-warning: #FFB74D;
    --sbc-info: #4FC3F7;

    /* ── Typography ── */
    --sbc-font-brand: 'ITC Lubalin Graph Std', Rockwell, 'Roboto Slab', serif;
    --sbc-font-interface: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sbc-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* ── Type scale (brand-owned) ── */
    --sbc-font-size-xs: 0.75rem;
    --sbc-font-size-sm: 0.875rem;
    --sbc-font-size-md: 1rem;
    --sbc-font-size-lg: 1.125rem;
    --sbc-font-size-xl: 1.25rem;
    --sbc-font-size-2xl: 1.5rem;
    --sbc-font-size-3xl: 2rem;
    --sbc-font-size-4xl: 2.5rem;
    --sbc-font-size-5xl: 3rem;
    --sbc-font-weight-regular: 400;
    --sbc-font-weight-medium: 500;
    --sbc-font-weight-semibold: 600;
    --sbc-font-weight-bold: 700;
    --sbc-line-height-none: 1;
    --sbc-line-height-tight: 1.2;
    --sbc-line-height-normal: 1.5;
    --sbc-letter-spacing-tight: -0.02em;
    --sbc-letter-spacing-wide: 0.04em;
    --sbc-letter-spacing-caps: 0.12em;

    /* ── Spacing (brand-owned; space-N = N x 4px) ── */
    --sbc-space-1: 4px;
    --sbc-space-2: 8px;
    --sbc-space-3: 12px;
    --sbc-space-4: 16px;
    --sbc-space-5: 20px;
    --sbc-space-6: 24px;
    --sbc-space-8: 32px;
    --sbc-space-14: 56px;
    --sbc-space-16: 64px;

    /* ── Radius ── */
    --sbc-radius-sm: 4px;
    --sbc-radius-md: 8px;
    --sbc-radius-lg: 12px;
    --sbc-radius-pill: 999px;

    /* ── Border ── */
    --sbc-border-width-thin: 1px;
    --sbc-border-width-thick: 2px;

    /* ── Focus ring ──
       outline: var(--sbc-focus-ring); outline-offset: var(--sbc-focus-ring-offset); */
    --sbc-focus-ring-width: 2px;
    --sbc-focus-ring-offset: 4px;
    --sbc-focus-ring-color: #00BCD4;
    --sbc-focus-ring: var(--sbc-focus-ring-width) solid var(--sbc-focus-ring-color);

    /* ── Light ──
       One light, brand-wide. An asset's specular and a theme's elevation shadow
       must agree; see brand/light.md. */
    --sbc-light-angle: 135deg;
    --sbc-light-extent: 1.25;
    --sbc-light-highlight: rgba(255,255,255,0.62);
    --sbc-light-shadow: rgba(0,0,0,0.7);

    /* ── Elevation ──
       One role name per level, two properties each. Write both and never
       branch on the theme — background from the -surface property, box-shadow
       from the -shadow one. Offsets and blur are cast by the light above;
       see brand/elevation.md. */
    --sbc-elevation-raised-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    --sbc-elevation-raised-surface: color-mix(in srgb, #FFFFFF 4%, var(--sbc-surface));
    --sbc-elevation-lifted-shadow: 6px 6px 20px rgba(0,0,0,0.25);
    --sbc-elevation-lifted-surface: color-mix(in srgb, #FFFFFF 6%, var(--sbc-surface));
    --sbc-elevation-overlay-shadow: 8px 8px 30px rgba(0,0,0,0.35);
    --sbc-elevation-overlay-surface: color-mix(in srgb, #FFFFFF 9%, var(--sbc-surface));
    --sbc-elevation-modal-shadow: 11px 11px 40px rgba(0,0,0,0.45);
    --sbc-elevation-modal-surface: color-mix(in srgb, #FFFFFF 12%, var(--sbc-surface));

    /* ── Motion ── */
    --sbc-duration-micro: 150ms;
    --sbc-duration-fast: 250ms;
    --sbc-duration-default: 400ms;
    --sbc-duration-deliberate: 600ms;
    --sbc-duration-signature: 2000ms;
    --sbc-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --sbc-ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1);
    --sbc-ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
    --sbc-particle-max: 100;
    --sbc-particle-tint: #EC008C;

    /* ── Contrast-safe pairings ──
       Primary fails WCAG AA for normal-size text on every brand surface.
       Use these wherever primary would otherwise carry body copy.
       See brand/color.md. */
    --sbc-on-dark-strong: #FFFFFF;
    --sbc-accent-text-on-dark: var(--sbc-accent);

    /* ── Deprecated aliases ──
       For SBC.Www, which shipped colour-named vars before this repo existed.
       Migrate to the role-named tokens above. */
    --sbc-magenta: var(--sbc-primary);
    --sbc-cyan: var(--sbc-accent);
    --sbc-graphite: var(--sbc-neutral);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sbc-duration-micro: 0ms;
        --sbc-duration-fast: 0ms;
        --sbc-duration-default: 0ms;
        --sbc-duration-deliberate: 0ms;
        --sbc-duration-signature: 0ms;
        --sbc-particle-max: 0;
    }
}