/* ═══════════════════════════════════════════════════════════════════
   Beyond Madeira Hub 3.0 — Design Tokens
   Inspired by Apple HIG: depth via layers, not borders.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ─────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", monospace;

  /* Scale: SF Pro — 13/15/17/22/28/34 */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  34px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --lh-tight:  1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.015em;
  --tracking-wide:   0.08em;

  /* ── Colour primitives (system-inspired) ─────────────────────── */
  /* Greys — 3 levels of text + surfaces in layers */
  --grey-50:   #fafafa;
  --grey-100:  #f5f5f7;
  --grey-150:  #efeff4;
  --grey-200:  #e5e5ea;
  --grey-300:  #d2d2d7;
  --grey-400:  #a1a1a6;
  --grey-500:  #86868b;
  --grey-600:  #6e6e73;
  --grey-700:  #48484a;
  --grey-800:  #1d1d1f;
  --grey-900:  #000000;

  /* Brand */
  --brand-500: #0e5259;
  --brand-600: #0a3f44;
  --brand-400: #2a7a82;
  --brand-100: #e4f3f4;
  --brand-50:  #f0f9f9;

  --accent-500: #2563a8;
  --accent-100: #e6edf7;

  /* Semantic */
  --ok-500: #30d158;
  --ok-600: #248a3d;
  --ok-100: #e8f8ed;

  --warn-500: #ff9f0a;
  --warn-600: #c7700a;
  --warn-100: #fff3e0;

  --err-500: #ff3b30;
  --err-600: #d70015;
  --err-100: #ffe5e3;

  --info-500: #0a84ff;
  --info-100: #e1efff;

  /* ── Surfaces (light mode default) ────────────────────────────── */
  --surface-base:    #ffffff;   /* root background */
  --surface-sunken:  #f5f5f7;   /* app shell / sidebar bg */
  --surface-raised:  #ffffff;   /* cards */
  --surface-overlay: #ffffff;   /* modals, drawers */
  --surface-hover:   rgba(0,0,0,0.04);
  --surface-active:  rgba(0,0,0,0.06);

  /* ── Text ──────────────────────────────────────────────────────── */
  --text-primary:   #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary:  #a1a1a6;
  --text-on-brand:  #ffffff;
  --text-link:      var(--brand-500);

  /* ── Borders & separators ───────────────────────────────────── */
  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.16);

  /* ── Shadow (depth via light, not strokes) ─────────────────── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
  --shadow-xl:    0 24px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
  --shadow-focus: 0 0 0 4px rgba(14,82,89,0.18);

  /* ── Radius (Apple: generous but not blobby) ─────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

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

  /* ── Layout ────────────────────────────────────────────── */
  --sidebar-w: 232px;
  --topbar-h:  56px;
  --view-max:  1280px;

  /* ── Breakpoints (reference only — use px literals in @media) ── */
  --bp-xs:  480px;
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  --touch-target: 44px;
  --input-font-mobile: 16px;

  /* ─────────────────────────────────────────────────────────────
     Legacy aliases — existing pages use --bm-* vars.
     Map them to the new system so old code inherits new look.
     ───────────────────────────────────────────────────────── */
  --bm-teal:        var(--brand-500);
  --bm-teal-dark:   var(--brand-600);
  --bm-teal-light:  var(--brand-100);
  --bm-ink:         var(--text-primary);
  --bm-body:        var(--text-primary);
  --bm-muted:       var(--text-secondary);
  --bm-border:      var(--border-default);
  --bm-bg:          var(--surface-sunken);
  --bm-white:       var(--surface-raised);
  --bm-warn:        var(--warn-600);
  --bm-warn-l:      var(--warn-100);
  --bm-err:         var(--err-600);
  --bm-err-l:       var(--err-100);
  --bm-ok:          var(--ok-600);
  --bm-ok-l:        var(--ok-100);
  --bm-accent:      var(--brand-500);
  --bm-r:           var(--radius-md);
  --bm-shadow:      var(--shadow-sm);
  --bm-font:        var(--font-sans);
}

/* ═══════════════════════════════════════════════════════════════════
   Dark mode — layers (base → sunken → raised), not inverted colours.
   Applied when <html data-theme="dark">.
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  --surface-base:    #000000;
  --surface-sunken:  #0a0a0b;
  --surface-raised:  #1c1c1e;
  --surface-overlay: #2c2c2e;
  --surface-hover:   rgba(255,255,255,0.06);
  --surface-active:  rgba(255,255,255,0.10);

  --text-primary:   #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary:  #6e6e73;

  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:    0 10px 30px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.3);
  --shadow-xl:    0 24px 60px rgba(0,0,0,0.7), 0 8px 20px rgba(0,0,0,0.4);
  --shadow-focus: 0 0 0 4px rgba(42,122,130,0.35);

  /* Brand shifts brighter in dark for accessibility */
  --brand-500: #2ba3ae;
  --brand-400: #5cc2cb;
  --brand-100: #14363a;
  --brand-50:  #0a1f22;

  --accent-500: #5ba3ff;
  --accent-100: #1a2a42;

  /* Legacy alias remap */
  --bm-teal:       var(--brand-500);
  --bm-teal-light: var(--brand-100);
  --bm-bg:         var(--surface-sunken);
  --bm-white:      var(--surface-raised);
  --bm-ink:        var(--text-primary);
  --bm-body:       var(--text-primary);
  --bm-muted:      var(--text-secondary);
  --bm-border:     var(--border-default);
}

/* Respect OS preference if user hasn't explicitly chosen */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
  }
}

html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }