/* =========================================================================
   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 (Vibrant, high-energy executive colors) */
  --brand-orange: #F97316;   /* Energetic Originate Orange */
  --brand-orange-soft: #FFF7ED; /* Warm peach wash */
  --brand-orange-strong: #C2410C; /* Orange for small text on a warm wash */
  --blueprint: #2563EB;      /* Vivid royal cobalt blue */
  --blueprint-soft: #EFF6FF; /* Soft sky 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 */
  --btn-bg: #FFFFFF;
  --btn-text: #0F172A;
  --btn-border: rgba(30, 41, 59, 0.18);
  --btn-hover-bg: #EFF6FF;
  --btn-hover-text: #1D4ED8;
  --btn-hover-border: #2563EB;

  --input-bg: #FFFFFF;
  --input-text: #0F172A;
  --input-border: rgba(30, 41, 59, 0.20);

  /* Segmented Controls & Modern Pill Tabs */
  --segmented-bg: #F1F5F9;
  --segmented-border: #E2E8F0;
  --segmented-btn-color: #64748B;
  --segmented-btn-hover-bg: rgba(15, 23, 42, 0.06);
  --segmented-btn-hover-color: #0F172A;
  --segmented-active-bg: #FFFFFF;
  --segmented-active-color: #1D4ED8;
  --segmented-active-border: #CBD5E1;
  --segmented-active-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  
  /* Interactive Washes */
  --tint: rgba(37, 99, 235, 0.06);
  --tint-strong: rgba(37, 99, 235, 0.12);
  
  /* High-Fidelity Elevation & Soft Ambient Shadows */
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px -6px rgba(15, 23, 42, 0.10);
  --sh1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --sh2: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -8px rgba(15, 23, 42, 0.14);
  --sh3: 0 2px 4px rgba(15, 23, 42, 0.04), 0 20px 44px -12px rgba(15, 23, 42, 0.22);
  --sh-glow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  --sh-orange-glow: 0 0 0 3px rgba(249, 115, 22, 0.16);
  
  /* Gradients */
  --grad-primary: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --grad-orange: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  --grad-danger: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  --grad-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --grad-bar: linear-gradient(90deg, #2563EB 0%, #F97316 50%, #8B5CF6 100%);

  /* 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%, #F2F7FF 52%, #E4EFFF 100%);
  --card-wash-border: rgba(37, 99, 235, 0.18);
  --card-wash-border-hover: rgba(37, 99, 235, 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: #0284C7;         /* Sky cyan for selected pills */
  --primary: #2563EB;        /* Matches --blueprint */
  --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%, #F7FAFF 60%, #EEF4FF 100%);
  --row-hover-bg: rgba(37, 99, 235, 0.06);
  --modal-band-bg: rgba(37, 99, 235, 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: #111B2E;
    --card-bg-alt: #16243D;
    --brand-orange: #FB923C;
    --brand-orange-soft: rgba(251, 146, 60, 0.15);
    --brand-orange-strong: #FB923C;
    --blueprint: #3B82F6;      /* Electric sapphire blue */
    --blueprint-soft: rgba(59, 130, 246, 0.15);
    --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(148, 163, 184, 0.10);
    --rule: rgba(148, 163, 184, 0.10);
    --rule-strong: rgba(148, 163, 184, 0.20);

    /* Buttons & Controls */
    --btn-bg: #16243D;
    --btn-text: #F8FAFC;
    --btn-border: rgba(148, 163, 184, 0.25);
    --btn-hover-bg: rgba(59, 130, 246, 0.20);
    --btn-hover-text: #93C5FD;
    --btn-hover-border: #3B82F6;

    --input-bg: #16243D;
    --input-text: #F8FAFC;
    --input-border: rgba(148, 163, 184, 0.25);

    /* Segmented Controls & Modern Pill Tabs */
    --segmented-bg: #111B2E;
    --segmented-border: rgba(148, 163, 184, 0.20);
    --segmented-btn-color: #94A3B8;
    --segmented-btn-hover-bg: rgba(255, 255, 255, 0.06);
    --segmented-btn-hover-color: #F8FAFC;
    --segmented-active-bg: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    --segmented-active-color: #FFFFFF;
    --segmented-active-border: rgba(147, 197, 253, 0.35);
    --segmented-active-shadow: 0 2px 8px rgba(37, 99, 235, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25);

    --tint: rgba(59, 130, 246, 0.10);
    --tint-strong: rgba(59, 130, 246, 0.18);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px -8px rgba(0, 0, 0, 0.55);
    --sh1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sh2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 26px -10px rgba(0, 0, 0, 0.60);
    --sh3: 0 2px 4px rgba(0, 0, 0, 0.40), 0 24px 48px -14px rgba(0, 0, 0, 0.70);
    --sh-glow: 0 0 0 3px rgba(59, 130, 246, 0.24);
    --sh-orange-glow: 0 0 0 3px rgba(251, 146, 60, 0.24);
    --grad-primary: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --grad-orange: linear-gradient(135deg, #FB923C 0%, #EA580C 100%);
    --grad-danger: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
    --grad-success: linear-gradient(135deg, #34D399 0%, #059669 100%);
    --grad-bar: linear-gradient(90deg, #3B82F6 0%, #FB923C 50%, #A78BFA 100%);
    --card-wash-bg: linear-gradient(100deg, #0E1930 0%, #142A4C 55%, #17335F 100%);
    --card-wash-border: rgba(59, 130, 246, 0.22);
    --card-wash-border-hover: rgba(59, 130, 246, 0.48);
    --text-dim: #94A3B8;
    --accent: #38BDF8;
    --primary: #3B82F6;
    --danger: #F87171;
    --discord-bg: #0E1217;
    --stat-wash-bg: linear-gradient(140deg, #101C33 0%, #13233F 60%, #152A4E 100%);
    --row-hover-bg: rgba(59, 130, 246, 0.10);
    --modal-band-bg: rgba(59, 130, 246, 0.08);
  }
}

: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: #111B2E;
  --card-bg-alt: #16243D;
  --brand-orange: #FB923C;
  --brand-orange-soft: rgba(251, 146, 60, 0.15);
  --brand-orange-strong: #FB923C;
  --blueprint: #3B82F6;      /* Electric sapphire blue */
  --blueprint-soft: rgba(59, 130, 246, 0.15);
  --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(148, 163, 184, 0.10);
  --rule: rgba(148, 163, 184, 0.10);
  --rule-strong: rgba(148, 163, 184, 0.20);

  /* Buttons & Controls */
  --btn-bg: #16243D;
  --btn-text: #F8FAFC;
  --btn-border: rgba(148, 163, 184, 0.25);
  --btn-hover-bg: rgba(59, 130, 246, 0.20);
  --btn-hover-text: #93C5FD;
  --btn-hover-border: #3B82F6;

  --input-bg: #16243D;
  --input-text: #F8FAFC;
  --input-border: rgba(148, 163, 184, 0.25);

  /* Segmented Controls & Modern Pill Tabs */
  --segmented-bg: #111B2E;
  --segmented-border: rgba(148, 163, 184, 0.20);
  --segmented-btn-color: #94A3B8;
  --segmented-btn-hover-bg: rgba(255, 255, 255, 0.06);
  --segmented-btn-hover-color: #F8FAFC;
  --segmented-active-bg: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --segmented-active-color: #FFFFFF;
  --segmented-active-border: rgba(147, 197, 253, 0.35);
  --segmented-active-shadow: 0 2px 8px rgba(37, 99, 235, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25);

  --tint: rgba(59, 130, 246, 0.10);
  --tint-strong: rgba(59, 130, 246, 0.18);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --sh1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 26px -10px rgba(0, 0, 0, 0.60);
  --sh3: 0 2px 4px rgba(0, 0, 0, 0.40), 0 24px 48px -14px rgba(0, 0, 0, 0.70);
  --sh-glow: 0 0 0 3px rgba(59, 130, 246, 0.24);
  --sh-orange-glow: 0 0 0 3px rgba(251, 146, 60, 0.24);
  --grad-primary: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --grad-orange: linear-gradient(135deg, #FB923C 0%, #EA580C 100%);
  --grad-danger: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  --grad-success: linear-gradient(135deg, #34D399 0%, #059669 100%);
  --grad-bar: linear-gradient(90deg, #3B82F6 0%, #FB923C 50%, #A78BFA 100%);
  --card-wash-bg: linear-gradient(100deg, #0E1930 0%, #142A4C 55%, #17335F 100%);
  --card-wash-border: rgba(59, 130, 246, 0.22);
  --card-wash-border-hover: rgba(59, 130, 246, 0.48);
  --text-dim: #94A3B8;
  --accent: #38BDF8;
  --primary: #3B82F6;
  --danger: #F87171;
  --discord-bg: #0E1217;
  --stat-wash-bg: linear-gradient(140deg, #101C33 0%, #13233F 60%, #152A4E 100%);
  --row-hover-bg: rgba(59, 130, 246, 0.10);
  --modal-band-bg: rgba(59, 130, 246, 0.08);
}

/* Application Layout & Scale Tokens --------------------------------------- */
:root {
  /* State status indicators */
  --state-open: var(--blueprint);
  --state-progress: var(--brass);
  --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(37, 99, 235, 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);
}