/* =====================================================================
   RealOS — Brand Tokens
   Build a reliable system, and then rely on the system.
   ---------------------------------------------------------------------
   Drop-in CSS custom-property layer for web dashboard, marketing site,
   Chrome extension, email (use inlined fallbacks), and PDF templates.
   ===================================================================== */

:root {
  /* -------------------------------------------------------------------
     1. BRAND CORE  — never used directly; semantic tokens wrap them.
     ------------------------------------------------------------------- */

  /* Electric Blue — primary signature, matched to the logo gear gradient
     (#0093F7 light → #0358D6 deep). Calibrated for screen contrast. */
  --blue-50:  oklch(97.5% 0.014 245);
  --blue-100: oklch(94%   0.034 245);
  --blue-200: oklch(87%   0.072 245);
  --blue-300: oklch(77%   0.125 248);
  --blue-400: oklch(68%   0.170 250);  /* #0093F7 — gear highlight */
  --blue-500: oklch(58%   0.205 252);  /* #0E80EE — Electric Blue (primary) */
  --blue-600: oklch(50%   0.215 256);  /* #0358D6 — gear deep / CTA hover */
  --blue-700: oklch(43%   0.190 258);
  --blue-800: oklch(35%   0.150 260);
  --blue-900: oklch(27%   0.100 262);
  --blue-950: oklch(18%   0.062 264);

  /* Signature gradient — the gear. Use for hero marks, app icon, accents. */
  --brand-gradient: linear-gradient(150deg, #0093F7 0%, #0358D6 100%);

  /* Indigo Denim — workwear depth. Backgrounds, headers, brand surfaces. */
  --denim-50:  oklch(96%  0.012 268);
  --denim-100: oklch(92%  0.024 268);
  --denim-200: oklch(82%  0.050 268);
  --denim-300: oklch(68%  0.080 268);
  --denim-400: oklch(52%  0.105 268);
  --denim-500: oklch(38%  0.110 268);
  --denim-600: oklch(32%  0.100 268);  /* #2B3A67 family */
  --denim-700: oklch(26%  0.085 268);
  --denim-800: oklch(20%  0.065 268);
  --denim-900: oklch(15%  0.045 268);
  --denim-950: oklch(10%  0.030 268);

  /* Sky — cool highlight accent. Brighter/lighter than primary blue so it
     pops on denim. Replaces the old gold accent. */
  --sky-50:  oklch(97%  0.020 240);
  --sky-100: oklch(93%  0.045 240);
  --sky-200: oklch(87%  0.080 242);
  --sky-300: oklch(80%  0.115 244);
  --sky-400: oklch(74%  0.140 246);  /* highlight on dark */
  --sky-500: oklch(67%  0.160 248);  /* Sky accent */
  --sky-600: oklch(60%  0.180 250);
  --sky-700: oklch(50%  0.180 252);
  --sky-800: oklch(40%  0.150 256);
  --sky-900: oklch(30%  0.110 260);

  /* Slate — neutral ramp tuned to the wordmark charcoal (#394E5F). */
  --slate-50:  oklch(98%   0.004 248);
  --slate-100: oklch(95.5% 0.006 248);
  --slate-200: oklch(91%   0.009 248);
  --slate-300: oklch(83%   0.012 248);
  --slate-400: oklch(68%   0.016 248);
  --slate-500: oklch(54%   0.020 248);
  --slate-600: oklch(45%   0.022 248);
  --slate-700: oklch(38%   0.024 248);  /* #394E5F — wordmark / house charcoal */
  --slate-800: oklch(28%   0.020 248);
  --slate-900: oklch(19%   0.016 248);
  --slate-950: oklch(12%   0.012 248);

  /* Status — calibrated for light + dark parity */
  --success-500: oklch(62% 0.155 150);
  --success-600: oklch(54% 0.150 150);
  --warn-500:    oklch(72% 0.150 60);
  --warn-600:    oklch(62% 0.150 55);
  --danger-500:  oklch(60% 0.205 25);
  --danger-600:  oklch(52% 0.200 25);
  --info-500:    var(--blue-500);

  /* Partner — single, locked, partnership-only */
  --lofty-purple: #4B39EF;

  /* -------------------------------------------------------------------
     2. SEMANTIC TOKENS — light theme (default)
     ------------------------------------------------------------------- */

  /* Surface */
  --bg:            var(--slate-50);
  --surface:       #ffffff;
  --surface-2:     var(--slate-100);
  --surface-3:     var(--slate-200);
  --surface-inset: var(--slate-100);

  /* Text */
  --text:          var(--slate-900);
  --text-muted:    var(--slate-600);
  --text-subtle:   var(--slate-500);
  --text-on-brand: #ffffff;
  --text-link:     var(--blue-600);

  /* Border */
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-focus:  var(--blue-500);

  /* Brand */
  --brand:         var(--blue-500);
  --brand-hover:   var(--blue-600);
  --brand-active:  var(--blue-700);
  --brand-soft:    var(--blue-50);
  --brand-dark:    var(--denim-700);
  --accent:        var(--sky-500);
  --accent-soft:   var(--sky-50);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadow — denim-aware (slight cool tint) */
  --shadow-xs: 0 1px 2px rgba(20, 28, 50, 0.05);
  --shadow-sm: 0 2px 6px rgba(20, 28, 50, 0.06), 0 1px 2px rgba(20, 28, 50, 0.04);
  --shadow-md: 0 6px 18px rgba(20, 28, 50, 0.08), 0 2px 4px rgba(20, 28, 50, 0.04);
  --shadow-lg: 0 18px 40px rgba(20, 28, 50, 0.12), 0 6px 12px rgba(20, 28, 50, 0.06);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--brand) 28%, transparent);

  /* Spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Type stacks */
  --font-wordmark: "Archivo Black", system-ui, sans-serif; /* logo wordmark */
  --font-display: "Bricolage Grotesque", "Inter Display", Inter, system-ui, sans-serif;
  --font-heading: "Inter Display", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body:    Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (modular 1.200 minor third on display, 1.125 on body) */
  --fs-12: 0.75rem;   --lh-12: 1.4;
  --fs-14: 0.875rem;  --lh-14: 1.45;
  --fs-16: 1rem;      --lh-16: 1.55;
  --fs-18: 1.125rem;  --lh-18: 1.5;
  --fs-20: 1.25rem;   --lh-20: 1.45;
  --fs-24: 1.5rem;    --lh-24: 1.35;
  --fs-30: 1.875rem;  --lh-30: 1.25;
  --fs-36: 2.25rem;   --lh-36: 1.2;
  --fs-48: 3rem;      --lh-48: 1.1;
  --fs-60: 3.75rem;   --lh-60: 1.05;
  --fs-72: 4.5rem;    --lh-72: 1.0;

  /* Motion */
  --ease-out:  cubic-bezier(.2, .7, .3, 1);
  --ease-in:   cubic-bezier(.4, 0, 1, 1);
  --ease-snap: cubic-bezier(.5, 0, .2, 1);
  --dur-fast:   120ms;
  --dur-med:    220ms;
  --dur-slow:   380ms;
}

/* =====================================================================
   3. DARK THEME — production dashboard surface system
   ===================================================================== */
[data-theme="dark"], .ros-dark {
  --bg:            #0d1117;
  --surface:       #141920;
  --surface-2:     #1a212b;
  --surface-3:     #232c39;
  --surface-inset: #0f141b;

  --text:          oklch(96% 0.008 255);
  --text-muted:    oklch(75% 0.012 255);
  --text-subtle:   oklch(60% 0.014 255);
  --text-on-brand: #ffffff;
  --text-link:     oklch(74% 0.135 260);

  --border:        oklch(28% 0.012 255);
  --border-strong: oklch(38% 0.014 255);
  --border-focus:  oklch(70% 0.150 262);

  --brand:         oklch(70% 0.165 262);   /* softened ~#4A7FD4 */
  --brand-hover:   oklch(76% 0.155 262);
  --brand-active:  oklch(82% 0.140 262);
  --brand-soft:    color-mix(in oklch, var(--brand) 18%, var(--surface));
  --brand-dark:    var(--denim-800);
  --accent:        var(--sky-400);
  --accent-soft:   color-mix(in oklch, var(--sky-500) 18%, var(--surface));

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5),  0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.35);
}

/* =====================================================================
   4. QUIET MODE — Chrome extension overlay sitting on host UI.
   No brand surface tints, no Sky Accent; honors host typography.
   ===================================================================== */
.ros-quiet {
  --surface:    rgba(255,255,255,0.98);
  --surface-2:  rgba(245,247,250,0.98);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(20,28,50,0.06);
  --radius-md:  8px;
  --accent:     transparent; /* no accent inside host UI */
}

/* =====================================================================
   5. ROOT TYPOGRAPHY DEFAULTS
   ===================================================================== */
.ros-root,
.ros-root * { box-sizing: border-box; }
.ros-root {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11", "cv05";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ros-root h1,.ros-root h2,.ros-root h3,.ros-root h4,.ros-root h5,.ros-root h6{
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0;
}
.ros-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variation-settings: "wdth" 100;
}
.ros-mono { font-family: var(--font-mono); font-feature-settings: "zero","ss01"; }

/* =====================================================================
   6. DENIM STITCH UTILITY — characteristic 1px dashed seam line
   ===================================================================== */
.ros-stitch {
  border: 1px dashed var(--sky-500);
  border-radius: var(--radius-md);
}
.ros-stitch-top    { border-top:    1px dashed var(--sky-500); }
.ros-stitch-bottom { border-bottom: 1px dashed var(--sky-500); }