/* ============================================================================
   OFFIIO GST — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   NOTHING in app.css or any page may hard-code a colour or size. Always use
   a var(--token) from this file. Change a value here → all 107 pages update.

   Layer 1 : PRIMITIVES  (raw palette — never used directly in components)
   Layer 2 : SEMANTIC    (role-based — this is what components consume)
   Layer 3 : COMPONENT   (a few component-specific derivations)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   LAYER 1 — PRIMITIVES
   ------------------------------------------------------------------------- */
:root {
  --combo-list-max-h: 18rem;   /* type-to-search: the open list (ADR-079) */
  --combo-list-min-w: 16rem;
  /* Neutral ramp (slate, cool-grey — Swiss/enterprise) */
  --slate-25:  #FCFCFD;
  --slate-50:  #F8FAFC;
  --slate-75:  #F4F6F9;
  --slate-100: #EEF1F5;
  --slate-150: #E5E9EF;
  --slate-200: #D8DEE8;
  --slate-300: #C2CAD8;
  --slate-400: #94A1B5;
  --slate-500: #6B7A90;
  --slate-600: #4B5A70;
  --slate-700: #35415A;
  --slate-800: #212B40;
  --slate-850: #192133;
  --slate-900: #131A29;
  --slate-950: #0B111C;
  --slate-1000:#070B13;

  /* Paper — the printed document is black on white in both themes (invoice-print.css) */
  --paper: #FFFFFF;
  --paper-muted: #66637E;   /* quiet text on paper, in either theme (4.9:1 on white) */
  --ink:   #000000;

  /* Brand — indigo (evolved from Betanet's existing purple accent) */
  --indigo-50:  #EFEEF8;
  --indigo-100: #E1DEF2;
  --indigo-200: #C4BFE6;
  --indigo-300: #A29BD5;
  --indigo-400: #7D74C1;
  --indigo-500: #5A51A6;
  --indigo-600: #393185;
  --indigo-700: #2F286F;
  --indigo-800: #251F59;
  --indigo-900: #1B1744;
  /* The registered Offiio logo (3 Oct 2026): the indigo above is its own (#393185); never as a gradient */
  --brand-ink:     #100E26;   /* the wordmark — the sidebar and the footer */
  --brand-magenta: #A82682;
  --brand-orange:  #E74629;
  --brand-green:   #009846;

  /* Status — green / red / amber / orange / blue / violet */
  --green-50:  #E8F7EE;  --green-100: #CCEFDA;  --green-500: #17A34A;
  --green-600: #128A3E;  --green-700: #0C6B2F;  --green-300: #55D98A;

  --red-50:    #FEECEB;  --red-100:   #FDD9D6;  --red-500:   #E03131;
  --red-600:   #C92A2A;  --red-700:   #A61E1E;  --red-300:   #FF8787;

  --amber-50:  #FEF6E7;  --amber-100: #FCEBC6;  --amber-500: #D98706;
  --amber-600: #B96E04;  --amber-700: #8F5502;  --amber-300: #FBC55B;

  --orange-50: #FFF1E6;  --orange-100:#FFE0C7;  --orange-500:#EA6A0C;
  --orange-600:#C75509;  --orange-700:#9C4207;  --orange-300:#FFA45C;

  --blue-50:   #E8F1FE;  --blue-100:  #D0E2FD;  --blue-500:  #2570EB;
  --blue-600:  #1C5AC4;  --blue-700:  #16469B;  --blue-300:  #74A6F7;

  --violet-50: #F3EEFE;  --violet-100:#E6DBFD;  --violet-500:#7C3AED;
  --violet-600:#6929C4;  --violet-700:#54209C;  --violet-300:#B18AF7;

  --teal-50:   #E6F6F5;  --teal-100:  #C7EBE9;  --teal-500:  #0E9488;
  --teal-600:  #0B7A70;  --teal-700:  #085C55;  --teal-300:  #4FD1C5;

  /* ------------------------------------------------------------------------
     TYPOGRAPHY
     IBM Plex Sans  → all UI text. Excellent tabular figures, "financial
                      trust" character, 4.5:1 legible at 12–13px in dense rows.
     IBM Plex Mono  → invoice/bill numbers, GSTIN, HSN/SAC, PAN, ledger codes.
                      Same family = perfect vertical rhythm next to Sans.
     --------------------------------------------------------------------- */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — tuned for DENSE financial tables (density 9/10) */
  --fs-micro: 11px;    /* uppercase eyebrow labels, table meta */
  --fs-nano:  10px;    /* chart axis labels and the month over a date — never body text */
  --fs-xs:    12.5px;    /* secondary cell text, helper */
  --fs-sm:    14px;    /* table body — the workhorse size */
  --fs-base:  14px;    /* form inputs, body copy */
  --fs-md:    16px;    /* card titles, section heads */
  --fs-lg:    18px;    /* sub-page heads */
  --fs-xl:    22px;    /* page title */
  --fs-2xl:   26px;    /* KPI value */
  --fs-3xl:   32px;    /* hero KPI / invoice grand total */
  --fs-4xl:   clamp(32px, 4.2vw, 48px);   /* onboarding question */
  --fs-display: clamp(40px, 6.4vw, 84px); /* onboarding intro statement */

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

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;   /* uppercase labels */
  --ls-wider:  0.08em;   /* status badges */

  /* ------------------------------------------------------------------------
     SPACING — dense scale (4px base)
     --------------------------------------------------------------------- */
  --sp-0:  0;
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  10px;
  --sp-6:  12px;
  --sp-7:  16px;
  --sp-8:  20px;
  --sp-9:  24px;
  --sp-10: 32px;
  --sp-11: 40px;
  --sp-12: 48px;
  --sp-13: 64px;

  /* RADIUS — restrained. Swiss style = geometric, not pill-shaped. */
  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-full: 999px;

  /* LAYOUT */
  --sidebar-w:          256px;
  --sidebar-w-collapsed: 60px;
  --topbar-h:           56px;
  --avatar-xl:          72px;   /* employee photo on their page */
  --footbar-h:          52px;   /* floating universal-search bar */
  --row-h-compact:      44px;
  --row-h-comfortable:  56px;
  --control-h:          36px;   /* inputs, selects, buttons */
  --control-h-sm:       30px;
  --fp-sec-head-w:      13rem;  /* the page standard: a section's title column */
  --fp-totals-w:        24rem;  /* …the totals beside a document's notes */
  --modal-ask-w:        28rem;  /* a one-question dialog (leave / sell beyond stock) */
  --fp-fig-min-w:       9rem;   /* one figure in a record page's strip */
  --statement-w:        64rem;
  --ehead-photo-w:      11rem;  /* an employee's photo down the left of their page head */
  --ehead-side-w:       22rem;  /* its actions and what needs doing */
  --photo-pick-w:       6rem;   /* the photo on the employee form (portrait 4:5) */  /* a one-column statement such as the P&L */
  --fp-file-max-w:      18rem;  /* the chosen file's name beside Upload bill */
  --brand-logo-h:       34px;   /* the company's logo at the head of the sidebar */
  --brand-foot-h:       25px;   /* Offiio's logo in the footer (4 Oct: ~15% larger, centred) */
  --footbar-search-h:   36px;   /* the universal search field */
  --brand-icon-s:       26px;   /* either icon, sidebar collapsed */
  --info-pop-w:         22rem;  /* notes behind ⓘ */
  --rec-photo-s:        72px;   /* a person's photo in the record head */
  --docs-name-w:        14rem;  /* a document's name column */
  --line-gst-min-w:     5rem;   /* a line's GST rate select, wide enough for 18% */
  --auth-w:             400px;  /* sign-in, forgot / reset password */
  --auth-w-wide:        760px;  /* installer, first-run wizard */
  --settings-nav-w:     220px;  /* Settings hub sub-navigation */

  /* MOTION — subtle (motion dial 2/10). Never animate layout properties. */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   260ms;
  --dur-scene:  560ms;   /* onboarding: a scene arriving */
  --dur-exit:   300ms;   /* onboarding: a scene leaving — exits are quicker than entries */
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);

  --z-base: 1;
  --z-sticky: 50;
  --z-topbar: 100;
  --z-sidebar: 110;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ---------------------------------------------------------------------------
   LAYER 2 — SEMANTIC : LIGHT (default)
   ------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --canvas:          #F5F5F9;            /* page background — a touch of the brand's cool ink */
  --surface:         #FFFFFF;            /* cards, panels, table body */
  --surface-raised:  #FFFFFF;            /* dropdowns, modals */
  --surface-sunken:  var(--slate-50);    /* table head, read-only fields */
  --surface-hover:   var(--slate-50);
  --surface-active:  var(--indigo-50);
  --surface-inverse: var(--slate-800);

  /* Borders */
  --border:          var(--slate-150);
  --border-strong:   var(--slate-200);
  --border-input:    var(--slate-200);
  --divider:         var(--slate-100);

  /* Text */
  --text:            var(--slate-900);
  --text-secondary:  var(--slate-600);
  --text-muted:      #57657B;            /* 5.9:1 on white, 5.4:1 on the canvas — a step above faint */
  --text-faint:      #66738A;            /* 4.8:1 on white — the quietest text that is still readable (critique P1-8; was 2.6:1) */
  --text-inverse:    #FFFFFF;
  --text-link:       var(--indigo-600);

  /* Brand */
  --brand:           var(--indigo-600);
  --brand-hover:     var(--indigo-700);
  --brand-active:    var(--indigo-800);
  --brand-soft:      var(--indigo-50);
  --brand-soft-text: var(--indigo-700);
  --brand-on:        #FFFFFF;
  --focus-ring:      var(--indigo-500);

  /* Navigation: the sidebar and the footer in the logo's ink (classic enterprise: dark nav on a light app) */
  --nav-bg:          var(--brand-ink);
  --nav-bg-hover:    #1D1A3B;
  --nav-field-bg:     #1E1B3F;   /* the universal search on the ink footer: a field you can see is a field */
  --nav-field-border: #3B3768;
  --nav-field-hover:  #524D88;
  --nav-accent:       #B9B3EC;   /* the search icon and #tag hint — the logo's indigo, lifted for the ink */
  --nav-focus-ring:   0 0 0 3px rgba(185, 179, 236, 0.22);
  --nav-bg-active:   var(--indigo-600);
  --nav-text:        #B8B5D2;
  --nav-text-active: #FFFFFF;
  --on-solid:        #FFFFFF;   /* text on a solid status fill (danger / success buttons, the count badge) */
  --footbar-shadow:  0 -2px 12px -4px rgba(0, 0, 0, .35);
  --nav-text-muted:  #76729A;
  --nav-border:      #1D1A3B;
  --nav-group-label: #8A86AE;   /* 5.5:1 on the ink sidebar */

  /* Semantic feedback */
  --success:      var(--green-600);   --success-soft:  var(--green-50);
  --success-text: var(--green-700);   --success-solid: var(--green-600);
  --danger:       var(--red-600);     --danger-soft:   var(--red-50);
  --danger-text:  var(--red-700);     --danger-solid:  var(--red-600);
  /* Ledger-style rows: money in (a sale) and money out (a purchase) — a whisper of the status colour */
  --row-in-bg:    rgba(23, 163, 74, 0.06);
  --row-out-bg:   rgba(224, 49, 49, 0.05);
  --row-exp-bg:   rgba(217, 135, 6, 0.09);    /* expenses — orange (preview 09) */
  --row-card-bg:  rgba(37, 112, 235, 0.07);   /* bought on a credit card — blue */
  --row-move-bg:  var(--surface-sunken);      /* own money moving: contra, gateway → bank */
  --warning:      var(--amber-600);   --warning-soft:  var(--amber-50);
  --warning-text: var(--amber-700);   --warning-solid: var(--amber-600);
  --info:         var(--blue-600);    --info-soft:     var(--blue-50);
  --info-text:    var(--blue-700);    --info-solid:    var(--blue-600);

  /* Accounting semantics — Dr / Cr / money direction */
  --money-in:   var(--green-700);   /* receipts, income, debit-to-bank  */
  --money-out:  var(--red-700);     /* payments, expenses               */
  --money-exp:  var(--amber-700);   /* an expense row                   */
  --money-card: var(--blue-700);    /* spent on a credit card           */
  --money-zero: var(--slate-400);
  --dr-color:   var(--slate-800);
  --cr-color:   var(--slate-800);

  /* Tax chips */
  --tax-cgst: var(--teal-600);   --tax-cgst-soft: var(--teal-50);
  --tax-sgst: var(--violet-600); --tax-sgst-soft: var(--violet-50);
  --tax-igst: var(--blue-600);   --tax-igst-soft: var(--blue-50);
  --tax-cess: var(--orange-600); --tax-cess-soft: var(--orange-50);

  /* Shadows — sharp & shallow (Swiss). Never soft/blurry. */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-focus: 0 0 0 3px rgba(57, 49, 133, 0.22);

  /* Chart series (colour-blind safe ordering, ≥3:1 against surface) */
  /* Chart series lead with the logo's four colours */
  --chart-1: var(--indigo-600);  --chart-2: var(--brand-green);  --chart-3: var(--brand-orange);
  --chart-4: var(--brand-magenta);  --chart-5: #0E9488;  --chart-6: #D98706;
  --chart-grid: var(--slate-150);
  --chart-axis: var(--slate-400);
}

/* ---------------------------------------------------------------------------
   LAYER 2 — SEMANTIC : DARK
   Not an inversion. Re-tuned so every pairing still clears WCAG AA (4.5:1
   body, 3:1 large/UI). Status colours get lighter so they stay legible on
   dark; the badges are soft tints with strong text in both themes.
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --canvas:          var(--slate-1000);
  --surface:         var(--slate-900);
  --surface-raised:  var(--slate-850);
  --surface-sunken:  var(--slate-950);
  --surface-hover:   var(--slate-850);
  --surface-active:  rgba(140, 132, 217, 0.14);
  --surface-inverse: var(--slate-100);

  --border:          #222C40;
  --border-strong:   #2F3B52;
  --border-input:    #5A6782;   /* ≥3:1 against the card (critique P0-2) */
  --divider:         #1C2538;

  --text:            #F2F5FA;
  --text-secondary:  #C3CDDC;   /* lifted (2 Oct 2026): dark text read too light */
  --text-muted:      #9DABC0;
  --text-faint:      #7D8BA2;
  --text-inverse:    var(--slate-950);
  --text-link:       #A39CE3;

  /* the logo's indigo is too deep on dark: a lighter step of the same hue */
  --brand:           #8C84D9;
  --brand-hover:     #A39CE3;
  --brand-active:    #B9B3EC;
  --brand-soft:      rgba(140, 132, 217, 0.16);
  --brand-soft-text: #C3BEF0;
  --brand-on:        #100E26;   /* ink on the lavender primary: 6:1 (white was 3.3:1 — critique P0-2) */
  --focus-ring:      #8C84D9;

  --nav-bg:          #0B0A1C;
  --nav-bg-hover:    #17152F;
  --nav-field-bg:     #17152F;
  --nav-field-border: #2F2B55;
  --nav-field-hover:  #47427A;
  --nav-accent:       #B9B3EC;
  --nav-bg-active:   var(--indigo-600);
  --nav-text:        #BCB9D6;
  --nav-text-active: #FFFFFF;
  --nav-text-muted:  #827EA6;
  --nav-border:      #17152F;
  --nav-group-label: #827EA6;

  --success:      var(--green-300);   --success-soft:  rgba(23, 163, 74, 0.16);
  --success-text: var(--green-300);   --success-solid: var(--green-600);
  --danger:       var(--red-300);     --danger-soft:   rgba(224, 49, 49, 0.16);
  --danger-text:  var(--red-300);     --danger-solid:  var(--red-600);
  --row-in-bg:    rgba(23, 163, 74, 0.10);
  --row-out-bg:   rgba(224, 49, 49, 0.09);
  --row-exp-bg:   rgba(217, 135, 6, 0.15);
  --row-card-bg:  rgba(37, 112, 235, 0.12);
  --warning:      var(--amber-300);   --warning-soft:  rgba(217, 135, 6, 0.16);
  --warning-text: var(--amber-300);   --warning-solid: var(--amber-600);
  --info:         var(--blue-300);    --info-soft:     rgba(37, 112, 235, 0.16);
  --info-text:    var(--blue-300);    --info-solid:    var(--blue-600);

  --money-in:   var(--green-300);
  --money-out:  var(--red-300);
  --money-exp:  var(--amber-300);
  --money-card: var(--blue-300);
  --money-zero: var(--slate-500);
  --dr-color:   #E9EEF6;
  --cr-color:   #E9EEF6;

  --tax-cgst: var(--teal-300);   --tax-cgst-soft: rgba(14, 148, 136, 0.16);
  --tax-sgst: var(--violet-300); --tax-sgst-soft: rgba(124, 58, 237, 0.18);
  --tax-igst: var(--blue-300);   --tax-igst-soft: rgba(37, 112, 235, 0.16);
  --tax-cess: var(--orange-300); --tax-cess-soft: rgba(234, 106, 12, 0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.60), 0 4px 8px -2px rgba(0, 0, 0, 0.40);
  --shadow-focus: 0 0 0 3px rgba(140, 132, 217, 0.30);

  --chart-1: #8C84D9;  --chart-2: #2FBF6E;  --chart-3: #F2694F;
  --chart-4: #D65AAE;  --chart-5: #4FD1C5;  --chart-6: #FBC55B;
  --chart-grid: #222C40;
  --chart-axis: #5E6C82;
}

/* ---------------------------------------------------------------------------
   LAYER 3 — COMPONENT TOKENS
   Status palette: soft tints with strong text and always a word (critique P0-1) —
   paid green, unpaid amber, part paid indigo, overdue red, draft / cancelled grey.
   Each text colour is ≥4.5:1 on its tint in both themes.
   ------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Status badges (critique P0-1): soft tints with strong text — green paid, amber unpaid, indigo part paid, red only when
     action is due (overdue), blue posted / sent, grey draft / cancelled. Never a solid fill. */
  --st-paid-bg:      var(--success-soft);   --st-paid-fg:      var(--success-text);
  --st-unpaid-bg:    var(--warning-soft);   --st-unpaid-fg:    var(--warning-text);
  --st-partial-bg:   var(--brand-soft);     --st-partial-fg:   var(--brand-soft-text);
  --st-overdue-bg:   var(--danger-soft);    --st-overdue-fg:   var(--danger-text);
  --st-draft-bg:     var(--surface-sunken); --st-draft-fg:     var(--text-secondary);
  --st-sent-bg:      var(--info-soft);      --st-sent-fg:      var(--info-text);
  --st-cancelled-bg: var(--surface-sunken); --st-cancelled-fg: var(--text-muted);
  --st-rcm-bg:       rgba(124, 58, 237, 0.12); --st-rcm-fg:    var(--violet-600);
}
[data-theme="dark"] {
  --st-paid-bg:      var(--success-soft);   --st-paid-fg:      var(--success-text);
  --st-unpaid-bg:    var(--warning-soft);   --st-unpaid-fg:    var(--warning-text);
  --st-partial-bg:   var(--brand-soft);     --st-partial-fg:   var(--brand-soft-text);
  --st-overdue-bg:   var(--danger-soft);    --st-overdue-fg:   var(--danger-text);
  --st-draft-bg:     var(--surface-sunken); --st-draft-fg:     var(--text-secondary);
  --st-sent-bg:      var(--info-soft);      --st-sent-fg:      var(--info-text);
  --st-cancelled-bg: var(--surface-sunken); --st-cancelled-fg: var(--text-muted);
  --st-rcm-bg:       rgba(177, 138, 247, 0.16); --st-rcm-fg:   #C4A8F9;
}

/* Density toggle — accountants want 25 rows on screen, not 8. */
[data-density="comfortable"] { --row-h: var(--row-h-comfortable); --cell-py: var(--sp-7); --cell-px: var(--sp-7); }
[data-density="compact"],
:root                        { --row-h: var(--row-h-compact);     --cell-py: var(--sp-6); --cell-px: var(--sp-6); }