/* ================================================================
   Skyu Design System — Color & Type Tokens
   Source: Figma "Skyu Website.fig" / Campaigns frames
   ================================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "SF Pro Display";
  src: url("/docs/fonts/SF-Pro-Display-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/docs/fonts/SF-Pro-Display-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/docs/fonts/SF-Pro-Display-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/docs/fonts/SF-Pro-Display-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("/docs/fonts/SF-Pro-Display-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Mono";
  src: url("/docs/fonts/SFMono-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Mono";
  src: url("/docs/fonts/SFMono-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Mono";
  src: url("/docs/fonts/SFMono-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --skyu-blue:        rgb(61, 111, 228);   /* primary action, brand */
  --skyu-blue-hover:  rgb(49, 96, 208);
  --skyu-blue-press:  rgb(38, 82, 188);
  --skyu-blue-tint:   rgb(211, 229, 253);  /* Active pill bg */
  --skyu-blue-soft:   rgb(233, 237, 250);  /* softest surface */

  /* ---------- NEUTRAL / TEXT ---------- */
  --fg-1:             rgb(60, 64, 67);     /* primary text */
  --fg-2:             rgb(134, 134, 139);  /* secondary text */
  --fg-3:             rgb(153, 153, 153);  /* tertiary, disabled */
  --fg-inverse:       rgb(255, 255, 255);
  --fg-black:         rgb(0, 0, 0);

  /* ---------- SURFACES ---------- */
  --bg-app:           rgb(248, 249, 251);  /* app background */
  --bg-surface:       rgb(255, 255, 255);  /* cards, nav */
  --surface-1:        rgb(255, 255, 255);  /* THEME-AWARE card surface */
  --surface-2:        rgb(248, 249, 251);  /* THEME-AWARE recessed surface */
  --on-accent:        rgb(255, 255, 255);  /* text/icons on colored chips (constant) */
  --bg-muted:         rgb(248, 249, 251);  /* inner sections */
  --bg-hover:         rgba(60, 64, 67, 0.04);
  --bg-press:         rgba(60, 64, 67, 0.08);
  --scrim:            rgba(0, 0, 0, 0.24);
  --grid-line:        rgba(0, 0, 0, 0.28);
  --grid-line-soft:   rgba(0, 0, 0, 0.18);

  /* ---------- BORDERS ---------- */
  --border-1:         rgb(219, 219, 219);
  --border-2:         rgb(230, 230, 230);
  --border-subtle:    rgba(219, 219, 219, 0.86);

  /* ---------- SEMANTIC / STATUS ---------- */
  --status-active-bg:   rgb(211, 229, 253);
  --status-active-fg:   rgb(60, 64, 67);
  --status-paused-bg:   rgb(255, 210, 0);
  --status-paused-fg:   rgb(60, 64, 67);
  --status-draft-bg:    rgb(217, 217, 217);
  --status-draft-fg:    rgb(60, 64, 67);
  --status-complete-bg: rgb(0, 219, 168);
  --status-complete-fg: rgb(255, 255, 255);
  --status-error-bg:    rgb(244, 95, 95);
  --status-error-fg:    rgb(255, 255, 255);
  --status-warn-bg:     rgb(255, 210, 0);
  --status-warn-fg:     rgb(60, 64, 67);

  /* Accent palette (used sparingly across marketing/graphs) */
  --accent-cyan:      rgb(88, 202, 234);
  --accent-indigo:    rgb(76, 76, 191);
  --accent-peach:     rgb(244, 162, 140);
  --accent-yellow:    rgb(255, 210, 0);
  --accent-green:     rgb(0, 219, 168);
  --accent-orange:    rgb(242, 68, 18);
  --accent-red:       rgb(244, 95, 95);
  --accent-violet:    rgb(122, 91, 245);
  --accent-navy:      rgb(36, 40, 91);

  /* ---------- RADII ---------- */
  --radius-sm:        4px;   /* icon buttons */
  --radius-md:        8px;   /* buttons, cards */
  --radius-lg:        12px;
  --radius-pill:      24px;  /* status pills */
  --radius-search:    25px;  /* search input */
  --radius-full:      9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1:         0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2:         0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-3:         0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-pop:       0 8px 32px rgba(0, 0, 0, 0.12);

  /* ---------- SPACING (4-px grid) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;

  /* ---------- TYPE TOKENS (size / weight / line) ---------- */
  --text-display-1: 700 48px/1.0  var(--font-display); /* page title */
  --text-display-2: 700 36px/1.05 var(--font-display);
  --text-h1:        700 24px/1.1  var(--font-display); /* section title */
  --text-h2:        700 18px/1.2  var(--font-display);
  --text-h3:        700 16px/1.25 var(--font-display);
  --text-body-lg:   400 16px/1.4  var(--font-display);
  --text-body:      400 14px/1.4  var(--font-display); /* default body */
  --text-body-md:   500 14px/1.25 var(--font-display); /* table/nav */
  --text-body-bold: 700 14px/1.25 var(--font-display);
  --text-caption:   400 13px/1.3  var(--font-display); /* meta */
  --text-small:     400 12px/1.3  var(--font-display);
  --text-pill:      700 12px/1.0  var(--font-display); /* status pills */
  --text-mono:      400 13px/1.4  var(--font-mono);

  /* ---------- LETTER SPACING ---------- */
  --tracking-display: -0.03em;  /* big headings */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
}

/* ---------- BASE / SEMANTIC ELEMENT STYLES ---------- */
html, body {
  font: var(--text-body);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1-display {
  font: var(--text-display-1);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
}
h2, .h1 {
  font: var(--text-h1);
  color: var(--fg-1);
  margin: 0;
}
h3, .h2 {
  font: var(--text-h2);
  color: var(--fg-1);
  margin: 0;
}
h4, .h3 {
  font: var(--text-h3);
  color: var(--fg-1);
  margin: 0;
}
p, .body {
  font: var(--text-body);
  color: var(--fg-1);
  margin: 0;
}
small, .caption {
  font: var(--text-caption);
  color: var(--fg-2);
}
code, kbd, pre, .mono {
  font: var(--text-mono);
}
a { color: var(--skyu-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ================================================================
   DARK THEME OVERRIDES — applied via <html data-theme="dark">
   Mirror of the light tokens, tuned to feel like a Skyu-blue night
   build: deep navy-tinted neutrals (not pure black), Skyu blue lifted
   slightly for contrast, and accent palette nudged toward saturation
   so charts still pop on the dark surface.
   ================================================================ */
[data-theme="dark"] {
  /* Brand — slightly lifted blue for contrast on dark */
  --skyu-blue:        rgb(122, 158, 255);
  --skyu-blue-hover:  rgb(140, 172, 255);
  --skyu-blue-press:  rgb(102, 140, 240);
  --skyu-blue-tint:   rgba(122, 158, 255, 0.18);
  --skyu-blue-soft:   rgba(122, 158, 255, 0.10);

  /* Text */
  --fg-1:             rgb(229, 232, 238);   /* primary text */
  --fg-2:             rgb(160, 167, 178);   /* secondary text */
  --fg-3:             rgb(124, 131, 142);   /* tertiary, disabled */
  --fg-inverse:       rgb(20, 22, 28);
  --fg-black:         rgb(0, 0, 0);

  /* Surfaces — navy-tinted neutrals, layered */
  --bg-app:           rgb(15, 17, 22);      /* deepest — workspace */
  --bg-surface:       rgb(22, 25, 32);      /* card / sidebar */
  --surface-1:        rgb(22, 25, 32);      /* card surface */
  --surface-2:        rgb(28, 32, 40);      /* recessed surface */
  --bg-muted:         rgb(28, 32, 40);
  --bg-hover:         rgba(255, 255, 255, 0.05);
  --bg-press:         rgba(255, 255, 255, 0.09);
  --scrim:            rgba(0, 0, 0, 0.55);
  --grid-line:        rgba(255, 255, 255, 0.18);
  --grid-line-soft:   rgba(255, 255, 255, 0.10);

  /* Borders */
  --border-1:         rgb(50, 56, 68);
  --border-2:         rgb(40, 45, 55);
  --border-subtle:    rgba(60, 68, 84, 0.86);

  /* Status pills tuned for dark — keep brand recognition */
  --status-active-bg:   rgba(122, 158, 255, 0.22);
  --status-active-fg:   rgb(229, 232, 238);
  --status-paused-bg:   rgb(255, 210, 0);
  --status-paused-fg:   rgb(20, 22, 28);
  --status-draft-bg:    rgba(160, 167, 178, 0.22);
  --status-draft-fg:    rgb(229, 232, 238);
  --status-complete-bg: rgb(0, 219, 168);
  --status-complete-fg: rgb(20, 22, 28);
  --status-error-bg:    rgb(244, 95, 95);
  --status-error-fg:    rgb(255, 255, 255);

  /* Accents — keep mostly the same; chart legibility is fine */
  --accent-cyan:      rgb(110, 215, 240);
  --accent-peach:     rgb(248, 175, 152);
  --accent-yellow:    rgb(255, 215, 60);
  --accent-green:     rgb(64, 230, 185);
  --accent-orange:    rgb(255, 120, 80);
  --accent-red:       rgb(248, 110, 110);
  --accent-violet:    rgb(155, 130, 255);

  /* Shadows — soften (since cards are already dark) */
  --shadow-1:         0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2:         0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-3:         0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-pop:       0 8px 32px rgba(0, 0, 0, 0.55);
}

/* Logo: invert the black wordmark so it stays legible on the dark surface */
[data-theme="dark"] .skyu-logo {
  filter: invert(1) brightness(1.3);
}

/* ================================================================
   SIDEBAR NAV ITEM HOVER
   - Idle: transparent
   - Hover (inactive): subtle muted-bg lift
   - Active (.on): stronger muted-bg
   - Hover-on-active: tiny extra lift so the click target still
     responds to the cursor without changing meaning
   --bg-hover and --bg-muted are theme-aware so this works in both
   light and dark modes automatically.
   ================================================================ */
.nav-item {
  transition: background 120ms ease, color 120ms ease;
}
.nav-item:hover {
  background: var(--bg-hover) !important;
}
.nav-item.on {
  background: var(--bg-muted) !important;
}
.nav-item.on:hover {
  /* Slightly stronger than --bg-muted so hover is still felt on the active row */
  background: color-mix(in oklab, var(--bg-muted) 70%, var(--fg-1) 8%) !important;
}