/*
  Feinh Pro product tokens (UI v2), light theme.
  The only file allowed to hold raw values. Every other stylesheet reads these.
  Brand kit v1.1 colours and fonts; product type scale (not the marketing scale).
  RTL: components use logical properties only (inline-start/end, block-start/end).

  Design system pass (2 Nov 2026, review/system.md section A): one teal scale and one navy-tinted neutral scale anchor
  every role below. Brand teal #0E9472 and navy #0B1B2B are unchanged. Components read ROLE tokens (text-*, surface-*,
  border-*, success-*, status-*, chart-*), never the scales or the brand primitives.
*/

/* Fonts are self hosted in the build (no Google Fonts call). Paths are relative to this file.
   Product UI uses 400 and 600; 500 and 700 files ship too (b, strong, marketing headings) so no weight is ever faked. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ui/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ui/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ui/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ui/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ui/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ui/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ui/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ui/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ui/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ui/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ui/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ui/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF; }

:root {
  /* ---------- Scales (primitives: only this file reads them) ---------- */
  /* Brand teal. 500 is the brand mark (graphics only, 3.82:1); 600 is the ink (text, links, white text on it 5.30:1). */
  --teal-50: #ECF8F4;  --teal-100: #D2F0E6;  --teal-200: #A8E0CE;  --teal-300: #6FCBB0;  --teal-400: #34B08E;
  --teal-500: #0E9472; --teal-600: #0B7A5E;  --teal-700: #08624B;  --teal-800: #064D3B;  --teal-900: #04382B;
  --teal-on-navy: #7FD1B8;   /* 9.71:1 on navy */
  /* Navy-tinted neutral (hue about 210). Contrast on white / on the canvas (#F4F6F8):
     400 3.71 / 3.43 (control borders), 500 4.56 (placeholder, icons), 600 5.68 / 5.24 (tertiary), 700 7.69 / 7.10 (secondary). */
  --neutral-0: #FFFFFF;   --neutral-25: #FAFBFC;  --neutral-50: #F4F6F8;  --neutral-100: #EDF1F5; --neutral-200: #E2E8EF;
  --neutral-300: #CBD3DD; --neutral-400: #7A8693; --neutral-500: #6B7785; --neutral-600: #5B6878; --neutral-700: #475467;
  --neutral-800: #33475B; --neutral-900: #0B1B2B;
  /* Navy surfaces (the hero, the active nav pill, the primary button, tooltips) */
  --navy-950: #050F19;  --navy-900: #0B1B2B;  --navy-800: #13283C;  --navy-700: #1A2D41;
  --navy-line: #23384C;   /* dividers on navy */
  --navy-muted: #8FA3B5;  /* 6.70:1 on navy */
  --navy-sub: #C5D0DA;    /* 11.12:1 on navy */

  /* ---------- Brand primitives (kept as names; do not use directly in components) ---------- */
  --brand-navy: var(--navy-900);
  --brand-navy-hover: var(--navy-700);
  --brand-navy-press: var(--navy-950);
  --brand-navy-pale: var(--neutral-100);
  --brand-green: var(--teal-500);          /* dot, verified, icons, map pin; text only at 24px+ */
  --brand-green-ink: var(--teal-600);      /* green text and links on light */
  --brand-green-ink-hover: var(--teal-700);
  --brand-green-on-navy: var(--teal-on-navy);
  --brand-green-pale: var(--teal-50);
  --brand-slate: var(--neutral-600);
  --whatsapp: #25D366;
  --whatsapp-hover: #1FBF5B;
  --whatsapp-ink: #062A1A;

  /* ---------- Type families: Outfit (Latin, numbers) and IBM Plex Sans Arabic ---------- */
  --font-latin: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Outfit", system-ui, sans-serif;
  --font-ui: var(--font-latin);
  --font-display: "Outfit", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-num: "Outfit", "IBM Plex Sans Arabic", system-ui, sans-serif;  /* numbers, prices, phones: Latin digits, tabular; Arabic units fall back to Plex */

  /* ---------- Weights: product UI uses two (400, 600) ---------- */
  --weight-regular: 400;
  --weight-strong: 600;
  --weight-medium: 500;   /* rare: marketing pages only */
  --weight-bold: 700;     /* b, strong; marketing headings */
  --weight-normal: var(--weight-regular);   /* old name */

  /* ---------- Type scale, Latin (Outfit). size / line height ---------- */
  --text-hero-size: 32px;     --text-hero-lh: 40px;      /* Today greeting and the hero line, nothing else */
  --text-kpi-size: 28px;      --text-kpi-lh: 34px;       /* KPI numbers in tiles and the navy hero (tabular) */
  --text-display-size: 24px;  --text-display-lh: 32px;   /* record name (person, property, deal) */
  --text-title-size: 20px;    --text-title-lh: 28px;     /* page title: one per screen, same place on every screen */
  --text-card-title-size: 16px; --text-card-title-lh: 24px;   /* card and section titles: never bigger than the page title */
  --text-section-size: 16px;  --text-section-lh: 24px;   /* section title, drawer title */
  --text-body-size: 14px;     --text-body-lh: 20px;      /* body, list row titles (600), buttons, inputs, form labels */
  --text-table-size: 13px;    --text-table-lh: 20px;     /* grid cells, list rows, nav */
  --text-meta-size: 12px;     --text-meta-lh: 16px;      /* meta, captions, chips, column headers (600 + 0.02em) */
  --text-fine-size: 11px;     --text-fine-lh: 16px;      /* the account menu's legal footer only */
  --text-micro-size: var(--text-meta-size);              /* old name */
  /* marketing pages that also live inside Feinh Pro (the mortgage calculator): fluid headings and a lead paragraph */
  --text-mkt-h1-size: clamp(2.25rem, 4.4vw, 3.75rem);
  --text-mkt-h2-size: clamp(1.75rem, 3vw, 2.4rem);
  --text-mkt-num-size: clamp(2rem, 4vw, 2.9rem);
  --text-lead-size: 19px;
  --text-lg-size: 18px;
  --text-xl-size: 22px;
  --text-eyebrow-tracking: 0.12em;                       /* Latin only: Arabic has no case, wide tracking breaks the joins */
  --tracking-header: 0.02em;                             /* column headers and meta labels */

  /* ---------- Type scale, Arabic (IBM Plex Sans Arabic): +1px size for equal visual weight, line height about 1.6 ---------- */
  --text-ar-hero-size: 32px;     --text-ar-hero-lh: 48px;
  --text-ar-kpi-size: 28px;      --text-ar-kpi-lh: 36px;
  --text-ar-display-size: 26px;  --text-ar-display-lh: 40px;
  --text-ar-title-size: 22px;    --text-ar-title-lh: 34px;
  --text-ar-card-title-size: 17px; --text-ar-card-title-lh: 28px;
  --text-ar-section-size: 17px;  --text-ar-section-lh: 28px;
  --text-ar-body-size: 15px;     --text-ar-body-lh: 24px;
  --text-ar-table-size: 14px;    --text-ar-table-lh: 22px;
  --text-ar-meta-size: 13px;     --text-ar-meta-lh: 20px;
  --text-ar-fine-size: 12px;     --text-ar-fine-lh: 18px;

  /* ---------- Spacing: 4px grid ---------- */
  --space-0: 0;
  --space-half: 2px;   /* hairline offsets only (chip inner, focus offset) */
  --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;
  --space-14: 56px;
  --space-16: 64px;

  /* ---------- Layout rhythm (one value per role, never per screen) ---------- */
  --page-pad-x: 24px;        /* inline padding of every page */
  --page-pad-top: 16px;      /* between the top bar and the page title: every title box starts at y = 48 + 16 = 64 */
  --section-gap: 24px;       /* between cards and sections on a page */
  --card-pad: 16px;          /* inside dense cards */
  --card-pad-lg: 20px;       /* inside dashboard cards */
  --stack-gap: 12px;         /* between fields, rows of chips */
  --inline-gap: 8px;         /* between buttons in a toolbar, icon to label */

  /* ---------- Sizes ---------- */
  --control-sm: 32px;        /* toolbar buttons, filter chips, inputs in toolbars; desktop touch minimum */
  --control-md: 36px;        /* default buttons and inputs */
  --control-lg: 44px;        /* the page's primary CTA, phone controls */
  --control-touch: var(--control-lg);   /* phone minimum (old name) */
  --row-compact: 32px;       /* data grid, Compact */
  --row-default: 40px;       /* data grid, Comfortable */
  --row-comfortable: var(--row-default);   /* old name */
  --row-relaxed: 48px;       /* lists with an avatar and one line */
  --row-2line: 56px;         /* two-line queue rows */
  --row-list-2line: var(--row-2line);      /* old name */
  --row-header: 36px;        /* grid column header: as tall as the rows under it */
  --phone-row: 56px;         /* every tappable list row on a phone */
  --topbar-h: 48px;
  --pageheader-h: 48px;
  --filterbar-h: 40px;
  --sidebar-w: 240px;
  --sidebar-rail-w: 56px;
  --panel-w: 432px;          /* record activity panel, lead detail minimum */
  --record-left-w: 300px;    /* v0.84 record: who they are */
  --record-right-w: 340px;   /* v0.84 record: deals, homes, people */
  --drawer-w: 480px;
  --modal-w: 560px;
  --palette-w: 640px;
  --phone-topbar-h: 52px;
  --phone-tabbar-h: 64px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-stroke: 1.5px;      /* rendered stroke at both sizes (non-scaling) */
  --avatar-xs: 20px;
  --avatar-sm: 24px;
  --avatar-md: 32px;
  --avatar-lg: 40px;
  --chip-h: 20px;            /* status chip (not interactive) */
  --badge-h: 18px;           /* count badge */
  --dot: 6px;
  --glyph: 12px;             /* stage status glyph (shape-coded ring), not an icon */
  --focus-ring-w: 2px;
  --kanban-col-w: 210px;
  --kanban-folded-w: 56px;
  --cal-hour-h: 48px;
  --content-max: 1680px;
  --search-w: 420px;
  /* ---------- Layout widths (screens) ---------- */
  --today-side-w: 360px;
  --queue-w: 520px;
  --cal-side-w: 272px;
  --cal-time-w: 56px;
  --col-sel: 40px; --col-wants: 156px; --col-area: 128px; --col-bud: 120px;
  --col-stage: 116px; --col-temp: 96px; --col-next: 176px; --col-last: 96px;  /* Customer column takes the rest */
  --phone-sheet-max: 88vh;

  --measure-short: 40ch;
  --measure-narrow: 18rem;
  --tracking-tight: -0.01em;

  /* ---------- Shape: one card radius for the whole CRM ---------- */
  --radius-xs: 4px;      /* checkbox, kbd, count badge, skeleton line, chart bars */
  --radius-sm: 6px;      /* buttons, inputs, selects, filter chips, menu items, segmented (renamed from --radius-md, 3 Nov 2026) */
  --radius-md: 10px;     /* toasts, thumbnails, rows and small cards inside a card (nested radius) */
  --radius-ctl: var(--radius-sm);
  --radius-inner: var(--radius-md);   /* old name */
  --radius-lg: 16px;     /* cards, panels, popovers, drawers, modals, kanban cards */
  --radius-xl: 20px;     /* the Today navy hero only */
  --radius-full: 999px;  /* status chips, avatars, toggles */
  --border-w: 1px;
  --border-w-strong: 1.5px;   /* the big inputs on marketing calculators */
  --radius-2xl: 28px;         /* marketing sections only */

  /* ---------- Colour roles: text ---------- */
  --text-primary: var(--neutral-900);     /* 17.4:1 on white */
  --text-secondary: var(--neutral-700);   /* 7.69:1 on white, 7.10:1 on the canvas: labels, meta, nav labels */
  --text-tertiary: var(--neutral-600);    /* 5.68:1 on white, 5.24:1 on the canvas: timestamps, hints, column headers */
  --text-strong-secondary: var(--neutral-800);   /* quiet button text */
  --text-placeholder: var(--neutral-500);
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: var(--navy-sub);
  --text-on-dark-muted: var(--navy-muted);
  --text-link: var(--teal-600);          /* 5.30:1 */
  --text-link-hover: var(--teal-700);
  --text-accent-on-dark: var(--teal-on-navy);
  --text-disabled: var(--neutral-500);   /* exempt from AA (WCAG 1.4.3 inactive components) */

  /* ---------- Colour roles: surfaces ---------- */
  --surface-canvas: var(--neutral-50);   /* the app canvas behind the cards */
  --surface-page: var(--neutral-0);      /* work area */
  --surface-sunken: var(--neutral-25);   /* table header, kanban columns, composer, sunken inside a card */
  --surface-raised: var(--neutral-0);    /* cards, popovers */
  --surface-subtle: var(--neutral-100);  /* hover row, neutral chip, segmented track */
  --surface-selected: var(--neutral-100);   /* selected row, active filter, today: pale navy (green is for marks only) */
  --surface-dark: var(--navy-900);       /* primary button, tooltip, toast */
  --surface-dark-row: var(--navy-800);   /* rows inside a navy surface */
  --surface-overlay: rgba(11, 27, 43, 0.40);
  --surface-skeleton: var(--neutral-100);
  --surface-skeleton-shine: var(--neutral-25);

  /* ---------- Colour roles: borders ---------- */
  --border-subtle: var(--neutral-100);   /* row dividers */
  --border-default: var(--neutral-200);  /* cards, panels, sidebar edge */
  --border-strong: var(--neutral-300);   /* secondary buttons, segmented outline */
  --border-control: var(--neutral-400);  /* inputs, checkboxes: 3.71:1 on white, 3.43:1 on the canvas (WCAG 1.4.11) */
  --border-focus: var(--teal-600);
  --border-on-dark: var(--navy-line);

  /* ---------- One accent ---------- */
  --accent: var(--navy-900);             /* active nav, selected tab underline, today: navy (green is for marks) */
  --accent-strong: var(--teal-500);      /* icons, dot, verified, focus glow */
  --accent-subtle: var(--neutral-100);
  --primary: var(--navy-900);            /* the one primary action per screen */
  --primary-hover: var(--navy-700);
  --primary-press: var(--navy-950);

  /* ---------- Semantic: bg / text / border / solid (white text on solid) / mark (dots, bars, icons only) ---------- */
  --success-bg: var(--teal-50);  --success-text: #0B6B53;  --success-border: #A8DCCB;  --success-solid: var(--teal-600);  --success-mark: var(--teal-500);
  --warning-bg: #FFF6E5;  --warning-text: #8A5300;  --warning-border: #F2D299;  --warning-solid: #9A5B00;  --warning-mark: #D98A00;
  --danger-bg:  #FDEEEE;  --danger-text:  #B42318;  --danger-border:  #F5C2BE;  --danger-solid:  #B42318;  --danger-mark: #D92D20;
  --danger-solid-hover: #9A1D13;
  --info-bg:    #EEF4FD;  --info-text:    #1D5BB8;  --info-border:    #BFD5F5;  --info-solid:    #2F6FDB;  --info-mark: #2F6FDB;
  --neutral-bg: var(--neutral-100); --neutral-text: var(--neutral-700); --neutral-border: var(--neutral-300); --neutral-solid: var(--neutral-700); --neutral-mark: var(--neutral-400);

  /* ---------- Status palette: 6 hues, muted by default. Chip = bg + text + 1px border of the SAME role ---------- */
  --status-neutral-bg: var(--neutral-bg);  --status-neutral-text: var(--neutral-text);  --status-neutral-dot: var(--neutral-mark);  --status-neutral-border: var(--neutral-border);
  --status-blue-bg:    var(--info-bg);     --status-blue-text:    var(--info-text);     --status-blue-dot:    var(--info-mark);     --status-blue-border:    var(--info-border);
  --status-violet-bg:  #F1EEFB;            --status-violet-text:  #5B3FB0;              --status-violet-dot:  #7A5CD6;              --status-violet-border:  #D9D0F5;
  --status-amber-bg:   var(--warning-bg);  --status-amber-text:   var(--warning-text);  --status-amber-dot:   var(--warning-mark);  --status-amber-border:   var(--warning-border);
  --status-green-bg:   var(--success-bg);  --status-green-text:   var(--success-text);  --status-green-dot:   var(--success-mark);  --status-green-border:   var(--success-border);
  --status-red-bg:     var(--danger-bg);   --status-red-text:     var(--danger-text);   --status-red-dot:     var(--danger-mark);   --status-red-border:     var(--danger-border);
  --status-info-bg: var(--status-blue-bg); --status-info-text: var(--status-blue-text);   /* old names */
  --status-action-bg:  var(--danger-solid); --status-action-text:  #FFFFFF;   /* the only strong status: Reply now / Overdue */

  /* ---------- ONE stage and status map (A3.4). Every stage chip, dot, column top and ring reads these. ----------
     New request = info. Contacted / Talking = neutral. Qualified / Ready to view = violet. Viewing booked / Viewing done,
     Offer / Negotiation = warning. Reserved / Contracted = success. Won / Closed = success SOLID (white text).
     Lost = neutral, struck, hollow dot. Overdue / Reply now = danger solid.
     NOTE: "Viewing booked" as a DEAL STAGE is warning; "Viewing" as a CALENDAR EVENT is success (--event-viewing-*).
     Two different things, two different words. Hot / Warm / Cold: icon + label only (never a filled chip). */
  --stage-new-bg: var(--info-bg);              --stage-new-fg: var(--info-text);              --stage-new-border: var(--info-border);              --stage-new-dot: var(--info-mark);
  --stage-contacted-bg: var(--neutral-bg);     --stage-contacted-fg: var(--neutral-text);     --stage-contacted-border: var(--neutral-border);     --stage-contacted-dot: var(--neutral-mark);
  --stage-qualified-bg: var(--status-violet-bg); --stage-qualified-fg: var(--status-violet-text); --stage-qualified-border: var(--status-violet-border); --stage-qualified-dot: var(--status-violet-dot);
  --stage-viewing-bg: var(--warning-bg);       --stage-viewing-fg: var(--warning-text);       --stage-viewing-border: var(--warning-border);       --stage-viewing-dot: var(--warning-mark);
  --stage-offer-bg: var(--warning-bg);         --stage-offer-fg: var(--warning-text);         --stage-offer-border: var(--warning-border);         --stage-offer-dot: var(--warning-mark);
  --stage-reserved-bg: var(--success-bg);      --stage-reserved-fg: var(--success-text);      --stage-reserved-border: var(--success-border);      --stage-reserved-dot: var(--success-mark);
  --stage-won-bg: var(--success-solid);        --stage-won-fg: #FFFFFF;                       --stage-won-border: var(--success-solid);            --stage-won-dot: var(--success-solid);
  --stage-lost-bg: var(--neutral-bg);          --stage-lost-fg: var(--neutral-600);           --stage-lost-border: var(--neutral-border);          --stage-lost-dot: var(--neutral-mark);
  --stage-overdue-bg: var(--danger-solid);     --stage-overdue-fg: #FFFFFF;                   --stage-overdue-border: var(--danger-solid);         --stage-overdue-dot: var(--danger-solid);
  --stage-progress: var(--neutral-700);        /* in-progress stages: one ink colour, the ring fill carries the stage */
  --stage-won: var(--success-mark); --stage-lost: var(--neutral-mark);   /* old names (rings, glyphs) */
  --temp-hot: var(--danger-text); --temp-warm: var(--warning-text); --temp-cold: var(--neutral-600);   /* temperature never reuses a stage hue: icon shape + label */

  /* ---------- Chart palette: 6 categorical + other (CVD-checked, every series 3:1 on white) ---------- */
  --chart-1: #0E9472;   /* the agent / you / won / positive */
  --chart-2: #2F6FDB;   /* leads, info */
  --chart-3: #B76E00;   /* viewings */
  --chart-4: #A23B8C;   /* plum (violet and blue collapse under protanopia) */
  --chart-5: #0B1B2B;   /* team average, target line */
  --chart-6: #D1495B;   /* lost, negative */
  --chart-other: #7A8693;   /* everything else, prior period */
  --chart-seq-1: var(--teal-50); --chart-seq-2: var(--teal-200); --chart-seq-3: var(--teal-400); --chart-seq-4: var(--teal-600); --chart-seq-5: var(--teal-800);
  --chart-div-neg-2: var(--danger-text); --chart-div-neg-1: var(--danger-border); --chart-div-0: var(--neutral-100); --chart-div-pos-1: var(--success-border); --chart-div-pos-2: var(--teal-600);
  --chart-grid: var(--neutral-100);
  --chart-axis: var(--neutral-600);
  --chart-target: var(--neutral-900);
  --chart-track: var(--neutral-200);
  /* Colour pickers (note text colours, event colours, team member tones): every swatch passes 4.5:1 as text on white and
     with white text on it. Read at runtime by fp-write.js and calendar.html (getComputedStyle), never typed there. */
  --swatch-navy: var(--navy-900);  --swatch-green: var(--teal-600);  --swatch-blue: var(--info-text);  --swatch-amber: var(--warning-solid);
  --swatch-plum: #A23B8C;          --swatch-red: var(--danger-solid);  --swatch-grey: var(--neutral-700);

  /* ---------- People: one soft colour per person, from the status palette (pale fill + its ink) ---------- */
  --hue-0-bg: var(--status-blue-bg);    --hue-0-ink: var(--status-blue-text);
  --hue-1-bg: var(--status-green-bg);   --hue-1-ink: var(--status-green-text);
  --hue-2-bg: var(--status-violet-bg);  --hue-2-ink: var(--status-violet-text);
  --hue-3-bg: var(--status-amber-bg);   --hue-3-ink: var(--status-amber-text);
  --hue-4-bg: var(--status-red-bg);     --hue-4-ink: var(--status-red-text);
  --hue-5-bg: var(--status-neutral-bg); --hue-5-ink: var(--status-neutral-text);

  /* ---------- Calendar event types (from the status palette). A viewing EVENT is success; a viewing STAGE is warning. ---------- */
  --event-viewing-bg: var(--status-green-bg);   --event-viewing-bar: var(--status-green-dot);   --event-viewing-text: var(--status-green-text);
  --event-meeting-bg: var(--status-blue-bg);    --event-meeting-bar: var(--status-blue-dot);    --event-meeting-text: var(--status-blue-text);
  --event-task-bg: var(--status-neutral-bg);    --event-task-bar: var(--status-neutral-text);   --event-task-text: var(--status-neutral-text);   /* slate, darker than its fill */
  --event-followup-bg: var(--status-violet-bg); --event-followup-bar: var(--status-violet-dot); --event-followup-text: var(--status-violet-text);   /* violet, never brown (founder, 29 Oct) */

  /* ---------- Today KPI tiles (1.28.1, founder-approved mock-up): a pale fill deepening down the tile, its status border, a
     deeper ink for the label and the line under the number (all AA on both ends of the fill), the number in the status text. ---------- */
  --kpi-red-bg: var(--danger-bg);     --kpi-red-bg-end: #FDE4E1;   --kpi-red-border: var(--danger-border);    --kpi-red-ink: #7A1A12;   --kpi-red-num: var(--danger-text);
  --kpi-amber-bg: #FFF8EB;            --kpi-amber-bg-end: #FDEFD3; --kpi-amber-border: var(--warning-border); --kpi-amber-ink: #6B4200; --kpi-amber-num: var(--warning-text);
  --kpi-green-bg: var(--success-bg);  --kpi-green-bg-end: #D9F1E8; --kpi-green-border: var(--success-border); --kpi-green-ink: var(--teal-800); --kpi-green-num: var(--success-text);
  --kpi-blue-bg: var(--info-bg);      --kpi-blue-bg-end: #DCE8FB;  --kpi-blue-border: var(--info-border);     --kpi-blue-ink: #143F80;  --kpi-blue-num: var(--info-text);
  --kpi-zero-bg: var(--surface-raised); --kpi-zero-bg-end: var(--surface-sunken); --kpi-zero-border: var(--border-default); --kpi-zero-ink: var(--text-secondary); --kpi-zero-num: var(--text-primary);
  --elevation-kpi: 0 1px 0 rgba(11, 27, 43, 0.04), 0 10px 24px -12px rgba(11, 27, 43, 0.28);   /* the Today KPI tiles: raised */
  --text-kpi-tile-size: 40px; --text-kpi-tile-lh: 44px;   /* the Today KPI tile numbers (tabular) */

  /* ---------- Elevation: border first, shadow second ---------- */
  --elevation-0: none;                                                                                  /* cards on white: border only */
  --elevation-1: 0 1px 2px rgba(11, 27, 43, 0.06), 0 2px 8px rgba(11, 27, 43, 0.04);                    /* cards on the canvas, kanban cards (always with a --border-default border) */
  --elevation-2: 0 4px 12px rgba(11, 27, 43, 0.10), 0 1px 3px rgba(11, 27, 43, 0.06);                  /* popover, menu, tooltip, toast */
  --elevation-3: 0 16px 40px rgba(11, 27, 43, 0.18), 0 2px 6px rgba(11, 27, 43, 0.08);                 /* modal, drawer, command palette */
  --elevation-hero: 0 10px 28px rgba(11, 27, 43, 0.18);                                                 /* the Today hero only */
  --elevation-float: 0 24px 60px -24px rgba(11, 27, 43, 0.25);                                          /* a marketing calculator card */
  --elevation-card: var(--elevation-1);   /* old name */
  --focus-ring: 0 0 0 var(--focus-ring-w) #FFFFFF, 0 0 0 4px var(--border-focus);
  --focus-ring-inset: inset 0 0 0 var(--focus-ring-w) var(--border-focus);
  --kanban-drag-shadow: 0 12px 24px rgba(11, 27, 43, 0.16);

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;     /* hover, press, toggles */
  --duration-base: 200ms;     /* popover, menu, tooltip, toast enter */
  --duration-slow: 280ms;     /* drawer, modal, sidebar fold */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --skeleton-cycle: 1400ms;
  --spinner-cycle: 800ms;
  --drag-tilt: -1deg;

  /* ---------- Layers ---------- */
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-popover: 40;
  --z-dropdown: 45;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  --peek-w: 22rem;   /* the Customers side panel (v0.84.1.29) */
}

/* v1.26 record sections (founder, 31 Oct: "each section clearly separated, a slightly different background"): one calm tint and
   one icon ink per kind of section, made from the semantic colours so a dark theme carries them with no new values. */
:root {
  --section-history-bg: color-mix(in srgb, var(--info-bg) 45%, var(--surface-page));    --section-history-ink: var(--info-text);
  --section-want-bg: color-mix(in srgb, var(--success-bg) 55%, var(--surface-page));     --section-want-ink: var(--success-text);
  --section-home-bg: color-mix(in srgb, var(--status-violet-bg) 60%, var(--surface-page)); --section-home-ink: var(--status-violet-text);
  --section-contact-bg: color-mix(in srgb, var(--warning-bg) 60%, var(--surface-page));  --section-contact-ink: var(--warning-text);
  --section-deal-bg: color-mix(in srgb, var(--status-blue-bg) 50%, var(--surface-page)); --section-deal-ink: var(--info-text);
  --section-plan-bg: color-mix(in srgb, var(--surface-subtle) 70%, var(--surface-page)); --section-plan-ink: var(--text-secondary);
  --section-docs-bg: color-mix(in srgb, var(--surface-sunken) 60%, var(--surface-page)); --section-docs-ink: var(--text-secondary);
  --section-money-bg: color-mix(in srgb, var(--success-bg) 35%, var(--surface-page));    --section-money-ink: var(--success-text);
  --section-edit-bg: var(--surface-page);
}

/* Arabic: swap the scale and the family. Same roles, same component code. */
:root:lang(ar), [dir="rtl"] {
  --font-ui: var(--font-arabic);
  --font-display: var(--font-arabic);
  --text-hero-size: var(--text-ar-hero-size);        --text-hero-lh: var(--text-ar-hero-lh);
  --text-kpi-size: var(--text-ar-kpi-size);          --text-kpi-lh: var(--text-ar-kpi-lh);
  --text-display-size: var(--text-ar-display-size);  --text-display-lh: var(--text-ar-display-lh);
  --text-title-size: var(--text-ar-title-size);      --text-title-lh: var(--text-ar-title-lh);
  --text-card-title-size: var(--text-ar-card-title-size); --text-card-title-lh: var(--text-ar-card-title-lh);
  --text-section-size: var(--text-ar-section-size);  --text-section-lh: var(--text-ar-section-lh);
  --text-body-size: var(--text-ar-body-size);        --text-body-lh: var(--text-ar-body-lh);
  --text-table-size: var(--text-ar-table-size);      --text-table-lh: var(--text-ar-table-lh);
  --text-meta-size: var(--text-ar-meta-size);        --text-meta-lh: var(--text-ar-meta-lh);
  --text-fine-size: var(--text-ar-fine-size);        --text-fine-lh: var(--text-ar-fine-lh);
  --text-eyebrow-tracking: 0;
  --tracking-header: 0;
}

/* Phones: tighter page rhythm and smaller showpiece numbers */
@media (max-width: 760px) {
  :root {
    --page-pad-x: 16px;
    --page-pad-top: 12px;
    --section-gap: 16px;
    --text-hero-size: 26px; --text-hero-lh: 32px;
    --text-kpi-size: 22px;  --text-kpi-lh: 28px;
  }
  :root:lang(ar), [dir="rtl"] { --text-hero-size: 26px; --text-hero-lh: 40px; --text-kpi-size: 22px; --text-kpi-lh: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --skeleton-cycle: 0ms;
  }
}

/* Icon strokes: Lucide draws on a 24-unit grid, so the stroke in grid units that renders 1.5px at each size */
:root { --icon-stroke-16: 2.25; --icon-stroke-20: 1.8; }

/* v0.84.2 body class fp-v3 (set on every Feinh Pro page by pro_shell.context). Inter is retired (2 Nov 2026 system pass):
   Outfit and IBM Plex Sans Arabic everywhere. The class stays only as a hook; its tokens now live in :root. */

/* The new design (founder, 2 Nov 2026; body class fp-v2). Old v2 names, kept as aliases of the role tokens above so the
   screen stylesheets keep working; new code reads the role tokens. */
:root {
  --v2-canvas: var(--surface-canvas);
  --v2-ink-2: var(--neutral-800);         /* nav labels, quiet buttons */
  --v2-hero-row: var(--navy-800);         /* rows inside the navy hero */
  --v2-hero-line: var(--navy-line);       /* dividers inside the navy hero */
  --v2-hero-muted: var(--navy-muted);     /* the hero's first line */
  --v2-hero-sub: var(--navy-sub);         /* labels under the hero's numbers */
  --v2-hero-icon: var(--teal-900);        /* an icon tile in the hero */
  --v2-clock: var(--warning-text);        /* reply clock and promise time: one amber ink */
  --v2-track: var(--chart-track);         /* bars and sparkline track */
  --v2-spark-fill: var(--teal-50);
  --v2-spark-line: var(--chart-1);
  --radius-card: var(--radius-lg);        /* one card radius: 16px */
  --radius-hero: var(--radius-xl);
  --radius-pill: var(--radius-inner);     /* 10px (not a pill: old name) */
  --radius-thumb: var(--radius-inner);
  --radius-row: var(--radius-inner);      /* rows inside a 16px card */
  --text-greet-size: var(--text-hero-size); --text-greet-lh: var(--text-hero-lh);
  --text-hero-big-size: var(--text-hero-size); --text-hero-big-lh: var(--text-hero-lh);
  --text-hero-n-size: var(--text-kpi-size); --text-hero-n-lh: var(--text-kpi-lh);
  --text-row-title-size: var(--text-body-size); --text-row-title-lh: var(--text-body-lh);
  --thumb-lg-w: 168px; --thumb-lg-h: 112px;
  --thumb-w: 88px; --thumb-h: 64px;
  --thumb-sm-w: 64px; --thumb-sm-h: 48px;
  --search-lg-w: 340px;
  --rail-w: 380px;
}