/* ============================================================
   sl-tokens.css — Design token system
   Dark mode is the default (:root). Light mode overrides via
   html[data-theme="light"]. Loaded after sl-styles.css so
   these variables shadow any Webflow-defined names.
   ============================================================ */

:root {
  /* ── Neutral gray scale (dark mode: alpha on white) ──── */
  --gray-25:  rgba(255,255,255,0.02);
  --gray-50:  rgba(255,255,255,0.04);
  --gray-100: rgba(255,255,255,0.07);
  --gray-200: rgba(255,255,255,0.11);
  --gray-300: rgba(255,255,255,0.18);
  --gray-400: rgba(255,255,255,0.32);
  --gray-500: rgba(255,255,255,0.45);
  --gray-600: rgba(255,255,255,0.58);
  --gray-700: rgba(255,255,255,0.72);
  --gray-800: rgba(255,255,255,0.85);
  --gray-900: rgba(255,255,255,0.94);
  --gray-950: #ffffff;

  /* ── Brand (FractionalCTO blue) ─────────────────────── */
  --brand-300: #6ba3ff;
  --brand-400: #4488ff;
  --brand-500: #2d7aff;
  --brand-600: #146ef5;
  --brand-700: #0d5ed4;
  --brand-800: #0a4db8;

  /* ── Semantic surfaces ───────────────────────────────── */
  --bg-primary:   #080808;
  --bg-secondary: #111111;
  --bg-tertiary:  #171717;
  --bg-elevated:  #1a1a1a;
  --fg-primary:   #ffffff;
  --fg-secondary: #d8d8d8;
  --fg-tertiary:  #888888;
  --fg-muted:     #555555;
  --border-primary:   rgba(255,255,255,0.08);
  --border-secondary: rgba(255,255,255,0.14);

  /* ── Nav-specific tokens ─────────────────────────────── */
  --nav-dropdown-bg:     #141414;
  --nav-dropdown-border: rgba(255,255,255,0.08);
  --nav-link-color:      rgba(255,255,255,0.62);
  --nav-link-hover-bg:   rgba(255,255,255,0.07);
  --nav-link-active:     #ffffff;

  /* ── Radii ───────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-xl: 0 24px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── Light mode token overrides ─────────────────────────── */
html[data-theme="light"] {
  /* Neutral gray scale (standard grays) */
  --gray-25:  #FCFCFD;
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F7;
  --gray-200: #E4E7EC;
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1D2939;
  --gray-900: #101828;
  --gray-950: #0C111D;

  /* Semantic surfaces */
  --bg-primary:   #ffffff;
  --bg-secondary: #f4f4f4;
  --bg-tertiary:  #eeeeee;
  --bg-elevated:  #f8f8f8;
  --fg-primary:   #0d0d0d;
  --fg-secondary: #333333;
  --fg-tertiary:  #666666;
  --fg-muted:     #999999;
  --border-primary:   #e0e0e0;
  --border-secondary: #d0d0d0;

  /* Nav-specific */
  --nav-dropdown-bg:     #ffffff;
  --nav-dropdown-border: #E4E7EC;
  --nav-link-color:      #475467;
  --nav-link-hover-bg:   #F2F4F7;
  --nav-link-active:     #101828;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
}

/* ── Button utilities ────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
  font-family: inherit;
}

.btn-primary {
  background: var(--brand-600);
  color: #ffffff;
  border-color: var(--brand-600);
}

.btn-primary:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #ffffff;
}

.btn-secondary {
  background: transparent;
  color: var(--gray-700);
  border-color: var(--gray-200);
}

.btn-secondary:hover {
  background: var(--gray-50);
  color: var(--gray-900);
  border-color: var(--gray-300);
}

.btn-sm {
  padding: 8px 14px;
  font-size: 14px;
}