/* ============================================================
   Simpletax — Design tokens. THE SOURCE OF TRUTH.
   (The former static/design-system/ reference set was deleted —
   this file is now the single canonical definition of every primitive.)

   These primitives are loaded globally via templates/layout.html
   so every component CSS can use var(--*) without re-declaring.
   RULE: a raw value (hex, px, shadow, duration) lives ONLY here.
   ============================================================ */

/* Self-hosted Atlassian typefaces (internal use). Variable fonts — one file
   covers the whole weight axis. Files live in static/fonts/. */
@font-face {
    font-family: 'Atlassian Sans';
    src: url('../fonts/AtlassianSans.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atlassian Mono';
    src: url('../fonts/AtlassianMono.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* === PRIMITIVE PALETTE — raw hues; every duplicated colour resolves here.
       Change a hue once and all status/priority/chip/file/service tokens that
       share it follow. (Semantic tokens can still be re-pointed individually.) === */
    --hue-blue-50:  #DEEBFF;   --hue-blue-700:  #0747A6;
    --hue-lilac-50: #EAE6FF;   --hue-lilac-700: #403294;
    --hue-gold-700: #7F5F01;
    --hue-green-50: #E8F5E9;   --hue-green-700: #2E7D32;
    --hue-teal-50:  #E0F5F5;

    /* === TEXT === */
    --c-text:            #292A2E;   /* headings, titles, strong copy              */
    --c-text-heading:    #292A2E;   /* secondary headings / section titles / "view all" */
    --c-text-muted:      var(--c-text);   /* body + helper text — unified with --c-text (#242529) */
    --c-text-slate:      #505258;   /* ghost-button label / slate caption         */
    --c-text-faint:      var(--c-text-slate);  /* timestamps, meta, disabled — same family as slate */
    --c-text-placeholder: #6B6E76;  /* input/textarea placeholder text — ONE knob for every field (name matches design-system source) */

    /* === SURFACES === */
    --c-bg:              #FFFFFF;
    --c-white:           #FFFFFF;   /* literal white (button text, solid fills)   */
    --c-bg-shell:        #fcfcfd;   /* page-shell surface (content card / page bg) */
    --c-bg-soft:         #FAFBFC;
    --c-bg-chip:         #F4F5F7;
    --c-bg-chip-h:       #EBECF0;
    --c-row-hover:       #f0f1f2;   /* standard list/row hover fill (no left accent) — Teams + user-detail */
    --c-control-hover:   #efeef1;   /* hover fill for icon-pill + filter triggers (border/shadow stay put) */
    --c-bg-toast:        #2e2e30;
    --c-viewer-bg:       #EEF1F5;
    --c-bg-island:       #F8F8F8;   /* soft-grey card/panel surface on a white page (tools section, agent-link form card) */
    --c-bg-filter-bar:   #f6f6f7;   /* applied-filter chip-row capsule (.fcr-row) */
    --c-row-selected:    #e9f2fe;   /* selected/checked option row in list pickers */

    /* === LINES === */
    --c-line:            #f0f1f2;
    --c-line-sep:        #E7E8E7;   /* canonical divider — borders, separators, rules (rows, totals, modal headbars). Use this for every 1px grey divider. */
    --c-card-border:     #e1e2e1;   /* analytics/dashboard card outer border (KPI tiles, widget cards) */
    --c-line-rule:       #DFE1E6;
    --c-line-input:      #C1C7D0;
    --c-line-form:       #9A9DA4;
    --c-line-btn:        #E9EAE9;   /* subtle outlined-button border (Ask Simpletax) */

    /* === SCRIM / OVERLAY ===
       ONE knob for every modal/overlay backdrop. Warm taupe scrim. Surfaces
       should reference --c-overlay (or --c-scrim, kept as an alias). */
    --c-overlay:         rgba(5, 12, 31, 0.46);   /* universal overlay/backdrop — navy blanket (Jira --ds-blanket style); lighter + cooler than pure black */
    --c-scrim:           var(--c-overlay);         /* alias — legacy overlay users follow --c-overlay */
    --c-veil:            rgba(255, 255, 255, 0.55);/* LIGHT overcast — de-emphasises the container behind a docked side panel (Jira bulk-edit look); a soft white wash, not a dark scrim */

    /* === APP SHELL (header + sidebar rail) ===
       Single source for the shell palette. The dark shell (see the
       html[data-theme="dark"] block at the end of this file) redefines these;
       app-shell.css never hardcodes a shell colour. */
    --c-shell-bg:        #FFFFFF;   /* sidebar + header background */
    --c-shell-bg-light:  #f3f3f4;   /* soft grey pill fill (hover/open) — modal + picker controls */
    --c-shell-border:    #E1E2E1;   /* shell hairline borders + dividers */
    --c-shell-divider-light: #e1e2e1;  /* sidebar drag-handle hover */
    --c-shell-icon:      #505258;   /* shell icon — slate */
    --c-shell-icon-hover:#25272D;   /* shell icon — hover / active */
    --c-shell-hover:     #F0F1F2;   /* hover/active pill fill */
    --c-shell-nav-text:  #505258;   /* sidebar chrome text (nav labels, controls) */
    --shell-nav-weight:  500;       /* nav label weight — dark drops to 450 (light-on-dark reads bolder) */
    --c-shell-nav-icon:  #505258;   /* sidebar secondary glyphs (section labels, expand chevrons) */
    --c-shell-nav-hover: #F0F1F2;   /* sidebar nav row hover (active uses the accent pill) */
    --c-shell-heading:   var(--c-text);   /* brand wordmark + rail section heads (Chats) */
    --c-shell-muted:     #8C8F97;   /* faint rail ink — chevrons, timestamps, coming-soon */
    --c-shell-active-bg: #E9F2FE;   /* active page pill fill */
    --c-shell-active-fg: #1868DB;   /* active page pill text/icon */
    --c-shell-active-bar:#1868DB;   /* active page left indicator bar */
    --c-shell-selected-bg: var(--c-primary-faint);  /* header control pressed / menu-open fill */
    --c-shell-selected-fg: var(--c-primary);        /* header control pressed / menu-open glyph */
    --c-shell-badge-bg:  #F0F1F2;   /* rail count/badge pill — neutral */
    --c-shell-badge-fg:  #505258;
    --c-shell-badge-red-bg:  #FEE2E2;   /* unread */
    --c-shell-badge-red-fg:  #DC2626;
    --c-shell-badge-blue-bg: #DBEAFE;   /* onboarding */
    --c-shell-badge-blue-fg: #2563EB;
    --c-shell-search-bg:     var(--c-bg);           /* header search bar */
    --c-shell-search-border: var(--c-card-border);
    --c-shell-search-text:   var(--c-text);
    --c-shell-search-placeholder: var(--c-text-placeholder);
    --c-shell-search-icon-focus:  #151B26;          /* magnifier while typing */
    --c-shell-btn-border: var(--c-line-btn);        /* outlined header button (Ask Simpletax) */
    --c-shell-btn-text:   var(--c-text);
    --c-shell-scrollbar:       rgba(0, 0, 0, 0.15); /* rail scrollbar thumb */
    --c-shell-scrollbar-hover: rgba(0, 0, 0, 0.25);

    /* === ON-DARK SURFACES (toast / bulk action bar / minimized tab) === */
    --c-on-dark-hover:   rgba(255, 255, 255, 0.12);  /* hover wash on dark surfaces */
    --c-on-dark-line:    rgba(255, 255, 255, 0.20);  /* divider on dark surfaces */

    /* === TOOLTIP === */
    --c-tooltip-bg:      #1F1F1F;   /* dark hover-label pill */
    --c-tooltip-fg:      #FFFFFF;

    /* === TOAST (icon colours on the dark --c-bg-toast surface) === */
    --c-toast-success:   #57D9A3;
    --c-toast-error:     #FF8F73;
    --c-toast-info:      #79E2F2;
    --c-toast-warn:      #FFC400;
    --c-toast-archive:   #79B8FF;

    /* === PRIMARY === */
    --c-primary:         #2563EB;
    --c-primary-h:       #1D4ED8;
    --c-primary-soft:    var(--hue-blue-50);
    --c-avatar-bg:       #006eb4;   /* avatar fill (white initials) */
    --c-primary-soft-h:  #C8DDFF;   /* selected/active control hover */
    --c-primary-faint:   #E6F2FE;   /* faintest blue — active toolbar btn, chip-× hover */
    --c-primary-text:    var(--hue-blue-700);
    --c-primary-edit:    #0052CC;
    --c-primary-wash:    rgba(37, 99, 235, 0.08);   /* --c-primary @ 8% — file-drop overlay wash */
    --c-primary-tint:    rgba(7, 71, 166, 0.08);    /* --c-primary-text @ 8% — icon-button hover */
    --c-cta:             #1868DB;   /* header Create / primary CTA button fill */
    --c-cta-h:           #1558BC;   /* CTA hover / active */

    /* === BLUE PAGE GRADIENT (decorative page backdrop, e.g. My Tasks) ===
       Vivid blue (top-left) → deep navy (bottom), sampled to match Trello. Pair
       with --c-on-grad-* for any text/chrome on it (white cards float on top). */
    --grad-mytasks:      linear-gradient(150deg, #1469DE 0%, #0C57CC 40%, #0B3D95 73%, #0A2B66 100%);
    --c-on-grad:         #FFFFFF;
    --c-on-grad-muted:   rgba(255, 255, 255, 0.74);
    --c-on-grad-faint:   rgba(255, 255, 255, 0.55);
    --c-on-grad-hover:   rgba(255, 255, 255, 0.12);   /* subtle white overlay on hover/drop */

    /* Skeleton shimmer sweep (loading placeholders) — pair with --dur-skeleton +
       background-size: 200% 100%. Single knob for every skeleton block. */
    --grad-skeleton:     linear-gradient(90deg, var(--c-bg-chip) 25%, var(--c-bg-soft) 50%, var(--c-bg-chip) 75%);

    /* === CHECKBOX (all checkboxes: form, filter, task-check) === */
    --c-checkbox:        #1868db;   /* checked box fill + border */
    --c-checkbox-mark:   #FFFFFF;   /* checkmark / indeterminate bar */

    /* === MOTION === */
    /* Duration scale: fast .12 · base .15 · slow .25 */
    --dur-fast:          .12s;       /* hover / press                  */
    --dur-interaction:   .15s;       /* default control transition     */
    --dur-transition:    .25s;       /* modal / panel / toast          */
    --dur-skeleton:      1.5s;       /* skeleton shimmer sweep         */
    --dur-spin:          1s;         /* loading spinner rotation       */
    /* Easing */
    --ease-slide:        cubic-bezier(0.16, 1, 0.3, 1);   /* slide-ins (modals, slide-overs, toasts) */
    --ease-standard:     cubic-bezier(0.2, 0, 0, 1);      /* general enter/move */
    --ease-out:          cubic-bezier(0, 0, 0.2, 1);      /* exits / fades      */

    /* === INTERACTION (focus / states) === */
    --ring:              0 0 0 1px var(--c-primary);   /* focus glow on inputs/controls */
    --ring-danger:       0 0 0 1px var(--c-danger);    /* invalid / destructive focus   */
    --opacity-disabled:  .5;

    /* === SEMANTIC === */
    --c-success:         #166534;   --c-success-bg:  #DCFCE7;   --c-success-bd: #16A34A;
    --c-warn:            var(--hue-gold-700);   --c-warn-bg:     #FFFAE6;   --c-warn-bd:    #FFF3C4;
    --c-warn-tint:       rgba(127, 95, 1, 0.08);    /* --c-warn @ 8% — warn icon-button hover */
    --c-info:            #1E40AF;   --c-info-bg:     #EFF6FF;   --c-info-bd:    #BFDBFE;
    --c-danger:          #DE350B;   --c-danger-h:    #BF2600;   --c-danger-bg:  #FFEBE6;
    --c-signature-ink:   #1a1a2e;   /* canvas-rendered signature ink (Agent Link tool) */

    /* === PRIORITY (Linear-style bars + urgent square) === */
    --c-priority-urgent: #F2683C;            /* urgent square fill (white "!" glyph) */
    --c-priority-on:     var(--c-text-slate);/* filled signal bar */
    --c-priority-off:    var(--c-line-form); /* empty signal bar */

    /* === FILE-TYPE BADGES (attachment icons) === */
    --c-file-pdf-bg:     #FEE2E2;   --c-file-pdf-fg:     #BE123C;   /* PDF — red */
    --c-file-sheet-bg:   #DCFCE7;   --c-file-sheet-fg:   #166534;   /* Excel/CSV — green */
    --c-file-doc-bg:     var(--hue-blue-50);   --c-file-doc-fg:     var(--hue-blue-700);   /* Word — blue */
    --c-file-ppt-bg:     #FFE4D3;   --c-file-ppt-fg:     #C2410C;   /* PowerPoint — orange */
    --c-file-img-bg:     var(--hue-lilac-50);   --c-file-img-fg:     var(--hue-lilac-700);   /* Image — purple */
    --c-file-video-bg:   #FBE0EF;   --c-file-video-fg:   #9A2660;   /* Video — pink */
    --c-file-audio-bg:   #CFF5F0;   --c-file-audio-fg:   #00695C;   /* Audio — teal */
    --c-file-archive-bg: #FFF3C4;   --c-file-archive-fg: var(--hue-gold-700);   /* Archive — amber */

    /* === ANALYTICS / CHART PALETTE ===
       Categorical + status colours for dashboard widgets (donuts, segment bars,
       KPI tiles), matching the Jira/Atlassian reference. Categorical assignment
       order: blue → green → purple → orange → teal → amber → red → grey. Each
       has a soft `-bg` for KPI icon tiles / chips. */
    --chart-blue:    #2D7FF9;   --chart-blue-bg:   #E9F2FE;
    --chart-green:   #6BA644;   --chart-green-bg:  #EDF5E3;   /* lime/grass (To Do "In Progress") */
    --chart-purple:  #A974E6;
    --chart-orange:  #F2851D;
    --chart-teal:    #2BB37E;   /* "met / resolved" green */
    --chart-amber:   #FFAB00;   --chart-amber-bg:  #FFF3D6;
    --chart-red:     #F2502E;   --chart-red-bg:    #FDE8E3;
    --chart-grey:    #8C9099;   --chart-grey-bg:   #F1F2F4;
    --c-purple:          #6554C0;   --c-purple-bg:   #F6F0FC;   /* upgrade / premium banners */
    --c-highlight-yellow:#FFFF00;   /* RTE text-highlight (highlighter) */

    /* === CHIP FAMILIES === */
    --chip-client-bg:    var(--hue-blue-50);   --chip-client-fg:    var(--hue-blue-700);
    --chip-task-bg:      var(--hue-teal-50);   --chip-task-fg:      #003D40;
    --chip-neutral-bg:   var(--c-bg-chip);  --chip-neutral-fg:   var(--c-text-muted);

    /* === DEADLINE / DUE-DATE CHIPS === */
    --chip-overdue-bg:   #FFEBEE;   --chip-overdue-fg:   #B71C1C;   /* past due — red */
    --chip-due-today-bg: #FFF3E0;   --chip-due-today-fg: #E65100;   /* due today — orange */
    --chip-due-soon-bg:  #FEF9C3;   --chip-due-soon-fg:  #854D0E;   /* this week — amber */
    --chip-upcoming-bg:  var(--hue-blue-50);   --chip-upcoming-fg:  var(--hue-blue-700);   /* later — blue */

    /* === SERVICE-TYPE CHIPS (task-dashboard category tags) ===
       Canonical source: task-inline-editor.js .option-tag.cat-* — keep these
       in sync as the ONE definition; features should reference the tokens. */
    --svc-income-tax-bg:   var(--c-primary-soft);  --svc-income-tax-fg:   var(--c-primary-text);  /* Income Tax / Tax Returns */
    --svc-vat-bg:          var(--hue-green-50);   --svc-vat-fg:          var(--hue-green-700);   /* VAT / VIES / RTD / OSS */
    --svc-payroll-bg:      var(--hue-lilac-50);   --svc-payroll-fg:      var(--hue-lilac-700);
    --svc-bookkeeping-bg:  #FFF7D6;   --svc-bookkeeping-fg:  var(--hue-gold-700);
    --svc-year-end-bg:     #FCE4EC;   --svc-year-end-fg:     #880E4F;
    --svc-registrations-bg:#E0F7FA;   --svc-registrations-fg:#00695C;
    --svc-director-return-bg:#F3E5F5; --svc-director-return-fg:#6A1B9A;  /* purple */
    --svc-general-bg:      #FFF0E6;   --svc-general-fg:  #C2410C;   /* General — burnt orange */

    /* === STATUS CHIPS (task-dashboard 15-status system) ===
       Canonical: task-inline-editor.js .option-tag.status-* — one token per status. */
    --status-not-started-bg:     var(--hue-blue-50);   --status-not-started-fg:     var(--hue-blue-700);
    --status-client-setup-bg:    var(--hue-blue-50);   --status-client-setup-fg:    var(--hue-blue-700);   /* phase: To-do (= Not Started) */
    --status-data-requested-bg:  #FFF7D6;   --status-data-requested-fg:  var(--hue-gold-700);   /* phase: Waiting on client (= Queries/Awaiting) */
    --status-data-received-bg:   var(--hue-teal-50);   --status-data-received-fg:   #006064;
    --status-in-progress-bg:     var(--hue-teal-50);   --status-in-progress-fg:     #006064;
    --status-queries-raised-bg:  #FFF7D6;   --status-queries-raised-fg:  var(--hue-gold-700);
    --status-awaiting-client-bg: #FFF7D6;   --status-awaiting-client-fg: var(--hue-gold-700);
    --status-draft-prepared-bg:  var(--hue-lilac-50);   --status-draft-prepared-fg:  var(--hue-lilac-700);
    --status-under-review-bg:    var(--hue-lilac-50);   --status-under-review-fg:    var(--hue-lilac-700);
    --status-draft-sent-bg:      var(--hue-lilac-50);   --status-draft-sent-fg:      var(--hue-lilac-700);
    --status-approved-bg:        var(--c-success-bg);   --status-approved-fg:        var(--c-success);   /* phase: Done (= Filed/Completed) */
    --status-filed-bg:           var(--c-success-bg);   --status-filed-fg:           var(--c-success);   /* phase: Done */
    --status-payment-pending-bg: #FCE4EC;   --status-payment-pending-fg: #880E4F;
    --status-completed-bg:       var(--c-success-bg);  --status-completed-fg: var(--c-success);
    --status-on-hold-bg:         #D6D9DE;   --status-on-hold-fg:         #2C3E50;

    /* === CLIENT STATUS CHIPS (clients dashboard: Active / Onboarding / Inactive) === */
    --status-active-bg:     var(--hue-teal-50);   --status-active-fg:     #006064;   --status-active-dot:     #00838F;
    --status-onboarding-bg: var(--hue-blue-50);   --status-onboarding-fg: var(--hue-blue-700);   --status-onboarding-dot: #2684FF;
    --status-inactive-bg:   #D6D9DE;   --status-inactive-fg:   #2C3E50;   --status-inactive-dot:   #455A64;

    /* === PRIORITY CHIPS (task-dashboard) ===
       Canonical: task-inline-editor.js .option-tag.{low,normal,high,urgent} */
    --prio-low-bg:     #E0F2F1;   --prio-low-fg:     #00796B;
    --prio-normal-bg:  var(--hue-blue-50);   --prio-normal-fg:  var(--hue-blue-700);   /* normal = medium */
    --prio-high-bg:    #FFF3E0;   --prio-high-fg:    #E65100;
    --prio-urgent-bg:  #FFEBEE;   --prio-urgent-fg:  #B71C1C;

    /* === STATUS / PRIORITY DOTS (saturated indicator circles) ===
       Canonical: add-task-modal.css .add-task-option-tag.*::before */
    --status-not-started-dot:     #2684FF;
    --status-client-setup-dot:    #2684FF;
    --status-data-requested-dot:  var(--illus-amber);
    --status-data-received-dot:   #00838F;
    --status-in-progress-dot:     #00838F;
    --status-queries-raised-dot:  var(--illus-amber);
    --status-awaiting-client-dot: var(--illus-amber);
    --status-draft-prepared-dot:  var(--c-purple);
    --status-under-review-dot:    var(--c-purple);
    --status-draft-sent-dot:      var(--c-purple);
    --status-approved-dot:        var(--c-success-bd);
    --status-filed-dot:           var(--c-success-bd);
    --status-payment-pending-dot: #C2185B;
    --status-completed-dot:       var(--c-success-bd);
    --status-on-hold-dot:         #455A64;
    --prio-low-dot:    #00BFA5;
    --prio-normal-dot: #2684FF;
    --prio-high-dot:   #FF9100;
    --prio-urgent-dot: #FF1744;

    /* === STATUS BADGES (table) === */
    --c-badge-danger-bg:  #FEE2E2;  --c-badge-danger-fg: #991B1B;  --c-badge-danger-dot: #DC2626;
    --c-badge-neutral-fg: var(--c-text-slate);  /* "open" badge text + dot — slate, no rogue grey */

    /* === NOTIFICATION-SPECIFIC (bell dropdown + /notifications rows) === */
    --c-dot-read:        #8993A4;   /* read-state notification dot */
    --c-icon-disabled:   #A5ADBA;   /* muted/disabled icon + scrollbar thumb hover */
    --c-table-head:      #F8F9FA;   /* rendered-comment table header tint */
    --c-urgency-bg:      #FFF4E5;   --c-urgency-fg:    #97500E;   /* digest urgency pill */
    --c-email-sent-bg:   #ECFDF5;   --c-email-sent-fg: #047857;   --c-email-sent-dot: #10B981;   /* outbound-email audit badge */

    /* === FILE-TYPE BADGES === */
    --badge-pdf:         #DE350B;
    --badge-doc:         #2563EB;
    --badge-xls:         #16A34A;
    --badge-img:         #8B5CF6;
    --badge-zip:         #F59E0B;
    --badge-txt:         #6B6E76;

    /* === TOAST (dark surface + bright type icons) === */
    --c-toast-bg:        var(--c-bg-toast);

    /* === ILLUSTRATION PALETTE === */
    --illus-purple:      var(--c-purple);
    --illus-amber:       #FFAB00;

    /* === ICONS === */
    --icon-size:   16px;   /* canonical icon glyph size (SVG width/height) */
    --icon-size-sm: 14px;  /* compact glyph (chips, dense rows — e.g. the due chip) */
    --icon-stroke: 2;      /* line-icon stroke ≈ "weight"; design-bible item icon = 1.75 */

    /* === RADIUS === */
    --r-sm: 3px;   --r-md: 6px;   --r-lg: 12px;   --r-pill: 999px;
    --r-dock: 8px;   /* docked/floating panels: assistant + create/billing/email docks */
    --r-control: 3px;   /* shared outer radius for form-control shells: text fields,
                           dropdown/filter triggers, tag fields, search fields */
    --r-flyout: 4px;    /* sidebar flyout popovers (Favourites); pairs with --shadow-flyout */

    /* === SHADOWS === */
    --shadow-card:           0 1px 2px rgba(15,15,15,.04);
    /* Soft elevated panel/card (Linear-style): two tight, low-opacity layers
       with negative spread. Pair with a 1px --c-line-sep border + --r-lg. */
    --shadow-panel:          0 3px 6px -2px rgba(0,0,0,.02), 0 1px 1px rgba(0,0,0,.04);
    --shadow-modal:          0 0 0 1px rgba(15,15,15,.05), 0 3px 6px rgba(15,15,15,.1);
    --shadow-edit-panel:     var(--shadow-modal);
    /* Atlassian-style card elevation — navy-tinted so it reads when cards/sections
       float on a saturated surface (e.g. the My Tasks gradient). Raised = resting,
       overlay = hover/lift. */
    --shadow-card-raised:    0 1px 1px rgba(9,30,66,.25), 0 0 1px 1px rgba(9,30,66,.31);
    --shadow-card-overlay:   0 8px 16px -4px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
    --shadow-floater:        0 8px 28px rgba(9,30,66,.28), 0 0 1px rgba(9,30,66,.31);
    /* Sidebar flyout popover (Favourites): tighter, lighter graphite-tinted lift
       than --shadow-floater; hairline glow, no spread ring. */
    --shadow-flyout:         0 8px 12px rgba(30,31,33,.15), 0 0 1px rgba(30,31,33,.31);
    /* Soft "Linear" panel — the AskBar / CommentBar / QuickAddBar editor box:
       near-white border, faint 3-layer shadow, slate focus border. */
    --c-panel-soft:          #F7F7F7;
    --c-line-panel:          #E1E1E1;
    --shadow-panel-soft:     0 6px 18px rgba(0,0,0,0.02), 0 3px 9px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.04);
    /* Dropdowns / menus / context menus: a 1px #e3e4e6 hairline (baked into the
       shadow as a ring) + a soft drop shadow. One knob for every floating menu. */
    --shadow-dropdown:       0 0 0 1px #e3e4e6, 0 4px 12px rgba(15,15,15,.12), 0 1px 3px rgba(15,15,15,.08);
    --shadow-drag-card:      0 8px 24px rgba(9,30,66,.18);   /* file-drop overlay card */
    --shadow-min-tab:        0 4px 16px rgba(9,30,66,.25);   /* minimized modal tab */
    /* Beveled floating dialog (command palette / create picker): crisp dark
       hairline ring + inner top highlight (the bevel) + deep soft elevation. */
    --shadow-bevel:          inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(9,30,66,.10), 0 1px 1px rgba(9,30,66,.04), 0 20px 48px -10px rgba(9,30,66,.28), 0 8px 18px -8px rgba(9,30,66,.16);

    /* === CONTROL HEIGHTS === */
    --h-control:    32px;   /* icon buttons, segmented, tabs, send */
    --h-control-sm: 24px;   /* compact control — chips, dense-row buttons (e.g. due chip) */
    --h-rail:       var(--h-control);
    --h-search:     30px;
    --h-input:      42px;   /* form text inputs */
    --h-form-input: var(--h-input);

    /* === Z-INDEX (stacking scale — matches existing layer magnitudes) === */
    --z-dropdown:       900;     /* menus, pickers over page content */
    --z-toast:          11000;   /* always on top                    */

    /* === SPACING (2px grid) === */
    --s-2:  2px;
    --s-4:  4px;
    --s-6:  6px;
    --s-8:  8px;
    --s-10: 10px;
    --s-12: 12px;
    --s-16: 16px;
    --s-20: 20px;
    --s-24: 24px;
    --s-32: 32px;
    --s-40: 40px;
    --s-48: 48px;
    --s-64: 64px;
    /* Left gutter for page-shell content (header / title / tabs / body). Base ~20px
       aligns with the sidebar-toggle glyph; +10px per request for a roomier indent. */
    --shell-pad-left: 30px;

    /* === TYPE === */
    --f-family:     'Atlassian Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, 'Helvetica Neue', sans-serif;
    --f-mono:       'Atlassian Mono', 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
    --f-serif:      Georgia, 'Times New Roman', serif;   /* RTE italic glyph */
    --f-rte-glyph:  16px;   /* RTE B / I / U toolbar glyph size */
    --f-display-lg: 24px;   /* large detail-page / record title (task modal) */
    --f-display:    22px;
    --f-modal-title:    20px;   /* centred dialog title (.modal-title) */
    --f-h1:         18px;
    --f-modal-title-sm: 16px;   /* docked / minimized dialog title */
    --f-h2:         15px;
    --f-body:       14px;
    --f-control:    13px;
    --f-control-lg: 14px;
    --f-meta:       12px;
    --f-tiny:       11px;

    /* Primary heading text — 20px / 600 / 24px Inter (page titles, greeting,
       primary headings). Pair with letter-spacing: var(--ls-heading). */

    /* === LINE HEIGHT === */
    --lh-none:      1;       /* single-line: chips, badges, buttons   */
    --lh-control:   19.5px;  /* dropdown / context-menu option text   */
    --lh-body:      20px;    /* standard body / descriptions / inputs */
    --lh-title:     24px;    /* titles, headings, names               */

    /* === LETTER SPACING === */
    --ls-tight:     -0.01em; /* titles, headings                      */
    --ls-heading:   0;       /* primary heading tracking — flattened to none app-wide */
    --ls-caps:      0.02em;  /* uppercase labels, badges              */
    --ls-none:      0;       /* explicit reset                        */
}

/* ============================================================
   DARK SHELL — header + sidebar chrome only; page content stays light.
   Toggled by the Theme item in the account menu: layout.html stamps
   data-theme="dark" on <html> pre-paint from localStorage('theme').
   Only the --c-shell-* palette reacts, so nothing outside the chrome moves.
   ============================================================ */
html[data-theme="dark"] {
    --c-shell-bg:        #333333;
    --c-shell-border:    #4A4A4C;
    --c-shell-divider-light: #4A4A4C;
    --c-shell-icon:      #D4D6D6;
    --c-shell-icon-hover:#FFFFFF;
    --c-shell-hover:     rgba(255, 255, 255, 0.08);
    --c-shell-nav-text:  #F2F3F4;
    --shell-nav-weight:  400;
    --c-shell-nav-icon:  #A2A4A7;
    --c-shell-nav-hover: rgba(255, 255, 255, 0.05);
    --c-shell-heading:   #FFFFFF;
    --c-shell-muted:     rgba(255, 255, 255, 0.55);
    --c-shell-active-bg: rgba(255, 255, 255, 0.08);
    --c-shell-active-fg: #FFFFFF;
    --c-shell-active-bar:#579DFF;
    /* Pressed / menu-open header control — the shell BLUE family (same hue as
       --c-shell-active-bar / the blue badges), not the white hover tint, so the
       open bell/avatar reads blue like the light theme's selected state. */
    --c-shell-selected-bg: rgba(76, 154, 255, 0.20);
    --c-shell-selected-fg: #579DFF;
    --c-shell-badge-bg:  rgba(255, 255, 255, 0.10);
    --c-shell-badge-fg:  rgba(255, 255, 255, 0.60);
    --c-shell-badge-red-bg:  rgba(239, 68, 68, 0.20);
    --c-shell-badge-red-fg:  #FCA5A5;
    --c-shell-badge-blue-bg: rgba(76, 154, 255, 0.20);
    --c-shell-badge-blue-fg: #8CB8FF;
    --c-shell-search-bg:     #474747;
    --c-shell-search-border: rgba(255, 255, 255, 0.20);
    --c-shell-search-text:   rgba(255, 255, 255, 0.90);
    --c-shell-search-placeholder: rgba(255, 255, 255, 0.50);
    --c-shell-search-icon-focus:  #FFFFFF;
    --c-shell-btn-border: rgba(255, 255, 255, 0.25);
    --c-shell-btn-text:   #F2F3F4;
    --c-shell-scrollbar:       rgba(255, 255, 255, 0.15);
    --c-shell-scrollbar-hover: rgba(255, 255, 255, 0.25);
}