/* ==================================================================
   DQR DESIGN TOKENS — loaded BEFORE style.css. Variables only; paints nothing.
   Brand colour comes from the admin theme colour (--theme-color-1 and its
   alpha steps --theme-color-0_01 … --theme-color-0_99 are emitted inline by
   the {COLORS} loop in overall_header.tpl). Never hardcode the brand hex here.
   Dark mode: the [data-theme="dark"] block is prepared but not activated.
   ================================================================== */
:root {
    color-scheme: light;

    /* Brand (admin-driven) */
    --dqr-brand: var(--theme-color-1, #ff6b35);
    --dqr-brand-hover: color-mix(in srgb, var(--dqr-brand) 88%, #000);
    --dqr-brand-soft: var(--theme-color-0_1, rgba(255, 107, 53, .1));
    --dqr-brand-softer: var(--theme-color-0_06, rgba(255, 107, 53, .06));
    --dqr-brand-ring: var(--theme-color-0_25, rgba(255, 107, 53, .25));
    --dqr-brand-2: #f7931e;
    --dqr-brand-gradient: linear-gradient(135deg, var(--dqr-brand) 0%, var(--dqr-brand-2) 100%);
    --dqr-on-brand: #ffffff;
    /* darker brand steps: solid buttons / text on light surfaces (AA with white text) */
    --dqr-brand-600: color-mix(in srgb, var(--dqr-brand) 78%, #000);
    --dqr-brand-700: color-mix(in srgb, var(--dqr-brand) 64%, #000);
    /* brand text that always sits on a WHITE/light surface (never flips in dark) */
    --dqr-brand-ink: color-mix(in srgb, var(--dqr-brand) 64%, #000);

    /* Neutrals (ink + surfaces) */
    --dqr-n-0: #ffffff;
    --dqr-n-50: #f8fafc;
    --dqr-n-100: #f1f4f8;
    --dqr-n-150: #e9edf3;
    --dqr-n-200: #e2e7ee;
    --dqr-n-300: #cbd3de;
    --dqr-n-400: #98a4b5;
    --dqr-n-500: #6b7787;
    --dqr-n-600: #4b5565;
    --dqr-n-700: #344054;
    --dqr-n-800: #1f2937;
    --dqr-n-900: #101828;

    --dqr-bg: var(--dqr-n-100);
    --dqr-surface: var(--dqr-n-0);
    --dqr-surface-2: var(--dqr-n-50);
    --dqr-line: var(--dqr-n-200);
    --dqr-line-strong: var(--dqr-n-300);
    --dqr-ink: var(--dqr-n-900);
    --dqr-ink-2: var(--dqr-n-700);
    --dqr-muted: #626d7d;               /* AA (4.75:1) on the tinted page bg, 5.2:1 on white */
    --dqr-faint: #5b6472;               /* small uppercase labels: AA on tinted surfaces too */

    /* Semantic */
    --dqr-success: #166534;             /* AA on --dqr-success-bg */
    --dqr-success-bg: #dcfce7;
    --dqr-success-ink: #14532d;
    --dqr-warning: #b45309;
    --dqr-warning-bg: #fef3c7;
    --dqr-warning-ink: #78350f;
    --dqr-danger: #dc2626;
    --dqr-danger-bg: #fee2e2;
    --dqr-danger-ink: #7f1d1d;
    --dqr-info: #1d4ed8;
    --dqr-info-bg: #dbeafe;
    --dqr-info-ink: #1e3a8a;
    --dqr-neutral-bg: var(--dqr-n-150);
    --dqr-neutral-ink: var(--dqr-n-700);

    /* Typography */
    --dqr-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --dqr-fs-xs: 12px;
    --dqr-fs-sm: 13px;
    --dqr-fs-md: 14px;
    --dqr-fs-lg: 16px;
    --dqr-fs-xl: 20px;
    --dqr-fs-2xl: 24px;
    --dqr-fs-3xl: 30px;
    --dqr-lh: 1.5;

    /* Shape */
    --dqr-r-sm: 8px;
    --dqr-r-md: 12px;
    --dqr-r-lg: 16px;
    --dqr-r-xl: 20px;
    --dqr-r-pill: 999px;

    /* Elevation */
    --dqr-sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --dqr-sh-2: 0 4px 12px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .05);
    --dqr-sh-3: 0 16px 40px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);

    /* Spacing (4px base) */
    --dqr-s-1: 4px;
    --dqr-s-2: 8px;
    --dqr-s-3: 12px;
    --dqr-s-4: 16px;
    --dqr-s-5: 20px;
    --dqr-s-6: 24px;
    --dqr-s-8: 32px;
    --dqr-s-10: 40px;

    /* Layout */
    --dqr-header-h: 64px;
    --dqr-sidebar-w: 272px;
    --dqr-bottom-nav-h: 68px;
    --dqr-safe-bottom: env(safe-area-inset-bottom, 0px);
    --dqr-content-max: 1240px;

    /* Z-index scale */
    --dqr-z-header: 1000;
    --dqr-z-bottom-nav: 1100;
    --dqr-z-widget: 1150;
    --dqr-z-overlay: 1200;
    --dqr-z-drawer: 1210;
    --dqr-z-modal: 1300;
    --dqr-z-toast: 1400;

    /* Motion */
    --dqr-ease: cubic-bezier(.2, .8, .2, 1);
    --dqr-dur: .2s;
}

/* Dark theme — prepared, activated later via <html data-theme="dark"> */
[data-theme="dark"] {
    color-scheme: dark;
    --dqr-n-0: #181818;
    --dqr-n-50: #1c1c1c;
    --dqr-n-100: #111111;
    --dqr-n-150: #232323;
    --dqr-n-200: #2c2c2c;
    --dqr-n-300: #3a3a3a;
    --dqr-n-400: #6f6f6f;
    --dqr-n-500: #9a9a9a;
    --dqr-n-600: #b8b8b8;
    --dqr-n-700: #d4d4d4;
    --dqr-n-800: #e8e8e8;
    --dqr-n-900: #f5f5f5;
    --dqr-success-bg: rgba(21, 128, 61, .2);
    --dqr-success-ink: #86efac;
    --dqr-warning-bg: rgba(180, 83, 9, .2);
    --dqr-warning-ink: #fcd34d;
    --dqr-danger-bg: rgba(220, 38, 38, .2);
    --dqr-danger-ink: #fca5a5;
    --dqr-info-bg: rgba(29, 78, 216, .22);
    --dqr-info-ink: #93c5fd;
    --dqr-sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --dqr-sh-2: 0 4px 14px rgba(0, 0, 0, .5);
    --dqr-sh-3: 0 18px 44px rgba(0, 0, 0, .65);
    --dqr-muted: #9a9a9a;             /* dark: muted must be light again (light-mode value fails here) */
    --dqr-faint: #9a9a9a;
    --dqr-success: #4ade80;             /* dark: success text must be light, not the light-mode green */
    /* brand text on DARK surfaces must be lighter than the brand, not darker */
    --dqr-brand-700: color-mix(in srgb, var(--dqr-brand) 72%, #fff);
    --dqr-brand-soft: color-mix(in srgb, var(--dqr-brand) 18%, transparent);
    --dqr-brand-softer: color-mix(in srgb, var(--dqr-brand) 10%, transparent);
    --dqr-brand-ring: color-mix(in srgb, var(--dqr-brand) 35%, transparent);
    --dqr-brand-600: color-mix(in srgb, var(--dqr-brand) 88%, #000);
    --dqr-neutral-bg: var(--dqr-n-150);
    --dqr-neutral-ink: var(--dqr-n-700);
}

@media (prefers-reduced-motion: reduce) {
    :root { --dqr-dur: 0s; }
}