/* ===========================================================================
   PlayWest — Design Tokens · CARBON (IBM dark theme, Gray 100)
   #161616 canvas, layered grays, single blue accent, IBM Plex, 0px radius.
   Source: IBM Carbon Design System (Gray 100 dark theme).
   =========================================================================== */
:root {
    /* --- Surfaces: Carbon Gray 100 dark layering --- */
    --pw-bg-000: #161616;   /* page — Gray 100 / --cds-background */
    --pw-bg-050: #1c1c1c;   /* subtle band (rg-bar, strip, footer, slip) */
    --pw-bg-100: #262626;   /* cards — Gray 90 / Layer 01 */
    --pw-bg-150: #393939;   /* raised + input fields — Gray 80 / Layer 02 */
    --pw-bg-300: #393939;   /* hairlines / border-subtle — Gray 80 */

    /* --- Ink: Carbon dark text scale --- */
    --pw-fg-000: #f4f4f4;   /* text primary — Gray 10 */
    --pw-fg-100: #e0e0e0;   /* body — Gray 20 */
    --pw-fg-300: #a8a8a8;   /* secondary — Gray 40 */
    --pw-fg-500: #6f6f6f;   /* placeholder / faint — Gray 60 */

    /* --- Accent: single IBM blue (dark-theme shifts lighter for contrast) --- */
    --pw-amber:    #78a9ff;   /* interactive text / links / focus — Blue 40 */
    --pw-amber-2:  #a6c8ff;   /* hover lighter — Blue 30 */
    --pw-amber-dk: #4589ff;   /* Blue 50 */
    --pw-sand:     #c6c6c6;   /* neutral secondary — Gray 30 */
    --pw-ink:      #161616;   /* dark text on light-accent fills */

    /* filled primary button (Carbon Blue 60) */
    --pw-btn-bg:       #0f62fe;   /* Blue 60 / --cds-button-primary */
    --pw-btn-bg-hover: #0353e9;   /* --cds-button-primary-hover */
    --pw-on-accent:    #ffffff;   /* white text on Blue 60 */

    --pw-up:       #42be65;   /* Green 40 — success */
    --pw-down:     #fa4d56;   /* Red 50 — error/danger */

    --pw-amber-soft: color-mix(in srgb, var(--pw-amber) 14%, var(--pw-bg-100));
    --pw-sand-soft:  color-mix(in srgb, var(--pw-sand) 10%, var(--pw-bg-100));
    --pw-line-warm:  color-mix(in srgb, var(--pw-amber) 40%, var(--pw-bg-300));

    /* --- Typography: IBM Plex family --- */
    --pw-font-display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --pw-font-body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --pw-font-mono:    "IBM Plex Mono", Menlo, Courier, monospace;

    --pw-fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --pw-fs-sm:   clamp(0.82rem, 0.80rem + 0.12vw, 0.88rem);
    --pw-fs-base: clamp(0.95rem, 0.92rem + 0.16vw, 1.02rem);
    --pw-fs-md:   clamp(1.14rem, 1.05rem + 0.40vw, 1.30rem);
    --pw-fs-lg:   clamp(1.50rem, 1.25rem + 0.95vw, 2.10rem);
    --pw-fs-xl:   clamp(2.10rem, 1.55rem + 2.30vw, 3.30rem);
    --pw-fs-2xl:  clamp(2.80rem, 1.90rem + 4.10vw, 4.75rem);

    --pw-lh-tight: 1.10;
    --pw-lh-snug:  1.25;
    --pw-lh-body:  1.55;

    --pw-sp-1: 0.25rem; --pw-sp-2: 0.5rem; --pw-sp-3: 0.75rem; --pw-sp-4: 1rem;
    --pw-sp-5: 1.5rem;  --pw-sp-6: 2rem;   --pw-sp-7: 3rem;    --pw-sp-8: 4.5rem; --pw-sp-9: 7rem;

    /* Carbon is fundamentally rectangular — 0px radius. Pill kept for tags only. */
    --pw-r-xs: 0; --pw-r-sm: 0; --pw-r-md: 0; --pw-r-lg: 0; --pw-r-xl: 0; --pw-r-pill: 9999px;

    /* Carbon is shadow-averse: depth via background-color layering. */
    --pw-sh-1: none;
    --pw-sh-2: 0 2px 6px rgba(0,0,0,.3);
    --pw-sh-3: 0 2px 6px rgba(0,0,0,.3);

    --pw-ease: cubic-bezier(.2,0,.38,.9);   /* Carbon productive easing */
    --pw-t-fast: 110ms; --pw-t-base: 240ms; --pw-t-slow: 400ms;

    --pw-slip-w: 380px;
    --pw-content-max: 1100px;
    --pw-reading-max: 760px;
    --pw-header-h: 48px;     /* Carbon masthead height */
    --pw-rg-h: 38px;
}
@media (prefers-reduced-motion: reduce) {
    :root { --pw-t-fast: 0ms; --pw-t-base: 0ms; --pw-t-slow: 0ms; }
}