/* ═══════════════════════════════════════════════════════════════════
   GALAXY SMART SYSTEM — DESIGN TOKENS  v3.0  "Aurora Obsidian"
   Single source of truth for colour, type, motion and geometry.
   Load this FIRST on every page (public site, auth, dashboard, admin)
   so every layer — including mobile-native.css — resolves the same
   palette in both light and dark themes.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Brand spectrum — shared across themes */
    --p-cyan: #00D9FF;
    --p-blue: #3B82F6;
    --p-violet: #7C5CFF;
    --p-mint: #00FFC2;
    --p-rose: #FF5D8F;
    --p-amber: #FFB020;

    --p-grad: linear-gradient(135deg, #00D9FF 0%, #3B82F6 45%, #7C5CFF 100%);
    --p-grad-soft: linear-gradient(135deg, rgba(0, 217, 255, .16) 0%, rgba(124, 92, 255, .16) 100%);
    --p-grad-line: linear-gradient(90deg, transparent, var(--p-cyan), var(--p-violet), transparent);
    --p-grad-aurora: linear-gradient(120deg, #00FFC2 0%, #00D9FF 30%, #3B82F6 60%, #7C5CFF 100%);

    /* Light theme surfaces */
    --p-bg: #FAFBFE;
    --p-bg-alt: #F1F4FB;
    --p-panel: rgba(255, 255, 255, .78);
    --p-panel-solid: #FFFFFF;
    --p-panel-hover: rgba(255, 255, 255, .95);
    --p-line: rgba(10, 21, 51, .09);
    --p-line-soft: rgba(10, 21, 51, .055);
    --p-line-hot: rgba(0, 143, 200, .38);
    --p-text: #0A1533;
    --p-text-2: #46557A;
    --p-text-3: #626D87;
    --p-inverse: #FFFFFF;

    /* Interactive text (outline buttons, inline links, icon glyphs) needs a
       darker blue than the brand hue to clear 4.5:1 on a near-white surface.
       The dark theme restores the brighter value below. */
    --p-blue: #1D63D2;

    --p-shadow-sm: 0 2px 8px rgba(10, 21, 51, .05);
    --p-shadow: 0 10px 30px rgba(10, 21, 51, .07), 0 2px 8px rgba(10, 21, 51, .04);
    --p-shadow-lg: 0 28px 60px rgba(10, 21, 51, .12), 0 8px 20px rgba(10, 21, 51, .06);
    --p-glow: 0 0 0 1px rgba(0, 217, 255, .18), 0 18px 46px rgba(59, 130, 246, .16);

    /* ── Status palette ──────────────────────────────────────────
       Badges, chips and task rows sit on ~10%-opacity tints. Neon
       values only read against a dark surface, so the light theme
       gets darkened equivalents that clear 4.5:1 on those tints.
       Every status colour in the UI must come from here. */
    --st-info: #0A5C7C;      /* in progress / cyan  */
    --st-warn: #784E00;      /* upcoming / amber    */
    --st-ok: #07684A;        /* completed / mint    */
    --st-violet: #4C39B0;    /* scheduled / violet  */
    --st-danger: #B02744;    /* high priority       */
    --st-orange: #97440F;    /* medium priority     */
    --st-on-tint: #0A1533;   /* body text on a tinted status surface */

    --st-info-bg: rgba(11, 110, 147, .10);
    --st-warn-bg: rgba(138, 90, 0, .10);
    --st-ok-bg: rgba(7, 104, 74, .10);
    --st-violet-bg: rgba(76, 57, 176, .10);
    --st-info-line: rgba(11, 110, 147, .30);
    --st-warn-line: rgba(138, 90, 0, .30);
    --st-ok-line: rgba(7, 104, 74, .30);
    --st-violet-line: rgba(76, 57, 176, .30);

    /* Type */
    --p-font-display: 'Outfit', 'Space Grotesk', system-ui, sans-serif;
    --p-font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    /* Motion */
    --p-ease: cubic-bezier(.16, 1, .3, 1);
    --p-ease-io: cubic-bezier(.65, 0, .35, 1);
    --p-t-fast: .22s var(--p-ease);
    --p-t: .42s var(--p-ease);
    --p-t-slow: .8s var(--p-ease);

    /* Geometry */
    --p-r-xs: 8px;
    --p-r-sm: 12px;
    --p-r: 18px;
    --p-r-lg: 24px;
    --p-r-xl: 32px;
    --p-r-pill: 999px;

    /* Rhythm — fluid, so every viewport gets correct breathing room */
    --p-gutter: clamp(18px, 4vw, 40px);
    --p-section-y: clamp(64px, 9vw, 132px);
    --p-max: 1240px;
    --p-nav-h: 74px;
}

body.dark-theme {
    --p-bg: #05070F;
    --p-bg-alt: #080C1A;
    --p-panel: rgba(255, 255, 255, .035);
    --p-panel-solid: #0B1122;
    --p-panel-hover: rgba(255, 255, 255, .06);
    --p-line: rgba(255, 255, 255, .085);
    --p-line-soft: rgba(255, 255, 255, .05);
    --p-line-hot: rgba(0, 217, 255, .42);
    --p-text: #F2F6FF;
    --p-text-2: #A9B6D0;
    --p-text-3: #8A98B8;
    --p-inverse: #05070F;
    --p-blue: #3B82F6;

    --p-shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
    --p-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    --p-shadow-lg: 0 34px 80px rgba(0, 0, 0, .6);
    --p-glow: 0 0 0 1px rgba(0, 217, 255, .28), 0 22px 60px rgba(0, 217, 255, .14);

    /* Dark theme keeps the neon status values — they read correctly here. */
    --st-info: #35D0FF;
    --st-warn: #FFC53D;
    --st-ok: #2BFFD8;
    --st-violet: #B3A6FF;
    --st-danger: #FF7B8F;
    --st-orange: #FF9F5A;
    --st-on-tint: #F2F6FF;

    --st-info-bg: rgba(53, 208, 255, .12);
    --st-warn-bg: rgba(255, 197, 61, .12);
    --st-ok-bg: rgba(43, 255, 216, .12);
    --st-violet-bg: rgba(179, 166, 255, .12);
    --st-info-line: rgba(53, 208, 255, .34);
    --st-warn-line: rgba(255, 197, 61, .34);
    --st-ok-line: rgba(43, 255, 216, .34);
    --st-violet-line: rgba(179, 166, 255, .34);
}

/* Admin and dashboard shells are dark by design even without the
   .dark-theme class, so give them the dark surface set too. */
body.mob-admin-app,
body.admin-shell-body,
body.dashboard-body {
    color-scheme: dark;
}