/* ==========================================================================
   Design tokens — MyCRM design system (design-system/mycrm/MASTER.md, UX_REFERENCE_PLAN.md): white canvas,
   hairline borders, one teal accent, neutral greys, Manrope for everything (light for titles and figures).

   Three layers, each built only on the one before it:
     1. Semantic tokens  (--color-*, --font-*, --text-*, --space-*, --radius-*, --shadow-*, --state-*, --motion-*)
        The only place raw values live. Light on :root, dark on html.dark.
     2. Legacy aliases   the names app.css already uses (--canvas, --accent, --s4, ...) re-pointed at layer 1,
        so every existing screen follows the system without each rule being rewritten at once.
     3. Role tokens      the app's component roles (--action, --link, --focus, ...).
   New and redesigned components use layer 1 directly; layers 2–3 stay for screens not yet redesigned.

   Theme: html.dark (set by js/theme.js and the pre-paint script in index.html / form.html); the choice is
   kept in localStorage "crm-theme", otherwise the device setting is followed.
   Fonts: Manrope is linked from Google Fonts in index.html / form.html; system fonts until it loads.

   Contrast (WCAG 2.1, checked): body text 17.8:1, secondary text 7.7:1, subtle text 5.0:1 (on cards/canvas only),
   teal links 6.0:1, white on the teal fill 5.1:1, control outlines 3.3:1.
   Dark: text 15.8:1, secondary 5.8:1, teal links 9.1:1, white on the teal fill 5.1:1, control outlines 3.5:1.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. semantic tokens — light */
:root {
  color-scheme: light;

  /* colour: surfaces */
  --color-background: #FCFCFD;        /* page canvas: near white, so white cards still read */
  --color-card: #FFFFFF;              /* cards, tables, panels */
  --color-muted: #F9FAFB;             /* table header, quiet fills */
  --color-muted-strong: #F2F4F7;      /* pressed / selected-quiet fill, active nav */
  --color-overlay: rgba(16, 24, 40, .45);

  /* colour: text */
  --color-foreground: #101828;        /* 17.3:1 on background */
  --color-card-foreground: #101828;
  --color-muted-foreground: #475467;  /* 7.7:1 — secondary text, labels */
  --color-subtle-foreground: #667085; /* 5.0:1 on card — meta only */

  /* colour: lines */
  --color-border: #EAECF0;            /* hairlines, dividers, card edges */
  --color-border-strong: #D0D5DD;     /* secondary button edges, grid lines */
  --color-control-border: #868FA0;    /* inputs / checkboxes: 3.3:1 (WCAG 1.4.11) */

  /* colour: brand */
  --color-primary: #0E7C73;           /* teal: buttons, selection, focus — white text 5.1:1 */
  --color-primary-hover: #0B6B63;
  --color-primary-press: #095A53;
  --color-on-primary: #FFFFFF;
  --color-primary-text: #0E7066;      /* links and teal words: 6.0:1 */
  --color-primary-soft: #F0FDFA;      /* selected row / chip fill */
  --color-primary-soft-border: #99E6D8;
  --color-secondary: #14B8A6;
  --color-on-secondary: #000000;
  --color-accent: #0E7C73;            /* CTA: the same teal (one accent only) */
  --color-accent-hover: #0B6B63;
  --color-on-accent: #FFFFFF;
  --color-ring: #0E9384;

  /* colour: status — fill (dots, bars, solid cells), text (words on card), soft (tinted backgrounds) */
  --color-success: #059669;  --color-success-text: #047857;  --color-success-soft: #ECFDF5;  --color-success-border: #A7F3D0;
  --color-warning: #D97706;  --color-warning-text: #92400E;  --color-warning-soft: #FFFBEB;  --color-warning-border: #FDE68A;
  --color-destructive: #DC2626; --color-destructive-text: #B91C1C; --color-destructive-soft: #FEF2F2; --color-destructive-border: #FECACA;
  --color-on-destructive: #FFFFFF;
  --color-info: #2563EB;     --color-info-text: #1D4ED8;     --color-info-soft: #EFF6FF;     --color-info-border: #BFDBFE;
  --color-neutral: #667085;  --color-neutral-text: #344054;  --color-neutral-soft: #F2F4F7;  --color-neutral-border: #EAECF0;

  /* solid status cells in tables (text colour per cell, all >= 5.4:1) */
  --color-cell-info: #1D4ED8;    --color-cell-info-fg: #FFFFFF;
  --color-cell-success: #047857; --color-cell-success-fg: #FFFFFF;
  --color-cell-warning: #FBBF24; --color-cell-warning-fg: #422006;
  --color-cell-danger: #B91C1C;  --color-cell-danger-fg: #FFFFFF;
  --color-cell-neutral: #EAECF0; --color-cell-neutral-fg: #344054;

  /* colour: navigation rail */
  --color-nav-bg: #FFFFFF;
  --color-nav-border: #EAECF0;
  --color-nav-text: #344054;
  --color-nav-label: #667085;
  --color-nav-hover: #F9FAFB;
  --color-nav-active-bg: #F2F4F7;      /* quiet grey, like the references */
  --color-nav-active-fg: #101828;

  /* colour: charts (teal leads, then hues far from it) */
  --color-chart-1: #0E9384; --color-chart-2: #2563EB; --color-chart-3: #D97706; --color-chart-4: #7C3AED;
  --color-chart-5: #DB2777; --color-chart-6: #4D7C0F; --color-chart-7: #5EC9BC; --color-chart-8: #667085; --color-chart-other: #D0D5DD;
  /* 1–6 checked with the dataviz palette validator (light, on #FCFCFD): all checks pass */

  /* typography: Manrope for everything: light (300) for titles and big figures, medium (500) for names and labels,
     semibold only for the rare emphasis; figures with tabular numbers.
     rem sizes so browser zoom and font settings carry through. Dense work tool: 14px body, 13px UI, 12px floor. */
  --font-heading: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: .75rem;      /* 12 — meta, column heads, badges (the floor) */
  --text-sm: .8125rem;    /* 13 — UI: buttons, tables, nav, labels */
  --text-base: .875rem;   /* 14 — body, inputs */
  --text-md: 1rem;        /* 16 — section headings */
  --text-lg: 1.125rem;    /* 18 — step / dialog titles */
  --text-xl: 1.375rem;    /* 22 — figures, page title on phones */
  --text-2xl: 1.625rem;   /* 26 — page title */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.2; --leading-heading: 1.3; --leading-body: 1.55;
  --tracking-heading: -0.015em;

  /* spacing (MASTER scale, plus two in-between steps the dense screens need) */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-sm-plus: 12px;
  --space-md: 16px;
  --space-md-plus: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* radii: controls 8, cards 12, dialogs 16 (MASTER) */
  --radius-xs: 4px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-dialog: 16px;
  --radius-pill: 999px;

  /* shadows: flat style — hairlines first, shadows only for things that float */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);   /* buttons and inputs only */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, .10), 0 8px 8px -4px rgba(16, 24, 40, .04);

  /* states */
  --state-hover: rgba(16, 24, 40, .035);         /* quiet hover on rows, ghost buttons */
  --state-press: rgba(16, 24, 40, .07);
  --state-selected-bg: var(--color-primary-soft);
  --state-selected-fg: var(--color-primary-text);
  --state-selected-border: var(--color-primary-soft-border);
  --state-focus-color: var(--color-ring);
  --state-focus-width: 2px;
  --state-focus-offset: 2px;
  --state-focus-ring: 0 0 0 4px rgba(14, 147, 132, .24);   /* halo around inputs (in addition to the border) */
  --state-disabled-opacity: .5;

  /* motion: 150–200ms colour/opacity changes, no layout-shifting transforms */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(.2, 0, 0, 1);

  /* sizes */
  --size-control: 36px;      /* buttons, inputs on desktop */
  --size-control-sm: 30px;
  --size-touch: 44px;        /* touch screens */
  --size-row: 48px;          /* table rows (two-line cells come in phase 3) */
}

/* ---------------------------------------------------------------- 1. semantic tokens — dark */
html.dark {
  /* Dark mode: the sign-in screen's look — near-black with a soft lime glow, the Monepik lime as the one accent,
     warm dark greys for surfaces (2026-11-12). Contrast on the card (#0F110D): text 17.3:1, muted 7.6:1, subtle 6.0:1,
     lime 14.8:1, near-black on lime 15.4:1, control borders 3.7:1. */
  color-scheme: dark;
  --color-background: #050605;
  --color-card: #0F110D;
  --color-muted: #171A14;
  --color-muted-strong: #1E221A;
  --color-overlay: rgba(2, 3, 2, .72);
  --color-foreground: #F4F5F1;
  --color-card-foreground: #F4F5F1;
  --color-muted-foreground: #A1A69A;
  --color-subtle-foreground: #8E9387;
  --color-border: #1F231C;
  --color-border-strong: #2B3027;
  --color-control-border: #6A7063;
  --color-primary: #C6F432;            /* the Monepik lime; near-black text on it 15.4:1 */
  --color-primary-hover: #D3F75E;
  --color-primary-press: #B3DE27;
  --color-primary-text: #C6F432;
  --color-primary-soft: rgba(198, 244, 50, .10);
  --color-primary-soft-border: rgba(198, 244, 50, .30);
  --color-on-primary: #0A0B07;
  --color-secondary: #C6F432;
  --color-accent: #C6F432;
  --color-accent-hover: #D3F75E;
  --color-on-accent: #0A0B07;
  --color-ring: #C6F432;

  --color-success: #10B981;  --color-success-text: #6EE7B7;  --color-success-soft: rgba(16, 185, 129, .14);  --color-success-border: rgba(110, 231, 183, .3);
  --color-warning: #F59E0B;  --color-warning-text: #FCD34D;  --color-warning-soft: rgba(245, 158, 11, .14);  --color-warning-border: rgba(252, 211, 77, .3);
  --color-destructive: #EF4444; --color-destructive-text: #FCA5A5; --color-destructive-soft: rgba(239, 68, 68, .14); --color-destructive-border: rgba(252, 165, 165, .3);
  --color-on-destructive: #FFFFFF;
  --color-info: #3B82F6;     --color-info-text: #93C5FD;     --color-info-soft: rgba(59, 130, 246, .14);     --color-info-border: rgba(147, 197, 253, .3);
  --color-neutral: #A1A69A;  --color-neutral-text: #D3D6CE;  --color-neutral-soft: #171A14;                 --color-neutral-border: #2B3027;

  --color-cell-neutral: #2B3027; --color-cell-neutral-fg: #F4F5F1;

  --color-nav-bg: #050605;
  --color-nav-border: #171A14;
  --color-nav-text: #D3D6CE;
  --color-nav-label: #8E9387;
  --color-nav-hover: rgba(244, 245, 241, .05);
  --color-nav-active-bg: rgba(198, 244, 50, .10);
  --color-nav-active-fg: #F4F5F1;

  --color-chart-1: #7AA21A; --color-chart-2: #3B82F6; --color-chart-3: #D97706; --color-chart-4: #8B5CF6;
  --color-chart-5: #DB2777; --color-chart-6: #0891B2; --color-chart-7: #A3CF2A; --color-chart-8: #8E9387; --color-chart-other: #2B3027;
  /* 1–6 checked with the dataviz palette validator (dark, on #0F110D): all checks pass */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, .55);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, .65);

  --state-hover: rgba(244, 245, 241, .045);
  --state-press: rgba(244, 245, 241, .08);
  --state-focus-ring: 0 0 0 4px rgba(198, 244, 50, .22);
}

/* touch screens: 44px targets */
@media (pointer: coarse) { :root { --size-control: var(--size-touch); } }

/* ---------------------------------------------------------------- 2. legacy aliases (names used across app.css) */
:root, html.dark {
  --canvas: var(--color-background);
  --surface: var(--color-card);
  --surface-2: var(--color-muted);
  --surface-press: var(--color-muted-strong);
  --separator: var(--color-border);
  --text-primary: var(--color-foreground);
  --text-secondary: var(--color-muted-foreground);
  --text-muted: var(--color-muted-foreground);
  --text-3: var(--color-control-border);
  --accent: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --accent-text: var(--color-primary-text);

  --brass: var(--color-primary);           /* the selected sidebar item's edge */



  --border: var(--color-border);
  --border-light: var(--color-border);
  --danger: var(--color-destructive);  --danger-text: var(--color-destructive-text);  --red-bg: var(--color-destructive-soft);
  --warning: var(--color-warning);     --warn-text: var(--color-warning-text);        --amber-bg: var(--color-warning-soft);
  --success: var(--color-success);     --success-text: var(--color-success-text);     --green-bg: var(--color-success-soft);
  --info: var(--color-info);           --info-text: var(--color-info-text);           --blue-bg: var(--color-info-soft);


  --cell-success: var(--color-cell-success); --cell-success-fg: var(--color-cell-success-fg);
  --cell-warning: var(--color-cell-warning); --cell-warning-fg: var(--color-cell-warning-fg);
  --cell-danger:  var(--color-cell-danger);  --cell-danger-fg:  var(--color-cell-danger-fg);
  --cell-info:    var(--color-cell-info);    --cell-info-fg:    var(--color-cell-info-fg);
  --cell-neutral: var(--color-cell-neutral); --cell-neutral-fg: var(--color-cell-neutral-fg);

  --bbs-rail-bg: var(--color-nav-bg); --bbs-rail-border: var(--color-nav-border); --bbs-hairline: var(--color-nav-border);
  --bbs-ink: var(--color-foreground); --bbs-link: var(--color-nav-text); --bbs-label: var(--color-nav-label); --bbs-icon: var(--color-nav-label);
  --bbs-hover-bg: var(--color-nav-hover); --bbs-active-bg: var(--color-nav-active-bg); --bbs-active-fg: var(--color-nav-active-fg);
  --bbs-avatar-bg: var(--color-primary); --bbs-focus: var(--color-ring);

  --font: var(--font-body);
  --mono: var(--font-code);

  --s1: var(--space-xs); --s2: var(--space-sm); --s3: var(--space-sm-plus); --s4: var(--space-md); --s5: var(--space-md-plus);
  --s6: var(--space-lg); --s7: 28px; --s8: var(--space-xl);
  --radius: var(--radius-dialog); --radius-sm: var(--radius-control); --radius-md: var(--radius-card);
  --shadow: var(--shadow-sm);
  --focus-ring: var(--state-focus-ring);
}

:root {

  --role-partnership-manager: #6D28D9;

  --sidebar-width: 216px; --sidebar-collapsed-width: 64px; --sidebar-transition: var(--motion-base) ease;
  --appbar-h: 56px;--tap-target-min: var(--size-touch); --modal-sheet-radius: 20px;
}
html.dark {

  --role-partnership-manager: #C4B5FD;
}

/* ---------------------------------------------------------------- 3. role tokens (the app's component roles) */
:root {
  /* surfaces */
  --bg: var(--canvas);
  --nav-bg: var(--bbs-rail-bg);
  --raised: var(--surface-2);

  --divider: var(--border);
  --control-border: var(--color-control-border);
  /* text */
  --text: var(--text-primary);
  --text-faint: var(--text-secondary);
  /* accent */
  --action: var(--accent);
  --action-on: var(--color-on-primary);

  --action-tint: var(--color-primary-soft);
  --action-border: var(--color-primary-soft-border);
  --link: var(--accent-text);
  --focus: var(--state-focus-color);
  /* status */
  --warning-text: var(--warn-text);
  --error: var(--danger);
  --error-text: var(--danger-text);
  --success-tint: var(--green-bg);  --success-border: var(--color-success-border);
  --warning-tint: var(--amber-bg);  --warning-border: var(--color-warning-border);
  --error-tint:   var(--red-bg);    --error-border:   var(--color-destructive-border);
  --link-tint:    var(--blue-bg);   --info-border:    var(--color-info-border);
  --neutral: var(--text-secondary); --neutral-tint: var(--color-neutral-soft); --neutral-border: var(--color-neutral-border);
  --on-info: var(--color-on-primary);
  --on-error: var(--color-on-destructive);
  --error-solid: var(--color-destructive-text);
  --accent-2: var(--role-partnership-manager);
  --accent-2-text: var(--role-partnership-manager);
  /* interaction tints */
  --hover: var(--state-hover);
  --press: var(--state-press);
  --overlay: var(--color-overlay);
  --glass: color-mix(in srgb, var(--canvas) 88%, transparent);
  /* depth: flat — no gradients or glows */
  --grad-page: none;
  --grad-nav: none;
  --glow-focal: none;
  --shadow-small: var(--shadow-sm);
  --shadow-raised: var(--shadow-sm);

  --shadow-overlay: var(--shadow-lg);
  /* charts */
  --chart-1: var(--color-chart-1); --chart-2: var(--color-chart-2); --chart-3: var(--color-chart-3); --chart-4: var(--color-chart-4);
  --chart-5: var(--color-chart-5); --chart-6: var(--color-chart-6); --chart-7: var(--color-chart-7); --chart-8: var(--color-chart-8);
  --chart-other: var(--color-chart-other);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* typography roles */
  --font-display: var(--font-heading);
  --font-mono:    var(--font-body);      /* figures use the body font with tabular numbers */
  --fs-hero:  var(--text-2xl);
  --fs-h1:    var(--fs-hero);
  --fs-title-sm: var(--text-xl);
  --fs-h2:    var(--text-lg);
  --fs-h3:    var(--text-md);
  --fs-body:  var(--text-base);
  --fs-small: var(--text-sm);
  --fs-data:  var(--fs-small);
  --fs-micro: var(--text-xs);
  --fs-figure: var(--text-xl);
  --lh-body:  var(--leading-body);
  --lh-heading: var(--leading-heading);
  --lh-tight: var(--leading-tight);
  --track-display: var(--tracking-heading);
  --track-label:   .01em;






  /* motion */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --dur-fast:  var(--motion-base);
  --dur:       250ms;
  --dur-page:  var(--motion-base);
  --dur-enter: 400ms;
  --stagger:   60ms;
  --enter-y:   12px;

  /* layout */
  --container: 1400px;
  --gutter:    clamp(1rem, 3vw, 2rem);
  --rail-w:    var(--sidebar-width);
  --rail-w-collapsed: var(--sidebar-collapsed-width);
  --bar-h:     var(--appbar-h);
  --tap:       40px;   /* standard control height; 44px on touch screens */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* z-index contract */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   500;
}
html.dark {
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394969C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* touch screens: 44px targets */
@media (pointer: coarse) { :root { --tap: var(--tap-target-min); } }

/* ==========================================================================
   4. Redesign tokens (UX_REDESIGN_PLAN.md §3.1) — status families, deal-stage ramp, priority, due dates, avatars.
   Each family: -fill (dots, bars), -text (words on card, >= 4.5:1), -soft (tinted background), -border.
   Status is never shown by colour alone: badges always carry their word, priority and due dates an icon too.
   ========================================================================== */
:root {
  /* status families */
  --status-new-fill: #7C3AED;      --status-new-text: #6D28D9;      --status-new-soft: #F5F3FF;      --status-new-border: #DDD6FE;
  --status-progress-fill: #2563EB; --status-progress-text: #1D4ED8; --status-progress-soft: #EFF6FF; --status-progress-border: #BFDBFE;
  --status-success-fill: #059669;  --status-success-text: #047857;  --status-success-soft: #ECFDF5;  --status-success-border: #A7F3D0;
  --status-hold-fill: #D97706;     --status-hold-text: #92400E;     --status-hold-soft: #FFFBEB;     --status-hold-border: #FDE68A;
  --status-lost-fill: #DC2626;     --status-lost-text: #B91C1C;     --status-lost-soft: #FEF2F2;     --status-lost-border: #FECACA;
  --status-inactive-fill: #667085; --status-inactive-text: #344054; --status-inactive-soft: #F2F4F7; --status-inactive-border: #EAECF0;

  /* deal stages: one blue ramp for 1–5 (progress), green when connected, amber hold, red lost. Text on fill >= 4.5:1. */
  --stage-1: #DBEAFE; --stage-1-fg: #1E3A8A;
  --stage-2: #BFDBFE; --stage-2-fg: #1E3A8A;
  --stage-3: #93C5FD; --stage-3-fg: #1E3A8A;
  --stage-4: #2563EB; --stage-4-fg: #FFFFFF;   /* plan said #3B82F6; white on it is 3.7:1, so the next shade (5.2:1) */
  --stage-5: #1E40AF; --stage-5-fg: #FFFFFF;
  --stage-connected: #047857; --stage-connected-fg: #FFFFFF;
  --stage-hold: #FBBF24; --stage-hold-fg: #422006;
  --stage-lost: #B91C1C; --stage-lost-fg: #FFFFFF;

  /* task priority (word always shown; urgent/high also get a flag icon) */
  --priority-urgent: #B91C1C; --priority-urgent-fg: #FFFFFF;
  --priority-high-text: #C2410C; --priority-high-soft: #FFF7ED; --priority-high-border: #FED7AA;
  --priority-medium-text: #1D4ED8; --priority-medium-soft: #EFF6FF; --priority-medium-border: #BFDBFE;
  --priority-low-text: #344054; --priority-low-soft: #F2F4F7; --priority-low-border: #EAECF0;

  /* due dates */
  --due-overdue-text: #B91C1C; --due-overdue-soft: #FEF2F2;
  --due-today-text: #92400E;   --due-today-soft: #FFFBEB;
  --due-soon-text: #1D4ED8;    --due-soon-soft: #EFF6FF;
  --due-later-text: #475467;   --due-later-soft: transparent;

  /* avatars: a person keeps one colour (hash of their id). All carry white initials at >= 4.5:1. */
  --avatar-1: #1D4ED8; --avatar-2: #047857; --avatar-3: #B45309; --avatar-4: #6D28D9;
  --avatar-5: #0E7490; --avatar-6: #BE123C; --avatar-7: #4D7C0F; --avatar-8: #475569;
  --avatar-fg: #FFFFFF;

  /* top bar */
  --topbar-search-w: 420px;
}
html.dark {
  --status-new-fill: #A78BFA;      --status-new-text: #C4B5FD;      --status-new-soft: rgba(167, 139, 250, .14); --status-new-border: rgba(196, 181, 253, .3);
  --status-progress-fill: #60A5FA; --status-progress-text: #93C5FD; --status-progress-soft: rgba(96, 165, 250, .14); --status-progress-border: rgba(147, 197, 253, .3);
  --status-success-fill: #34D399;  --status-success-text: #6EE7B7;  --status-success-soft: rgba(52, 211, 153, .14); --status-success-border: rgba(110, 231, 183, .3);
  --status-hold-fill: #FBBF24;     --status-hold-text: #FCD34D;     --status-hold-soft: rgba(251, 191, 36, .14);  --status-hold-border: rgba(252, 211, 77, .3);
  --status-lost-fill: #F87171;     --status-lost-text: #FCA5A5;     --status-lost-soft: rgba(248, 113, 113, .14); --status-lost-border: rgba(252, 165, 165, .3);
  --status-inactive-fill: #94969C; --status-inactive-text: #CECFD2; --status-inactive-soft: #1F242F;            --status-inactive-border: #333741;

  --stage-1: #1E3A8A; --stage-1-fg: #DBEAFE;
  --stage-2: #1E40AF; --stage-2-fg: #DBEAFE;
  --stage-3: #1D4ED8; --stage-3-fg: #FFFFFF;
  --stage-4: #2563EB; --stage-4-fg: #FFFFFF;
  --stage-5: #3B82F6; --stage-5-fg: #0B1120;
  --stage-connected: #10B981; --stage-connected-fg: #04261A;
  --stage-hold: #F59E0B; --stage-hold-fg: #1C1003;
  --stage-lost: #DC2626; --stage-lost-fg: #FFFFFF;   /* 4.8:1 */

  --priority-urgent: #DC2626; --priority-urgent-fg: #FFFFFF;
  --priority-high-text: #FDBA74; --priority-high-soft: rgba(251, 146, 60, .14); --priority-high-border: rgba(253, 186, 116, .3);
  --priority-medium-text: #93C5FD; --priority-medium-soft: rgba(96, 165, 250, .14); --priority-medium-border: rgba(147, 197, 253, .3);
  --priority-low-text: #CECFD2; --priority-low-soft: #1F242F; --priority-low-border: #333741;

  --due-overdue-text: #FCA5A5; --due-overdue-soft: rgba(248, 113, 113, .14);
  --due-today-text: #FCD34D;   --due-today-soft: rgba(251, 191, 36, .14);
  --due-soon-text: #93C5FD;    --due-soon-soft: rgba(96, 165, 250, .14);
  --due-later-text: #94969C;
}