/* Chief Design System Variables */
/* Extracted from Chief desktop app and brand guidelines */

:root {
  /* Layout */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  
  /* Dimensions */
  --top-bar-height: 48px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --panel-width: 380px;
  --panel-width-sm: 320px;

  /* The active sidebar row's tile. A glyph's own size travels with it from
     chief_icon, because it is set against the text beside it; only the tile is
     the stylesheet's, and its shadow is the one shadow drawn on the chrome. */
  --icon-tile: 24px;
  --icon-tile-glyph: 16px;
  --icon-tile-sm: 20px;
  --icon-tile-sm-glyph: 14px;

  /* The one glyph a stylesheet has to draw itself, because it is a ::before on
     a field rather than an element the markup can hang a <use> off. Masked, not
     painted, so it still takes its colour from the rule that places it. */
  --icon-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%20fill%3D%22currentColor%22%20fill-opacity%3D%22.35%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M15.6%2015.6%2021%2021%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --icon-tile-shadow: 0 1px 2px rgb(10 22 40 / 0.35);
  
  /* Core Colors */
  --color-primary: #4a9eff;
  --color-primary-dark: #2d7ed8;
  --color-primary-light: #6ab4ff;
  /* A filled control that has to carry a white label. --color-primary is drawn
     for black labels (--color-on-primary is #000), so it cannot. */
  --color-primary-deep: #256aba;
  --duotone-edge: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary) 45%, var(--color-primary-light));
  --color-success: #7FBA00;
  --color-warning: #FFB900;
  --color-danger: #ff4a4a;
  --color-purple: #8A2BE2;
  --color-gray: #999999;
  --color-text: #ffffff;
  --color-black: #000000;
  --dark-bg: #0f1f38;

  /* Text on colored backgrounds */
  --color-on-primary: #000000;
  --color-on-success: #000000;
  --color-on-danger: #ffffff;
  
  /* Text opacity variations */
  --color-text-muted: rgb(255 255 255 / 0.6);
  --color-text-faint: rgb(255 255 255 / 0.4);
  --color-text-bright: rgb(255 255 255 / 0.9);
  --color-text-subtle: rgb(255 255 255 / 0.7);
  --color-text-dimmed: rgb(255 255 255 / 0.8);
  --color-text-ultra-dim: rgb(255 255 255 / 0.35);
  
  /* Key backgrounds */
  --color-surface: #1a2d47;
  --bg-main: rgba(15, 31, 56, 0.97);
  --bg-main-solid: #0f1f38;
  --bg-overlay: rgb(from var(--color-black) r g b / 0.6);
  --bg-overlay-dark: rgb(from var(--color-black) r g b / 0.3);
  --bg-overlay-darker: rgb(from var(--color-black) r g b / 0.2);
  --bg-input: rgb(255 255 255 / 0.05);
  --bg-input-light: rgb(255 255 255 / 0.08);
  --bg-input-super-faint: rgb(255 255 255 / 0.1);
  --bg-hover: rgb(from var(--color-primary) r g b / 0.1);
  
  /* Additional backgrounds from brand guidelines - Deep Navy Palette */
  --bg-dark: #0a1628;
  --bg-section: #0f1f38;
  --bg-card: #0f1f38;
  --bg-elevated: #1a2d4f;

  /* Key borders */
  --border-subtle: rgb(from var(--color-primary) r g b / 0.08);
  --border-subtle-alt: rgb(from var(--color-primary) r g b / 0.05);
  --border-subtle-lighter: rgb(from var(--color-primary) r g b / 0.1);
  --border-default: rgb(from var(--color-primary) r g b / 0.2);
  --border-hover: rgb(from var(--color-primary) r g b / 0.3);
  --border-danger: rgb(from var(--color-danger) r g b / 0.3);
  --border-white-subtle: rgb(255 255 255 / 0.05);
  --border-white-lighter: rgb(255 255 255 / 0.1);
  --border: #1a2d4f;
  --border-light: rgba(74, 158, 255, 0.15);
  
  /* Shadows and glows */
  --shadow-danger: rgb(from var(--color-danger) r g b / 0.2);
  --shadow-overlay: rgb(from var(--color-black) r g b / 0.25);
  --shadow-overlay-dark: rgb(from var(--color-black) r g b / 0.3);
  --glow-primary: rgb(from var(--color-primary) r g b / 0.8);
  --glow-primary-subtle: rgb(from var(--color-primary) r g b / 0.2);
  --shadow-text: rgb(26 31 46);
  --text-shadow-dark: rgb(from var(--color-black) r g b / 0.8);
  
  /* Effects */
  --backdrop-filter: blur(20px) saturate(150%);
  --shadow-sm: 0 4px 12px rgb(from var(--color-black) r g b / 0.2);
  --shadow-md: 0 8px 32px rgb(from var(--color-black) r g b / 0.4);
  --shadow-lg: 0 12px 48px rgb(from var(--color-black) r g b / 0.4);
  --transition-default: all 0.25s ease;
  --transition-fast: all 0.2s ease;
  --transition-instant: all 0.08s ease;
  --transition-slow: all 0.3s ease;
  
  /* Glassmorphic enhancements */
  --glass-gradient: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0.025) 100%);
  --glass-glow: 0 0 30px rgb(from var(--color-primary) r g b / 0.1),
    0 0 60px rgb(from var(--color-primary) r g b / 0.05);
  --glass-border: 1px solid rgba(255, 255, 255, 0.18);
  --glass-inner-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  
  /* SVG noise pattern for frosted glass texture */
  --glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
  
  /* Typography Scale */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 56px;
  --font-size-display: 88px;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;
  
  /* Letter Spacing */
  --letter-spacing-display: -4px;
  --letter-spacing-tight: -2px;
  --letter-spacing-snug: -1px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 1px;
  --letter-spacing-wider: 3px;
  
  /* Line Heights */
  --line-height-tight: 1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 2;
  
  /* Font Families */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
  
  /* Status Colors (from brand guidelines) */
  --color-success-green: #4aff9e;
  --color-warning-orange: #ff9e4a;
  --color-error-red: #ff4a4a;
  
  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-overlay: 3000;
  --z-notification: 4000;
  --z-tooltip: 5000;

  /* Light Theme Colors */
  --light-bg: #ffffff;
  --light-bg-subtle: #f8fafc;
  --light-bg-muted: #f1f5f9;
  --light-bg-blue: #eff6ff;
  --light-bg-blue-strong: #dbeafe;
  --light-text: #0f172a;
  --light-text-secondary: #475569;
  --light-text-muted: #94a3b8;
  --light-border: #e2e8f0;
  /* Blue and red as ink on the light ramp. --color-primary and --color-danger
     are drawn for the navy chrome and go weak on a white card, so surfaces
     built on --light-bg reach for these two instead. */
  --light-accent: #2b5aa0;
  --light-danger: #dc3545;
  /* --color-success is drawn for the navy chrome and goes acid on a white card,
     so the light ramp carries its own green. */
  --light-success: #15803d;
  --light-border-strong: #cbd5e1;

  /* Sign-in panel — the desktop app's light card, sat on the navy ground. Its
     blues are drawn for a white surface, so --color-primary appears on the
     card's navy bar only and never on the panel below it. */
  --panel-bg: #f7f8fb;
  --panel-border: #e8edf4;
  --panel-bar-bg: rgb(15 31 56 / 0.92);
  --panel-grip: rgb(255 255 255 / 0.25);
  --panel-accent: #2563eb;
  --panel-accent-hover: #1d4ed8;
  --panel-verified: #15803d;
  --panel-caution: #b45309;
  --panel-danger-text: #b3261e;
  --panel-radius: 14px;
  --panel-shadow: 0 6px 18px rgb(10 22 40 / 0.32);
  --font-size-panel: 13px;
  --font-size-panel-fine: 12.5px;
}

/* Dark mode is default, but provide light mode variables for future use */
@media (prefers-color-scheme: light) {
  :root.light-mode {
    --color-text: #000000;
    --color-text-muted: rgb(0 0 0 / 0.6);
    --color-text-faint: rgb(0 0 0 / 0.4);
    --bg-main: rgba(255, 255, 255, 0.95);
    --bg-card: #ffffff;
    --bg-elevated: #f8f8f8;
    --border: #e0e0e0;
    --border-light: #d0d0d0;
  }
}