/**
==========================================================================
@fileOverview
Global CSS custom properties for QueryKey brand colors, section band tokens,
typography, spacing, elevation, and shared UI primitives.
@author
 * QueryKey Cases Web Team
@maintainer
 * Cases Engineering Lead
@usage
Load before page/component styles so all sections inherit canonical design
tokens from a single source of truth.
@dependencies
None. This file defines root-level tokens consumed by downstream CSS.
@notes
- Keep standard-band values aligned with querykey.com visual baselines.
- Last updated: 2026-03-21 22:10:00 UTC
@license
QueryKey™ is a trademark of Farrel Wilson. All rights reserved.
========================================================================== */

@import url('/assets/css/skins/premium-surfaces.css');

:root {
    /* Brand Colors */
    --orange-light: #f39c12;
    --orange-soft: #f7b980;
    --blue-dark: #1e3d72;
    --blue-light: #2c5aa0;
    --primary-navy: #0f1d38;

     /* Canonical customer-facing section band palette (dark mode)
         tuned to the querykey.com blue baseline for standard section parity. */
     --qk-standard-band-dark: #0f1d38;
     --qk-standard-band-mid: #162c50;
     --qk-standard-band-cta: #0f1d38;
    --qk-standard-band-divider: rgb(255 255 255 / 8%);
    --qk-standard-band-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    /* Canonical shell footer palette (all shell variants) */
    --qk-shell-footer-bg: rgb(25 25 81 / 97.1%);
    --qk-shell-footer-border: rgb(255 255 255 / 8%);
    --qk-shell-footer-heading: rgb(var(--qk-accent-orange-rgb) / 96%);
    --qk-shell-footer-link: rgb(235 241 255 / 85%);
    --qk-shell-footer-link-hover: rgb(255 221 176 / 98%);
    --qk-shell-footer-body: rgb(235 241 255 / 78%);
    --qk-shell-footer-divider: rgb(102 126 208 / 24%);

    /* Canonical customer-facing section band palette (light mode) */
    --qk-standard-light-canvas: #f3f5f9;
    --qk-standard-light-band: #dce6f4;
    --qk-standard-light-surface: #f8fbff;
    --qk-standard-light-border: #d7dee9;
    --qk-standard-light-divider: rgb(15 23 42 / 8%);

    /* Canonical premium surface tokens (global strict contract) */
    --qk-premium-bg-base: #0b1730;
    --qk-premium-bg-elev: #102347;
    --qk-premium-surface: rgb(19 37 76 / 90%);
    --qk-premium-surface-alt: rgb(14 31 64 / 94%);
    --qk-premium-surface-border: rgb(103 132 214 / 36%);
    --qk-premium-text: rgb(236 243 255 / 96%);
    --qk-premium-text-soft: rgb(188 205 235 / 92%);
    --qk-premium-title: #fff;
    --qk-premium-accent: #f78a1d;
    --qk-premium-accent-blue: #4d82ff;
    /* Canonical marketing accent pair used across shared customer surfaces */
    --qk-accent-orange: var(--qk-premium-accent);
    --qk-accent-blue: var(--qk-premium-accent-blue);
    --qk-accent-orange-rgb: 247 138 29;
    --qk-accent-blue-rgb: 77 130 255;
    --qk-premium-shadow: 0 18px 38px rgb(3 11 28 / 34%);
    
    /* Neutral Colors */
    --white: #fff;
    --light-gray: #f8f9fa;
    --medium-gray: #e1e5e9;
    --dark-gray: #343a40;

    /* Surface palette supporting analytics dashboard cards */
    --muted-text: #6b7a90;
    --surface-muted: #f6f8fc;
    --surface-raised: #fff;
    --surface-border: #e5e9f2;
    --surface-border-strong: #d8dee9;
    --black: #000;
    
    /* Status Colors */
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #17a2b8;
    
    /* Typography */

    /* Custom local font families (no system fallbacks per requirement) */
    --font-family-base: 'QueryKeySans';
    --font-family-brand: 'QueryKeySans';
    --font-family-mono: 'QueryKeyMono';
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Layout */
    --container-max-width: 1200px;
    --container-padding: 20px;
    
    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 10%);
    --shadow-lg: 0 8px 25px rgb(0 0 0 / 15%);
    --shadow-xl: 0 20px 25px rgb(0 0 0 / 10%);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /*
     * Label color for controls on amber/coral gradients (lobby cards, overlay signup).
     * Near-black with a cool bias reads reliably on #f2aa44–#ef7a4a / brand orange fills.
     */
    --qk-cta-on-warm-fill: #050816;
    --qk-cta-on-warm-fill-hover: #020617;
}

/* Footer theme tokens are mode-aware at the source so footer.css can stay declarative. */
:is(
    html[data-theme='light'],
    html[data-theme-mode='light'],
    html.light-mode,
    body[data-theme='light'],
    body[data-theme-mode='light'],
    body.light-mode
) {
    --qk-shell-footer-bg: rgb(246 249 255 / 97%);
    --qk-shell-footer-border: rgb(17 38 71 / 12%);
    --qk-shell-footer-heading: rgb(201 101 0 / 95%);
    --qk-shell-footer-link: rgb(29 57 96 / 86%);
    --qk-shell-footer-link-hover: rgb(227 121 22 / 96%);
    --qk-shell-footer-body: rgb(33 52 80 / 80%);
    --qk-shell-footer-divider: rgb(17 38 71 / 14%);
}

:is(
    html[data-theme='dark'],
    html[data-theme-mode='dark'],
    html.dark-mode,
    body[data-theme='dark'],
    body[data-theme-mode='dark'],
    body.dark-mode
) {
    --qk-shell-footer-bg: rgb(25 25 81 / 97.1%);
    --qk-shell-footer-border: rgb(255 255 255 / 8%);
    --qk-shell-footer-heading: rgb(var(--qk-accent-orange-rgb) / 96%);
    --qk-shell-footer-link: rgb(235 241 255 / 85%);
    --qk-shell-footer-link-hover: rgb(255 221 176 / 98%);
    --qk-shell-footer-body: rgb(235 241 255 / 78%);
    --qk-shell-footer-divider: rgb(102 126 208 / 24%);
}

/* Dark mode support (disabled for now) */

/*
@media (prefers-color-scheme: dark) {
    :root {
        --white: #1a1a1a;
        --light-gray: #2d2d2d;
        --medium-gray: #404040;
        --dark-gray: #e1e5e9;
        --black: #fff;
    }
}
*/