/* qpoints/assets/css/qp-tokens.css */
/* Design tokens shared by every Q-Points layout (child + admin).                */
/* Load order on redesigned pages: base.css -> qp-tokens.css -> qp-shell.css ->  */
/* the active layout stylesheet. Layout files re-skin the --qp-* surface tokens; */
/* they should not need to redefine the scale tokens below.                      */

:root {
    /* --- Type scale --- */
    --qp-font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --qp-font-display: var(--qp-font-ui);
    --qp-font-play: "Arial Rounded MT Bold", "Trebuchet MS", var(--qp-font-ui);
    --qp-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

    --qp-text-2xs: 0.6875rem;  /* 11px */
    --qp-text-xs: 0.75rem;     /* 12px */
    --qp-text-sm: 0.8125rem;   /* 13px */
    --qp-text-base: 0.9375rem; /* 15px */
    --qp-text-md: 1.0625rem;   /* 17px */
    --qp-text-lg: 1.25rem;     /* 20px */
    --qp-text-xl: 1.5rem;      /* 24px */
    --qp-text-2xl: 2rem;       /* 32px */
    --qp-text-3xl: 2.75rem;    /* 44px */

    --qp-leading-tight: 1.15;
    --qp-leading-snug: 1.35;
    --qp-leading-base: 1.55;

    /* --- Spacing scale (4px base) --- */
    --qp-1: 0.25rem;
    --qp-2: 0.5rem;
    --qp-3: 0.75rem;
    --qp-4: 1rem;
    --qp-5: 1.25rem;
    --qp-6: 1.5rem;
    --qp-8: 2rem;
    --qp-10: 2.5rem;
    --qp-12: 3rem;

    /* --- Radii --- */
    --qp-radius-xs: 6px;
    --qp-radius-sm: 10px;
    --qp-radius: 14px;
    --qp-radius-lg: 20px;
    --qp-radius-xl: 28px;
    --qp-radius-pill: 999px;

    /* --- Elevation --- */
    --qp-shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
    --qp-shadow-sm: 0 4px 12px rgba(16, 24, 40, .07);
    --qp-shadow: 0 10px 24px rgba(16, 24, 40, .09);
    --qp-shadow-lg: 0 20px 46px rgba(16, 24, 40, .14);
    --qp-ring: 0 0 0 3px var(--qp-accent-ring);

    /* --- Motion --- */
    --qp-ease: cubic-bezier(.2, .7, .3, 1);
    --qp-fast: .14s var(--qp-ease);
    --qp-slow: .28s var(--qp-ease);

    /* --- Shell metrics (layouts may override) --- */
    --qp-rail-w: 92px;
    --qp-rail-w-lg: 232px;
    --qp-aside-w: 300px;
    --qp-topbar-h: 64px;
    --qp-tabbar-h: 64px;
    --qp-page-max: 1440px;
    --qp-gutter: var(--qp-5);

    /* --- Stacking --- */
    --qp-z-base: 1;
    --qp-z-rail: 20;
    --qp-z-topbar: 40;
    --qp-z-tabbar: 45;
    --qp-z-dropdown: 60;
    --qp-z-overlay: 1050;
    --qp-z-toast: 1100;

    /* --- Neutral surface defaults (light). Layout files override these. --- */
    --qp-canvas: #eef2f7;
    --qp-canvas-2: #e4eaf1;
    --qp-surface: #ffffff;
    --qp-surface-2: #f6f8fb;
    --qp-surface-3: #eef1f6;
    --qp-surface-inset: rgba(15, 27, 51, .04);
    --qp-line: #dfe5ee;
    --qp-line-strong: #c6cfdd;

    --qp-ink: #19243b;
    --qp-ink-soft: #4b566b;
    --qp-ink-muted: #6c778e;
    --qp-ink-invert: #ffffff;

    --qp-accent: #5a4ce1;
    --qp-accent-ink: #ffffff;
    --qp-accent-soft: #eceafc;
    --qp-accent-strong: #4536c4;
    --qp-accent-ring: rgba(90, 76, 225, .28);

    --qp-gold: #ffc94c;
    --qp-gold-deep: #f5a623;
    --qp-gold-ink: #7a4d00;

    --qp-ok: #00874f;
    --qp-ok-soft: #e2f6ee;
    --qp-ok-ink: #0a5a3b;
    --qp-warn: #e5a300;
    --qp-warn-soft: #fff5da;
    --qp-warn-ink: #6d4c00;
    --qp-bad: #d43e53;
    --qp-bad-soft: #fdeaec;
    --qp-bad-ink: #8d1f30;
    --qp-info: #177bc2;
    --qp-info-soft: #e5f2fb;
    --qp-info-ink: #0f4f79;

    /* Text that sits ON a semantic fill. Dark layouts use bright pastel fills,
       so they flip these to a dark ink — white on #22d3a6 is only 1.9:1.
       --qp-on-brand is computed per bank in _qp_theme.php from theme_color. */
    --qp-on-ok: #ffffff;
    --qp-on-bad: #ffffff;
    --qp-on-warn: #241a00;
    --qp-on-info: #ffffff;
    --qp-on-brand: #ffffff;

    /* Panels used by the playful child worlds; neutral fallbacks here. */
    --qp-world-sky: #80d3f9;
    --qp-world-ground: #79c96d;
    --qp-panel-border: 2px solid var(--qp-surface);
    --qp-panel-radius: var(--qp-radius-lg);

    /* Focus */
    --qp-focus: #1b6ef3;
}

/* Layouts opt into a darker chrome by setting data-scheme="dark" on <body>.
   Kept as a token flip so components need no dark-specific rules. */
.qp[data-scheme="dark"] {
    --qp-surface-inset: rgba(255, 255, 255, .06);
    --qp-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --qp-shadow-sm: 0 4px 14px rgba(0, 0, 0, .32);
    --qp-shadow: 0 14px 30px rgba(0, 0, 0, .38);
    --qp-shadow-lg: 0 26px 60px rgba(0, 0, 0, .48);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --qp-fast: .001s linear;
        --qp-slow: .001s linear;
    }
}