/* =========================================================================
   MAGNET DESIGN SYSTEM — TOKENS
   The single source of truth. Everything downstream references these vars.
   Scale: 4px base. Color: cool-neutral grays + violet primary + semantics.
   ========================================================================= */

:root {
  /* ---- Brand / Primary (violet) ------------------------------------ */
  --primary-50:  #f4f0fe;
  --primary-100: #e9e1fd;
  --primary-200: #d3c2fb;
  --primary-300: #b69bf7;
  --primary-400: #9a72f3;
  --primary-500: #7c4def;
  --primary-600: #6d3df0;   /* main action / active */
  --primary-700: #5a29d6;
  --primary-800: #4a22ac;
  --primary-900: #3c1e87;

  /* ---- Neutral (cool gray) ----------------------------------------- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f8f8fb;
  --gray-100: #f3f3f7;
  --gray-150: #ededf2;
  --gray-200: #e6e6ec;   /* hairline borders */
  --gray-300: #d7d7df;
  --gray-400: #b6b6c2;
  --gray-500: #8c8c9a;   /* tertiary text / icons */
  --gray-600: #6a6a78;   /* secondary text */
  --gray-700: #4c4c59;
  --gray-800: #2f2f3a;
  --gray-900: #1b1b23;   /* headings */

  /* ---- Semantic ----------------------------------------------------- */
  --success-600: #18a558;
  --success-bg:  #e4f6ec;
  --danger-600:  #e5484d;
  --danger-bg:   #fdeaea;
  --warning-600: #df900b;
  --warning-bg:  #fbf0d9;
  --info-600:    #2563eb;
  --info-bg:     #e6eefd;

  /* ---- Category / badge tints (light) ------------------------------- */
  --cat-demo-bg:    #fbf0d9;  --cat-demo-fg:    #b9760c;
  --cat-review-bg:  #e2f5ea;  --cat-review-fg:  #138a52;
  --pri-high-bg:    #fbe7ec;  --pri-high-fg:    #cf365a;
  --pri-medium-bg:  #faf0d9;  --pri-medium-fg:  #c2790f;
  --pri-low-bg:     #e2f5ea;  --pri-low-fg:     #138a52;
  --cat-mobile-bg:  #f1ecfe;  --cat-mobile-fg:  #8b5cf6;

  /* lead-source channel tints (the Source chips in the leads table + panel) */
  --chan-meta-bg:   #e8f1fe;  --chan-meta-fg:   #0e5fcb;
  --chan-web-bg:    #e6f6f0;  --chan-web-fg:    #0b7a55;
  --chan-funnel-bg: #fdf1e0;  --chan-funnel-fg: #9a5a08;
  --chan-manual-bg: #eef2f6;  --chan-manual-fg: #475569;

  /* file-type icon colours */
  --file-pdf:   #d8453b;
  --file-sheet: #1a8a52;
  --file-img:   #b9760c;
  --file-fig:   #a259ff;

  /* empty-state illustration */
  --illus-paper:  #ffffff;
  --illus-paper2: #f1f1f4;
  --illus-line:   #c4c4cf;
  --illus-line2:  #cdced8;
  --illus-grid:   #d7d7df;

  /* foreground that sits ON the accent/primary surface (flips for light accents) */
  --on-primary: #ffffff;
  /* accent-tinted glow used under primary actions (overridden per-accent by JS) */
  --primary-glow: 0 1px 2px rgba(74, 34, 172, 0.28), inset 0 1px 0 rgba(255,255,255,0.14);
  --primary-glow-lg: 0 6px 16px rgba(109, 61, 240, 0.32);

  /* ---- CRM stage colours ------------------------------------------- */
  --stage-leads:     #b6b6c2;
  --stage-discovery: #6d3df0;
  --stage-demo:      #f0a63a;
  --stage-won:       #22a565;

  /* ---- Surfaces ----------------------------------------------------- */
  --canvas:        #dcdce1;   /* gray frame behind the app */
  --surface:       #ffffff;   /* cards, panels */
  --surface-sidebar: #f9f9f9; /* left navigation rail */
  --surface-field:   #f2f2f2; /* filled inputs / account switcher / soft buttons */
  --surface-lane:    #f9f9f9; /* kanban column lanes */
  --surface-event:   color-mix(in srgb, var(--primary-600) 3%, var(--surface)); /* calendar event blocks */

  /* sidebar nav item states (shared) */
  --nav-active-bg:   #f2f2f2;
  --nav-hover-bg:    #f3f3f3;
  --nav-active-fg:   #121212;

  /* dashboard metric cards */
  --metric-border:   #e9e8ed;
  --metric-up-bg:    #eafdf9;
  --metric-up-fg:    #3a9b80;
  --metric-down-bg:  #fdecec;
  --metric-meta:     #545768;
  --surface-sunk:  #f8f8fb;   /* table header, sunk areas */
  /* hover/selected surfaces derive from the ACCENT (applyAccent overrides
     --primary-*), so they re-tint with the user's accent instead of staying
     violet. Mix ratios match the old hand-tuned values for the default accent. */
  --surface-hover: color-mix(in srgb, var(--primary-600) 7%, var(--surface));          /* row / item hover */
  --surface-hover-strong: color-mix(in srgb, var(--primary-600) 11%, var(--surface));  /* selected + hover */
  --overlay-dark:  #29233f;   /* bulk-select toolbar */
  --sheet-scrim:   rgba(11, 11, 15, 0.45);   /* one dim shade for every bottom sheet */

  /* iOS "liquid glass" controls (mobile task-sheet header buttons) — a frosted,
     translucent circle that mirrors the system keyboard's round buttons. The
     translucency lets the page tint show through the blur, so it reads as glass. */
  --glass-btn-bg:     rgba(255, 255, 255, 0.6);
  --glass-btn-border: rgba(255, 255, 255, 0.55);
  --glass-btn-shadow: 0 1px 4px rgba(17, 17, 26, 0.12), 0 0 0 0.5px rgba(17, 17, 26, 0.04), inset 0 0.5px 0 rgba(255, 255, 255, 0.7);
  --glass-btn-active: rgba(120, 120, 128, 0.24);

  /* ---- Text --------------------------------------------------------- */
  --text-strong: var(--gray-900);
  --text:        var(--gray-800);
  --text-muted:  #606062;     /* secondary text */
  --text-soft:   var(--gray-500);
  --text-invert: #ffffff;

  /* ---- Border ------------------------------------------------------- */
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-faint:  #ebebeb;   /* hairline dividers inside cards / lanes */

  /* ---- Typography --------------------------------------------------- */
  /* System font stack — renders as SF on iOS/macOS for a native look, with
     platform-native fallbacks elsewhere. No webfont download / FOUT. */
  --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

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

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-normal:1.5;
  --leading-relaxed:1.6;

  /* ---- Spacing (4px base) ------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

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

  /* ---- Shadows ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(27, 27, 35, 0.05);
  --shadow-sm: 0 1px 3px rgba(27, 27, 35, 0.06), 0 1px 2px rgba(27, 27, 35, 0.04);
  --shadow-md: 0 4px 12px rgba(27, 27, 35, 0.07), 0 2px 4px rgba(27, 27, 35, 0.04);
  --shadow-lg: 0 12px 32px rgba(27, 27, 35, 0.12), 0 4px 8px rgba(27, 27, 35, 0.06);
  --shadow-pop: 0 16px 40px rgba(41, 35, 63, 0.28);
  --ring-primary: 0 0 0 3px var(--primary-100);

  /* ---- Buttons ------------------------------------------------------ */
  --btn-fg:            #26262a;  /* surface button text / icon / chevron */
  --btn-card-fg:       #0d0d0d;  /* card-action text / icon / chevron */
  --btn-height:        37px;
  --btn-pad-x:         12px;
  --btn-radius:        var(--radius-md);
  --btn-icon-size:     17px;
  --btn-gap:           var(--space-2);
  --btn-shadow:        0 1px 2px rgba(27,27,35,0.10), 0 1px 1px rgba(27,27,35,0.04);
  --btn-shadow-card:   0 1px 2px rgba(27,27,35,0.06);
  --split-divider-h:   22px;
  --split-divider:     var(--gray-200);

  /* ---- Segmented control ------------------------------------------- */
  --seg-track:         #f9f9f9;
  --seg-active:        #ffffff;
  --seg-active-border: #ededed;
  --seg-active-shadow: 0 1px 2px rgba(27, 27, 35, 0.08);

  /* ---- Motion ------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* iOS-style decelerate curve for sheets / slides — strong ease-out with no
     bounce, mirroring UIKit modal presentation. Feels native on mobile. */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 260ms;

  /* ---- Bottom-sheet motion (app-wide) ------------------------------- *
     One vocabulary for every bottom sheet: open is a touch slower and
     spring-ish (decelerate, no bounce); close is quicker and accelerates
     away; the dim overlay fades fastest so it never lags the sheet. The
     shared drag gestures (drawerShell.wireSheetDrag / mountDrawer) reuse
     these for spring-back + flick-dismiss so motion reads identically
     whether a sheet is tapped open or thrown shut. */
  --motion-sheet-open:  320ms;
  --motion-sheet-close: 220ms;
  --motion-overlay:     180ms;
  --ease-enter:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
  --ease-spring-ish: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Layout ------------------------------------------------------- */
  --sidebar-w: 264px;
  --topbar-h:  73px;
  /* Shared app-shell rows — sidebar and main use the SAME heights so their
     bottom borders align by construction (no manual offsets). */
  --shell-header-height:  66px;   /* row 1: brand  ⇄  page header */
  --shell-toolbar-height: 66px;   /* row 2: account ⇄  page toolbar */
  --z-sticky:  20;
  --z-toolbar: 40;
  --z-popover: 60;

  /* ---- Reporting chart (shared ReportingChartCard component) -------- */
  --chart-bar-fill-top:    #ebebf2;   /* light grey bar — gradient top */
  --chart-bar-fill-bottom: #f7f7fb;   /* light grey bar — gradient bottom */
  --chart-bar-sel-top:     var(--primary-400);   /* selected bar — accent top */
  --chart-bar-sel-bottom:  var(--primary-100);   /* selected bar — accent bottom */
  --chart-bar-cap:         var(--primary-500);   /* purple top cap */
  --chart-bar-cap-sel:     var(--primary-600);   /* selected/hover cap */
  --chart-grid:            #ececf1;   /* dashed horizontal grid lines */
  --chart-axis-line:       #e6e6ec;   /* x / y axis lines */
  --chart-axis-text:       var(--text-soft);
  --chart-trend:           #cdcdd6;   /* dotted trend line */
  --chart-point:           #1b1b23;   /* black selected point */
  --chart-guide:           #1b1b23;   /* vertical dashed selected guide */
  --chart-tip-bg:          var(--surface);
  --chart-tip-border:      var(--border);
  --chart-tip-shadow:      var(--shadow-lg);
  --chart-pad:             var(--space-5);
}

/* =========================================================================
   DARK THEME — remaps the semantic token layer. Components reference tokens,
   so flipping these values re-themes the whole app.
   ========================================================================= */
html[data-theme="dark"] {
  /* inverted neutral ramp: gray-0 = darkest surface … gray-900 = lightest text */
  --gray-0:   #17171c;
  --gray-25:  #1a1a20;
  --gray-50:  #1e1e25;
  --gray-100: #24242c;
  --gray-150: #2a2a33;
  --gray-200: #32323d;   /* hairline borders */
  --gray-300: #40404c;
  --gray-400: #5b5b69;
  --gray-500: #8b8b98;   /* tertiary text / icons */
  --gray-600: #a7a7b4;   /* secondary text */
  --gray-700: #c6c6d0;
  --gray-800: #e4e4ea;   /* body text */
  --gray-900: #f6f6f9;   /* headings */

  /* semantic tints — muted for dark backgrounds */
  --success-600: #34c172;
  --success-bg:  #14301f;
  --danger-600:  #f0696e;
  --danger-bg:   #38191b;
  --warning-600: #e7a52c;
  --warning-bg:  #33270f;
  --info-600:    #5b8cf0;
  --info-bg:     #1b2741;

  /* category / badge tints (dark) */
  --cat-demo-bg:    #33270f;  --cat-demo-fg:    #e7a52c;
  --cat-review-bg:  #14301f;  --cat-review-fg:  #34c172;
  --pri-high-bg:    #38191b;  --pri-high-fg:    #f0696e;
  --pri-medium-bg:  #33270f;  --pri-medium-fg:  #e7a52c;
  --pri-low-bg:     #14301f;  --pri-low-fg:     #34c172;
  --cat-mobile-bg:  #241b3a;  --cat-mobile-fg:  #a78bfa;

  /* lead-source channel tints (dark — same family as the semantic tints) */
  --chan-meta-bg:   #1b2741;  --chan-meta-fg:   #5b8cf0;
  --chan-web-bg:    #14301f;  --chan-web-fg:    #34c172;
  --chan-funnel-bg: #33270f;  --chan-funnel-fg: #e7a52c;
  --chan-manual-bg: #262b33;  --chan-manual-fg: #9aa4b2;

  /* file-type icon colours (brightened for dark) */
  --file-pdf:   #f0696e;
  --file-sheet: #34c172;
  --file-img:   #e7a52c;
  --file-fig:   #b98cff;

  /* empty-state illustration (dark) */
  --illus-paper:  #2a2a33;
  --illus-paper2: #32323d;
  --illus-line:   #40404c;
  --illus-line2:  #3a3a45;
  --illus-grid:   #2c2c35;

  /* CRM stage colours (slightly brighter so they read on dark) */
  --stage-leads:     #6b6b78;
  --stage-discovery: #8b63f3;
  --stage-demo:      #f0b257;
  --stage-won:       #34c172;

  /* surfaces */
  --canvas:        #0e0e12;
  --surface:       #1c1c22;
  --surface-sidebar: #161619;
  --surface-field:   #26262e;
  --surface-lane:    #1f1f26;
  --surface-event:   color-mix(in srgb, var(--primary-500) 6%, var(--surface));

  /* sidebar nav item states */
  --nav-active-bg:   #26262e;
  --nav-hover-bg:    #222229;
  --nav-active-fg:   #f6f6f9;

  /* dashboard metric cards */
  --metric-border:   #2c2c35;
  --metric-up-bg:    #122a26;
  --metric-up-fg:    #4fc4a3;
  --metric-down-bg:  #34191a;
  --metric-meta:     #a7a7b4;
  --surface-sunk:  #1f1f26;
  --surface-hover: color-mix(in srgb, var(--primary-500) 9%, var(--surface));
  --surface-hover-strong: color-mix(in srgb, var(--primary-500) 16%, var(--surface));
  --overlay-dark:  #0c0c10;

  /* iOS liquid-glass controls — dark variant: a smoked translucent circle. */
  --glass-btn-bg:     rgba(60, 60, 67, 0.5);
  --glass-btn-border: rgba(255, 255, 255, 0.14);
  --glass-btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
  --glass-btn-active: rgba(255, 255, 255, 0.16);

  /* text */
  --text-muted:  #a3a3af;

  /* borders */
  --border-faint:  #28282f;
  --split-divider: var(--gray-200);

  /* segmented control — active pill sits ABOVE the track (lighter) */
  --seg-track:         #24242c;
  --seg-active:        #3a3a45;
  --seg-active-border: #46464f;
  --seg-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);

  /* shadows — deeper on dark */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.6);
  --ring-primary: 0 0 0 3px rgba(124, 77, 239, 0.35);

  /* buttons */
  --btn-fg:      #e4e4ea;
  --btn-card-fg: #f6f6f9;
  --btn-shadow:        0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.25);
  --btn-shadow-card:   0 1px 2px rgba(0,0,0,0.3);

  /* reporting chart */
  --chart-bar-fill-top:    #2a2a33;
  --chart-bar-fill-bottom: #222229;
  --chart-bar-sel-top:     var(--primary-600);
  --chart-bar-sel-bottom:  color-mix(in srgb, var(--primary-600) 28%, var(--surface));
  --chart-grid:            #26262e;
  --chart-axis-line:       #2c2c35;
  --chart-trend:           #3a3a45;
  --chart-point:           #f6f6f9;
  --chart-guide:           #f6f6f9;
}