/* =========================================================================
   01-tokens.css — Modern Executive Design Tokens (OM SRS 001)
   Ultra-refined color scales, high-fidelity elevation, precision typography,
   radiant glows, and fluid micro-transitions for Light and Dark modes.
   Loaded first — every other stylesheet reads these custom properties.
   Originate Command · application
   ========================================================================= */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  
  /* Core Neutrals & Backgrounds (Day Mode: Crisp, luminous, modern slate) */
  --ink: #0F172A;            /* Slate-900: Deep rich high-contrast text */
  --paper: #F8FAFC;          /* Luminous soft background */
  --surface: #FFFFFF;        /* Pure card surface */
  --surface-alt: #F1F5F9;    /* Slate-100: Crisp sub-container */
  --topbar-bg: rgba(255, 255, 255, 0.94);
  --modal-overlay: rgba(15, 23, 42, 0.65);

  /* Discord-like Workspace Tokens (Adaptive) */
  --discord-sidebar-bg: #F2F3F5;
  --discord-main-bg: #FFFFFF;
  --discord-header-bg: #F2F3F5;
  --discord-input-bg: #E3E5E8;
  --discord-item-hover: #E3E5E8;
  --discord-item-active: #DBDEE1;

  /* Brand Accent Tokens (Extracted directly from official favicon brand mark) */
  --brand-orange: #EC6047;   /* Official Favicon Coral / Sunset Orange */
  --brand-orange-soft: #FEF2F0; /* Warm peach-coral wash */
  --brand-orange-strong: #C8422A; /* Deep coral for small text on a warm wash */
  --blueprint: #184272;      /* Official Favicon Deep Ocean Navy */
  --blueprint-soft: #EDF3F9; /* Soft ocean wash */
  --indigo: #6366F1;         /* Vivid royal indigo */
  --indigo-soft: #EEF2FF;    /* Soft indigo wash */
  --purple: #8B5CF6;         /* Electric violet */
  --purple-soft: #F5F3FF;    /* Soft purple wash */
  --cyan: #0284C7;           /* Electric cyan-blue */
  --cyan-soft: #E0F2FE;      /* Soft cyan wash */
  --brass: #B45309;          /* Deep honey amber — AA on --brass-soft */
  --brass-soft: #FEF3C7;     /* Soft amber wash */
  --slate: #64748B;          /* Balanced slate secondary */
  --signal: #E11D48;         /* Vibrant coral rose / red */
  --signal-soft: #FFE4E6;    /* Soft rose wash */
  --success: #059669;        /* Vivid mint emerald */
  --success-soft: #ECFDF5;   /* Soft mint wash */
  
  /* Structural Variables */
  --border: rgba(30, 41, 59, 0.12);
  --text: var(--ink);
  --text-secondary: var(--slate);
  --bg: var(--paper);
  --card-bg: var(--surface);
  --card-bg-alt: var(--surface-alt);
  --rule: var(--border);
  --rule-strong: rgba(30, 41, 59, 0.18);

  /* Buttons & Controls (Refined Executive Styling with Subtle Brand Orange from o.png) */
  --btn-bg: linear-gradient(180deg, #FFFFFF 0%, #FFF5F1 100%);
  --btn-text: #0F172A;
  --btn-border: rgba(236, 96, 71, 0.35);
  --btn-hover-bg: linear-gradient(180deg, #FFF0EC 0%, #FFE4DC 100%);
  --btn-hover-text: #C2410C;
  --btn-hover-border: #EC6047;
  --btn-shadow: 0 1px 2px rgba(236, 96, 71, 0.10), 0 1px 1px rgba(0, 0, 0, 0.04);
  --btn-hover-shadow: 0 2px 8px -2px rgba(236, 96, 71, 0.30);

  --input-bg: #FFFFFF;
  --input-text: #0F172A;
  --input-border: rgba(24, 66, 114, 0.20);

  /* Segmented Controls & Modern Pill Tabs */
  --segmented-bg: #F1F5F9;
  --segmented-border: #E2E8F0;
  --segmented-btn-color: #64748B;
  --segmented-btn-hover-bg: rgba(236, 96, 71, 0.09);
  --segmented-btn-hover-color: #D84B32;
  --segmented-active-bg: linear-gradient(135deg, #184272 0%, #0F2D52 100%);
  --segmented-active-color: #FFFFFF;
  --segmented-active-border: #184272;
  --segmented-active-shadow: 0 2px 8px rgba(24, 66, 114, 0.25), 0 1px 2px rgba(15, 23, 42, 0.04);
  
  /* Interactive Washes */
  --tint: rgba(24, 66, 114, 0.06);
  --tint-strong: rgba(24, 66, 114, 0.12);
  
  /* High-Fidelity Elevation & Multi-Layer 3D Ambient Shadows */
  --shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px -4px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --sh1: 0 1px 3px rgba(15, 23, 42, 0.05), 0 3px 8px -2px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --sh2: 0 2px 6px -1px rgba(15, 23, 42, 0.06), 0 10px 24px -4px rgba(15, 23, 42, 0.12), 0 18px 36px -8px rgba(24, 66, 114, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
  --sh3: 0 4px 10px -2px rgba(15, 23, 42, 0.08), 0 24px 50px -12px rgba(15, 23, 42, 0.22), 0 36px 72px -16px rgba(24, 66, 114, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1);
  --sh-glow: 0 0 0 3px rgba(24, 66, 114, 0.18), 0 4px 16px rgba(24, 66, 114, 0.16);
  --sh-orange-glow: 0 0 0 3px rgba(236, 96, 71, 0.25), 0 4px 16px rgba(236, 96, 71, 0.22);
  
  /* 3D Vibe Spatial & Tactile Elevation Tokens */
  --sh-3d-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(15, 23, 42, 0.06);
  --sh-3d-card: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 20px -4px rgba(15, 23, 42, 0.08), 0 16px 36px -8px rgba(24, 66, 114, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --sh-3d-card-hover: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 16px 32px -6px rgba(24, 66, 114, 0.15), 0 28px 56px -12px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1);
  --sh-3d-btn: none;
  --sh-3d-btn-hover: none;
  --sh-3d-btn-active: none;
  --sh-3d-btn-primary: none;
  --sh-3d-btn-primary-hover: none;
  --sh-3d-btn-primary-active: none;
  --sh-3d-sunken: inset 0 2px 5px rgba(15, 23, 42, 0.08), inset 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.85);
  --sh-3d-sunken-focus: inset 0 2px 4px rgba(24, 66, 114, 0.10), 0 0 0 3px rgba(24, 66, 114, 0.18), 0 6px 16px -2px rgba(24, 66, 114, 0.16);
  --sh-3d-floating: 0 12px 32px -6px rgba(15, 23, 42, 0.16), 0 28px 64px -16px rgba(24, 66, 114, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --sh-3d-modal: 0 24px 54px -10px rgba(15, 23, 42, 0.30), 0 40px 90px -18px rgba(24, 66, 114, 0.32), inset 0 1px 0 rgba(255, 255, 255, 1);
  --sh-3d-badge: 0 1px 3px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  
  /* Gradients */
  --grad-primary: linear-gradient(135deg, #184272 0%, #0F2D52 100%);
  --grad-orange: linear-gradient(135deg, #EC6047 0%, #D84B32 100%);
  --grad-danger: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  --grad-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --grad-bar: linear-gradient(90deg, #184272 0%, #EC6047 100%);

  /* Profile & Hero Banners (Eye-comfortable warm sunset peach on light theme - Full width) */
  --banner-orange-ref: #EA6340;
  --banner-orange-bg: linear-gradient(135deg, #FFF0EB 0%, #FFE4DC 100%);
  --banner-orange-border: rgba(236, 96, 71, 0.35);
  --banner-orange-shadow: 0 2px 10px rgba(236, 96, 71, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04);
  --banner-title-color: #0F172A;
  --banner-role-color: #475569;
  --banner-meta-color: #64748B;
  --banner-badge-bg: rgba(236, 96, 71, 0.14);
  --banner-badge-border: rgba(236, 96, 71, 0.35);
  --banner-badge-color: #C2410C;

  /* Typography Tokens
     One typeface carries the whole product: Plus Jakarta Sans, from the 10px
     labels to the page titles. Headings used to run in Outfit and every small
     label in JetBrains Mono, so a single screen could show three unrelated
     faces. --font-display is kept as a token so call sites need not change,
     but it now resolves to the same stack.
     --font-mono is for content that is genuinely code or data — an address, a
     token, a phone number — and rides the system mono stack, which needs no
     download and is installed everywhere. */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  /* The wash every record card carries — a client, a foundation rule, a todo,
     an instruction, a department — so one record reads as one object rather
     than the list reading as a single slab. Defined per theme because a
     gradient cannot be derived from the surface tokens the way a flat fill can. */
  --card-wash-bg: linear-gradient(100deg, #FFFFFF 0%, #F5F8FC 52%, #EBF2F9 100%);
  --card-wash-border: rgba(24, 66, 114, 0.16);
  --card-wash-border-hover: rgba(24, 66, 114, 0.38);
  /* Five names the stylesheets and views already ask for by var(), but which
     were never defined — so every use fell through to its literal fallback, a
     fixed colour that could not follow the theme. Defining them here is what
     lets them respond to Day/Night at all. */
  --text-dim: #64748B;       /* Muted slate for secondary lines on light */
  --accent: #EC6047;         /* Favicon Coral Sunset Orange */
  --primary: #184272;        /* Favicon Deep Ocean Navy */
  --danger: #DC2626;         /* Destructive action red */
  --discord-bg: #FFFFFF;     /* Ground a presence dot is ringed against */
  /* a lighter pour of the same wash, for metric tiles */
  --stat-wash-bg: linear-gradient(140deg, #FFFFFF 0%, #F5F8FC 60%, #EBF2F9 100%);
  --row-hover-bg: rgba(24, 66, 114, 0.06);
  --modal-band-bg: rgba(24, 66, 114, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Night Mode (Deep Midnight Navy with Vibrant Jewel Accents) */
    --ink: #F8FAFC;           /* Slate-50: Bright crisp text */
    --paper: #090E1A;         /* Deepest midnight obsidian background */
    --surface: #111B2E;        /* Elevated obsidian navy card surface */
    --surface-alt: #16243D;    /* Distinct sub-container surface */
    --topbar-bg: rgba(17, 27, 46, 0.94);
    --modal-overlay: rgba(0, 0, 0, 0.75);

    /* Discord-like Workspace Tokens (Adaptive) */
    --discord-sidebar-bg: #2B2D31;
    --discord-main-bg: #313338;
    --discord-header-bg: #2B2D31;
    --discord-input-bg: #383A40;
    --discord-item-hover: #35373C;
    --discord-item-active: #404249;

    --text: #F8FAFC;
    --text-secondary: #94A3B8;/* Slate-400: Clear readable secondary */
    --bg: #090E1A;
    --card-bg: #111C2E;
    --card-bg-alt: #162740;
    --brand-orange: #EC6047;   /* Official Favicon Coral / Sunset Orange */
    --brand-orange-soft: rgba(236, 96, 71, 0.20);
    --brand-orange-strong: #FF735C;
    --blueprint: #4C8DE0;      /* Luminous Favicon Navy-Blue for AA+ text */
    --blueprint-soft: rgba(24, 66, 114, 0.35);
    --indigo: #818CF8;
    --indigo-soft: rgba(129, 140, 248, 0.15);
    --purple: #A78BFA;
    --purple-soft: rgba(167, 139, 250, 0.15);
    --cyan: #38BDF8;
    --cyan-soft: rgba(56, 189, 248, 0.15);
    --brass: #FBBF24;
    --brass-soft: rgba(251, 191, 36, 0.15);
    --slate: #94A3B8;
    --signal: #FB7185;
    --signal-soft: rgba(251, 113, 133, 0.15);
    --success: #34D399;
    --success-soft: rgba(52, 211, 153, 0.15);
    --border: rgba(76, 141, 224, 0.16);
    --rule: rgba(76, 141, 224, 0.16);
    --rule-strong: rgba(76, 141, 224, 0.26);

    /* Buttons & Controls (Soft Radiant Light-Orange Tint from o.png for Night Mode) */
    --btn-bg: linear-gradient(180deg, rgba(236, 96, 71, 0.16) 0%, rgba(236, 96, 71, 0.09) 100%);
    --btn-text: #FFF0ED;
    --btn-border: rgba(236, 96, 71, 0.40);
    --btn-hover-bg: linear-gradient(180deg, rgba(236, 96, 71, 0.28) 0%, rgba(236, 96, 71, 0.16) 100%);
    --btn-hover-text: #FFFFFF;
    --btn-hover-border: #FF735C;
    --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --btn-hover-shadow: 0 0 16px rgba(236, 96, 71, 0.32), 0 2px 6px rgba(0, 0, 0, 0.40);

    --input-bg: #162740;
    --input-text: #F8FAFC;
    --input-border: rgba(76, 141, 224, 0.28);

    /* Segmented Controls & Modern Pill Tabs */
    --segmented-bg: #111C2E;
    --segmented-border: rgba(76, 141, 224, 0.25);
    --segmented-btn-color: #94A3B8;
    --segmented-btn-hover-bg: rgba(236, 96, 71, 0.16);
    --segmented-btn-hover-color: #FF9B85;
    --segmented-active-bg: linear-gradient(135deg, #20548F 0%, #184272 100%);
    --segmented-active-color: #FFFFFF;
    --segmented-active-border: rgba(76, 141, 224, 0.50);
    --segmented-active-shadow: 0 2px 10px rgba(24, 66, 114, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.25);

    --tint: rgba(76, 141, 224, 0.12);
    --tint-strong: rgba(76, 141, 224, 0.22);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 28px -6px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --sh1: 0 1px 3px rgba(0, 0, 0, 0.40), 0 3px 8px -2px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --sh2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 30px -8px rgba(0, 0, 0, 0.70), 0 18px 36px -10px rgba(76, 141, 224, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --sh3: 0 4px 12px rgba(0, 0, 0, 0.50), 0 28px 56px -12px rgba(0, 0, 0, 0.85), 0 36px 72px -16px rgba(76, 141, 224, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --sh-glow: 0 0 0 3px rgba(76, 141, 224, 0.35), 0 4px 20px rgba(76, 141, 224, 0.25);
    --sh-orange-glow: 0 0 0 3px rgba(236, 96, 71, 0.38), 0 4px 20px rgba(236, 96, 71, 0.30);

    /* 3D Vibe Spatial & Tactile Elevation Tokens */
    --sh-3d-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
    --sh-3d-card: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 24px -4px rgba(0, 0, 0, 0.65), 0 18px 36px -8px rgba(76, 141, 224, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --sh-3d-card-hover: 0 4px 12px rgba(0, 0, 0, 0.55), 0 16px 36px -6px rgba(0, 0, 0, 0.75), 0 28px 56px -10px rgba(76, 141, 224, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --sh-3d-btn: none;
    --sh-3d-btn-hover: none;
    --sh-3d-btn-active: none;
    --sh-3d-btn-primary: none;
    --sh-3d-btn-primary-hover: none;
    --sh-3d-btn-primary-active: none;
    --sh-3d-sunken: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05);
    --sh-3d-sunken-focus: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(76, 141, 224, 0.35), 0 6px 20px rgba(76, 141, 224, 0.25);
    --sh-3d-floating: 0 12px 36px -6px rgba(0, 0, 0, 0.70), 0 30px 70px -15px rgba(76, 141, 224, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --sh-3d-modal: 0 24px 60px -10px rgba(0, 0, 0, 0.88), 0 40px 90px -15px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.20);
    --sh-3d-badge: 0 1px 4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --grad-primary: linear-gradient(135deg, #2A6DB8 0%, #184272 100%);
    --grad-orange: linear-gradient(135deg, #FF735C 0%, #EC6047 100%);
    --grad-danger: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
    --grad-success: linear-gradient(135deg, #34D399 0%, #059669 100%);
    --grad-bar: linear-gradient(90deg, #184272 0%, #EC6047 50%, #4C8DE0 100%);
    --card-wash-bg: linear-gradient(100deg, #0C1626 0%, #122138 55%, #182C4A 100%);
    --card-wash-border: rgba(76, 141, 224, 0.22);
    --card-wash-border-hover: rgba(76, 141, 224, 0.48);

    /* Profile, Hero & Client Cards (Harmonious Warm Translucent Orange Glass - Uniform full width) */
    --banner-orange-ref: #EA6340;
    --banner-orange-bg: linear-gradient(135deg, rgba(234, 99, 64, 0.33) 0%, rgba(234, 99, 64, 0.29) 100%);
    --banner-orange-border: rgba(236, 96, 71, 0.45);
    --banner-orange-shadow: 0 4px 20px -2px rgba(234, 99, 64, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --banner-title-color: #FFFFFF;
    --banner-role-color: rgba(255, 215, 205, 0.90);
    --banner-meta-color: rgba(255, 195, 180, 0.85);
    --banner-badge-bg: rgba(236, 96, 71, 0.22);
    --banner-badge-border: rgba(236, 96, 71, 0.45);
    --banner-badge-color: #FFFFFF;
    --text-dim: #94A3B8;
    --accent: #FF735C;
    --primary: #4C8DE0;
    --danger: #F87171;
    --discord-bg: #0E1217;
    --stat-wash-bg: linear-gradient(140deg, #0C1626 0%, #122138 60%, #172B47 100%);
    --row-hover-bg: rgba(76, 141, 224, 0.12);
    --modal-band-bg: rgba(76, 141, 224, 0.10);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Night Mode (Deep Midnight Navy with Vibrant Jewel Accents) */
  --ink: #F8FAFC;           /* Slate-50: Bright crisp text */
  --paper: #090E1A;         /* Deepest midnight obsidian background */
  --surface: #111B2E;        /* Elevated obsidian navy card surface */
  --surface-alt: #16243D;    /* Distinct sub-container surface */
  --topbar-bg: rgba(17, 27, 46, 0.94);
  --modal-overlay: rgba(0, 0, 0, 0.75);

  /* Discord-like Workspace Tokens (Adaptive) */
  --discord-sidebar-bg: #2B2D31;
  --discord-main-bg: #313338;
  --discord-header-bg: #2B2D31;
  --discord-input-bg: #383A40;
  --discord-item-hover: #35373C;
  --discord-item-active: #404249;

  --text: #F8FAFC;
  --text-secondary: #94A3B8;/* Slate-400: Clear readable secondary */
  --bg: #090E1A;
  --card-bg: #111C2E;
  --card-bg-alt: #162740;
  --brand-orange: #EC6047;   /* Official Favicon Coral / Sunset Orange */
  --brand-orange-soft: rgba(236, 96, 71, 0.20);
  --brand-orange-strong: #FF735C;
  --blueprint: #4C8DE0;      /* Luminous Favicon Navy-Blue for AA+ text */
  --blueprint-soft: rgba(24, 66, 114, 0.35);
  --indigo: #818CF8;
  --indigo-soft: rgba(129, 140, 248, 0.15);
  --purple: #A78BFA;
  --purple-soft: rgba(167, 139, 250, 0.15);
  --cyan: #38BDF8;
  --cyan-soft: rgba(56, 189, 248, 0.15);
  --brass: #FBBF24;          /* Vivid radiant amber */
  --brass-soft: rgba(251, 191, 36, 0.15);
  --slate: #94A3B8;
  --signal: #FB7185;         /* Vibrant rose coral */
  --signal-soft: rgba(251, 113, 133, 0.15);
  --success: #34D399;        /* Vivid neon mint */
  --success-soft: rgba(52, 211, 153, 0.15);
  --border: rgba(76, 141, 224, 0.16);
  --rule: rgba(76, 141, 224, 0.16);
  --rule-strong: rgba(76, 141, 224, 0.26);

  /* Buttons & Controls (Soft Radiant Light-Orange Tint from o.png for Night Mode) */
  --btn-bg: linear-gradient(180deg, rgba(236, 96, 71, 0.16) 0%, rgba(236, 96, 71, 0.09) 100%);
  --btn-text: #FFF0ED;
  --btn-border: rgba(236, 96, 71, 0.40);
  --btn-hover-bg: linear-gradient(180deg, rgba(236, 96, 71, 0.28) 0%, rgba(236, 96, 71, 0.16) 100%);
  --btn-hover-text: #FFFFFF;
  --btn-hover-border: #FF735C;
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --btn-hover-shadow: 0 0 16px rgba(236, 96, 71, 0.32), 0 2px 6px rgba(0, 0, 0, 0.40);

  --input-bg: #162740;
  --input-text: #F8FAFC;
  --input-border: rgba(76, 141, 224, 0.28);

  /* Segmented Controls & Modern Pill Tabs */
  --segmented-bg: #111C2E;
  --segmented-border: rgba(76, 141, 224, 0.25);
  --segmented-btn-color: #94A3B8;
  --segmented-btn-hover-bg: rgba(236, 96, 71, 0.16);
  --segmented-btn-hover-color: #FF9B85;
  --segmented-active-bg: linear-gradient(135deg, #20548F 0%, #184272 100%);
  --segmented-active-color: #FFFFFF;
  --segmented-active-border: rgba(76, 141, 224, 0.50);
  --segmented-active-shadow: 0 2px 10px rgba(24, 66, 114, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.25);

  --tint: rgba(76, 141, 224, 0.12);
  --tint-strong: rgba(76, 141, 224, 0.22);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 28px -6px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --sh1: 0 1px 3px rgba(0, 0, 0, 0.40), 0 3px 8px -2px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --sh2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 30px -8px rgba(0, 0, 0, 0.70), 0 18px 36px -10px rgba(76, 141, 224, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --sh3: 0 4px 12px rgba(0, 0, 0, 0.50), 0 28px 56px -12px rgba(0, 0, 0, 0.85), 0 36px 72px -16px rgba(76, 141, 224, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --sh-glow: 0 0 0 3px rgba(76, 141, 224, 0.35), 0 4px 20px rgba(76, 141, 224, 0.25);
  --sh-orange-glow: 0 0 0 3px rgba(236, 96, 71, 0.38), 0 4px 20px rgba(236, 96, 71, 0.30);

  /* 3D Vibe Spatial & Tactile Elevation Tokens */
  --sh-3d-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  --sh-3d-card: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 24px -4px rgba(0, 0, 0, 0.65), 0 18px 36px -8px rgba(76, 141, 224, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --sh-3d-card-hover: 0 4px 12px rgba(0, 0, 0, 0.55), 0 16px 36px -6px rgba(0, 0, 0, 0.75), 0 28px 56px -10px rgba(76, 141, 224, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --sh-3d-btn: 0 2px 0 rgba(0, 0, 0, 0.70), 0 4px 14px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --sh-3d-btn-hover: 0 3px 0 rgba(0, 0, 0, 0.70), 0 6px 20px rgba(236, 96, 71, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --sh-3d-btn-active: 0 0 0 transparent, inset 0 2px 5px rgba(0, 0, 0, 0.65);
  --sh-3d-btn-primary: 0 3px 0 #9E2B18, 0 6px 20px rgba(236, 96, 71, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --sh-3d-btn-primary-hover: 0 4px 0 #9E2B18, 0 10px 28px rgba(236, 96, 71, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  --sh-3d-btn-primary-active: 0 1px 0 #9E2B18, inset 0 2px 5px rgba(0, 0, 0, 0.55);
  --sh-3d-sunken: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.05);
  --sh-3d-sunken-focus: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(76, 141, 224, 0.35), 0 6px 20px rgba(76, 141, 224, 0.25);
  --sh-3d-floating: 0 12px 36px -6px rgba(0, 0, 0, 0.70), 0 30px 70px -15px rgba(76, 141, 224, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --sh-3d-modal: 0 24px 60px -10px rgba(0, 0, 0, 0.88), 0 40px 90px -15px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --sh-3d-badge: 0 1px 4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --grad-primary: linear-gradient(135deg, #2A6DB8 0%, #184272 100%);
  --grad-orange: linear-gradient(135deg, #FF735C 0%, #EC6047 100%);
  --grad-danger: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  --grad-success: linear-gradient(135deg, #34D399 0%, #059669 100%);
  --grad-bar: linear-gradient(90deg, #184272 0%, #EC6047 50%, #4C8DE0 100%);
  --card-wash-bg: linear-gradient(100deg, #0C1626 0%, #122138 55%, #182C4A 100%);
  --card-wash-border: rgba(76, 141, 224, 0.22);
  --card-wash-border-hover: rgba(76, 141, 224, 0.48);

  /* Profile, Hero & Client Cards (Harmonious Warm Translucent Orange Glass - Uniform full width) */
  --banner-orange-ref: #EA6340;
  --banner-orange-bg: linear-gradient(135deg, rgba(234, 99, 64, 0.33) 0%, rgba(234, 99, 64, 0.29) 100%);
  --banner-orange-border: rgba(236, 96, 71, 0.45);
  --banner-orange-shadow: 0 4px 20px -2px rgba(234, 99, 64, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --banner-title-color: #FFFFFF;
  --banner-role-color: rgba(255, 215, 205, 0.90);
  --banner-meta-color: rgba(255, 195, 180, 0.85);
  --banner-badge-bg: rgba(236, 96, 71, 0.22);
  --banner-badge-border: rgba(236, 96, 71, 0.45);
  --banner-badge-color: #FFFFFF;
  --text-dim: #94A3B8;
  --accent: #FF735C;
  --primary: #4C8DE0;
  --danger: #F87171;
  --discord-bg: #0E1217;
  --stat-wash-bg: linear-gradient(140deg, #0C1626 0%, #122138 60%, #172B47 100%);
  --row-hover-bg: rgba(76, 141, 224, 0.12);
  --modal-band-bg: rgba(76, 141, 224, 0.10);
}

/* Application Layout & Scale Tokens --------------------------------------- */
:root {
  /* State status indicators */
  --state-open: #1f4d78;
  --state-progress: #854F0B;
  --state-done: var(--success);
  --state-blocked: var(--signal);

  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* Modern Executive rounded borders */
  --r1: 8px;       /* Form controls, buttons, chips */
  --r2: 12px;      /* Cards, panels, containers */
  --r3: 18px;      /* Modals, floating popups */
  --r-pill: 9999px;/* Status tags & pills */

  /* Control heights */
  --ctl: 40px;
  --ctl-sm: 32px;

  /* Structural dimensions */
  --topbar-h: 64px;
  --nav-h: 46px;
  --page-max: 1440px;

  /* Focus ring — one consistent treatment for every interactive element */
  --focus-ring: 0 0 0 3px rgba(24, 66, 114, 0.28);

  /* Hairline used for quiet separators inside cards and headers */
  --hairline: 1px solid var(--rule);

  /* Super-Fast Fluid Easing & Transition timing (Apple/iOS Grade Responsiveness) */
  --t-instant: 80ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 130ms cubic-bezier(0.16, 1, 0.3, 1);
  --t: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}