/* CSS Variables - Easy Customer Customization */

/* PHASE 5 (2026-08-01) — "Modernise the tokens".
   Phases 2-4 pointed every literal at the scale step it already equalled (D-4), so this
   file is the single place a look change lands. This phase moves the values: a real type
   scale off 14px, a 4px spacing rhythm, a genuine elevation ramp, rounder corners and a
   border you can actually see. Per D-1 the identity (warm neutral) and the information
   architecture are unchanged — this is a refresh, not a redesign.

   The radius scale was renamed at the same time. Its old names (--radius-2, --radius-4,
   ...) were D-4's device for "this step is the value the app renders today"; once the
   values move, a token called --radius-4 holding 8px is a lie. The names are semantic
   now and every consumer was rewritten in the same commit. */
:root {
  /* Color Scheme - inherits --theme-* from the active theme file in public/css/themes/,
     which the layout loads immediately before this file. (The old theme-colors.css this
     comment used to name was orphaned and was deleted in phase 1 of the visual revamp.) */
  --primary-color: var(--theme-primary);
  --primary-hover: var(--theme-primary-hover);
  --secondary-color: var(--theme-secondary);
  --accent-color: var(--theme-primary-light);

  /* Backgrounds */
  --bg-primary: var(--theme-white);
  --bg-secondary: var(--theme-gray-50);
  --bg-sidebar: var(--theme-menu-bg);
  --bg-hover: var(--theme-gray-200);

  /* Text Colors */
  --text-primary: var(--theme-menu-text);
  --text-secondary: var(--theme-gray-700);
  --text-muted: var(--theme-gray-600);
  --text-inverse: var(--theme-white);

  /* Borders
     Phase 5, D-1 "more present borders": this was --theme-gray-200, which is #F5F0E8 on
     the minuciosa theme — a border that is very nearly the card it sits on. One step
     darker is the whole change, and it lands on every card, input, table and panel. */
  --border-color: var(--theme-gray-300);

  /* Radius scale (D-1 "rounder corners").
     One semantic ramp. --radius-md is the default control radius (buttons, inputs,
     badges, small panels); --radius-lg is the surface radius (cards, modals, wrappers).
     Phase 5 collapsed D-4's four off-scale singletons (2px, 5px, 20px, 24px) into it. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Header Styling */
  --header-bg: var(--theme-header-bg);
  --header-text: var(--theme-header-text);
  --header-border: var(--theme-header-border);

  /* Spacing — a 4px rhythm (D-1 "more generous padding").
     Was 0.25 / 0.475 / 0.675 / 1 / 1.375 / 2rem: three of those six were off-grid
     leftovers of an old shrink. The steps below are 4/8/12/16/24/32/48px. */
  --spacing-xs: 0.25rem;   /*  4px */
  --spacing-sm: 0.5rem;    /*  8px */
  --spacing-md: 0.75rem;   /* 12px */
  --spacing-lg: 1rem;      /* 16px */
  --spacing-xl: 1.5rem;    /* 24px */
  --spacing-2xl: 2rem;     /* 32px */
  --spacing-3xl: 3rem;     /* 48px */

  /* Layout */
  --sidebar-width: 230px;
  --header-height: 55px;
  /* Reading width: the widest a page's content box gets; 100% means no cap. Set to a
     px value from 1200px up in responsive.css; workspace screens opt out with
     body.layout-wide (layout.css, X-74). */
  --content-max-width: 100%;

  /* Table minimum width — phase 4's mobile table floor (I-04/PD-16). It was a bare
     `min-width: 40rem` literal in components.css tagged "collapse in phase 5"; there is
     no width scale for it to join, so it becomes its own named token instead of a
     literal hiding in a component. */
  --table-min-width: 40rem;

  /* The line-items grid of the purchase-order / invoice creators: twelve columns that
     `table-layout: fixed` used to squeeze into whatever the column had left, wrapping
     headers letter by letter (X-68). Below this width the grid scrolls inside its wrapper. */
  --line-items-table-min-width: 72rem;

  /* Narrowest usable form field in the header column of those creators; two fields
     that cannot both reach it stack instead of clipping a select mid-word (X-68). */
  --form-field-min-width: 8rem;

  /* The quote workspace (quote-360.css, X-75). The Información column is a form of
     stacked label + field, so it has a width of its own and the lines table takes
     the rest; the table's thirteen columns need this much before they scroll. */
  --quote-info-width: 20rem;
  /* 57.5rem of numeric, toggle and button columns plus at least 9.75rem each for
     product and description — under that they wrap a word per line. */
  --quote-lines-table-min-width: 77rem;

  /* Shadows — an elevation ramp (I-08).
     These used to be three near-identical single-layer greys, which is why nothing on
     screen read as raised. Each step now has a contact shadow plus a diffuse one, and
     the steps actually differ. Four rungs, all four used: sm on cards and resting
     surfaces, md on hover, lg on dropdowns and popovers, modal on dialogs. */
  --shadow-sm: 0 1px 3px 0 var(--theme-shadow-light), 0 1px 2px -1px var(--theme-shadow-medium);
  --shadow-md: 0 4px 6px -1px var(--theme-shadow-medium), 0 2px 4px -2px var(--theme-shadow-light);
  --shadow-lg: 0 10px 15px -3px var(--theme-shadow-medium), 0 4px 6px -4px var(--theme-shadow-light);
  --shadow-modal: 0 25px 50px -12px var(--theme-shadow-modal);

  /* Typography — a real scale (I-08).
     Base was 0.75rem (12px), which is what made the app read as 2014. It is 14px now,
     which is also where the app's own hard-coded font-size literals already cluster
     (31 declarations at 0.875rem against 21 at 0.75rem — see Q-01), so this converges
     the token with what the sheets already do rather than pulling away from it.
     --font-size-xs and --font-size-md were referenced by six declarations and defined
     nowhere before this phase (X-16, X-21). */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.8125rem;    /* 13px */
  --font-size-base: 0.875rem;   /* 14px */
  --font-size-md: 0.9375rem;    /* 15px */
  --font-size-lg: 1rem;         /* 16px */
  --font-size-xl: 1.125rem;     /* 18px */
  --font-size-2xl: 1.375rem;    /* 22px */
  --font-size-3xl: 1.75rem;     /* 28px */

  /* Badge Typography — moved with the type scale, same five steps.
     Weight goes 500 -> 600: badge backgrounds are user-configured status colours
     (I-06), several of them saturated, and 500 at 11px on a mid-tone fill is thin. */
  --badge-font-size-sm: 0.6875rem;   /* 11px */
  --badge-font-size-md: 0.75rem;     /* 12px */
  --badge-font-size-lg: 0.8125rem;   /* 13px */
  --badge-font-size-xl: 0.875rem;    /* 14px */
  --badge-font-size-xxl: 0.9375rem;  /* 15px */
  --badge-font-weight: 600;

  /* Status Colors */
  --status-success: var(--theme-success);
  --status-warning: var(--theme-warning);
  --status-error: var(--theme-error);
  --status-info: var(--theme-info);
  --status-on-hold: var(--theme-secondary);

  /* --status-success is a fill colour, not a text colour: measured against a white card
     it reads 2.54:1, below AA at any size. This is the same deeper shade PD-26 gave the
     solid buttons, exposed for text that must be readable — 5.48:1 on the light themes,
     6.98:1 on dark, where --theme-success-strong stays the bright hue. */
  --status-success-strong: var(--theme-success-strong);

  /* Button Colors
     Phase 5 (X-17): the four hover tokens used to be written
     `var(--theme-success-hover, #059669)` and friends. Those --theme-*-hover names were
     defined nowhere, so the literal was what rendered — a Tailwind green/red/amber/blue
     on every theme, including the warm-neutral one. They are real tokens in every theme
     file now and the fallbacks are gone.

     The colour session (2026-08-04) then moved four of them off --status-* entirely, per
     PD-26. X-25 measured white text on the raw status colours at 2.15:1 (warning),
     2.54:1 (success), 3.68:1 (info) and 3.76:1 (danger) — all below WCAG AA on all five
     themes. The buttons now read --theme-*-strong, a deeper shade of the same hue, while
     badges, alerts and the urgency bars stay on --status-* and are untouched. That
     separation is the entire reason this indirection layer exists. Measured after:
     success 5.48:1, warning 5.02:1, info 5.17:1, danger 4.83:1. */
  --btn-add-bg: var(--theme-success-strong);
  --btn-add-hover: var(--theme-success-strong-hover);
  --btn-remove-bg: var(--theme-error-strong);
  --btn-remove-hover: var(--theme-error-strong-hover);
  --btn-secondary-bg: var(--secondary-color);
  --btn-secondary-hover: var(--theme-secondary-dark);
  --btn-warning-bg: var(--theme-warning-strong);
  --btn-warning-hover: var(--theme-warning-strong-hover);
  --btn-info-bg: var(--theme-info-strong);
  --btn-info-hover: var(--theme-info-strong-hover);

  /* Due Date Status Colors - 5-level urgency system */
  --status-approaching: #10b981; /* Green - future dates */
  --status-soon: #f59e0b; /* Yellow - this week */
  --status-urgent: #f97316; /* Orange - very soon */
  --status-urgent-text: #9a3412; /* Dark orange for text on orange background */
  --status-overdue: var(--theme-error); /* Red - overdue */

  /* Due Date Background Colors - subtle transparency */
  --status-approaching-bg: rgba(16, 185, 129, 0.1);
  --status-soon-bg: rgba(245, 158, 11, 0.15);
  --status-urgent-bg: rgba(249, 115, 22, 0.2);
  --status-overdue-bg: rgba(239, 68, 68, 0.95);

  /* Tinted status surfaces — the colour session (2026-08-04).
     56 of the sweep's literals were a status hue at low alpha: focus glows, selected-row
     fills, the financial-report cards. They were written as five different blues
     (rgba(37,99,235,…) 13 times, rgba(59,130,246,…) 3, rgba(0,123,255,…) 3) for one job.
     One token per role now; the merged hues moved 8 declarations and every screen they
     touch was re-approved. */
  --surface-success-tint: rgba(16, 185, 129, 0.1);
  --surface-warning-tint: rgba(245, 158, 11, 0.1);
  --surface-error-tint: rgba(239, 68, 68, 0.1);
  --surface-info-tint: rgba(37, 99, 235, 0.1);
  --surface-info-tint-soft: rgba(37, 99, 235, 0.05);
  --surface-neutral-tint: rgba(100, 116, 139, 0.1);
  --surface-success-glow: rgba(16, 185, 129, 0.3);
  --surface-success-highlight: rgb(194, 243, 194);
  --surface-error-solid: rgba(220, 38, 38, 0.95);

  /* Alert surfaces — alerts.css built four two-stop gradients and four borders out of
     eight rgba literals; they are the alert contract, so they get names. */
  --alert-success-bg-start: rgba(240, 253, 244, 0.95);
  --alert-success-bg-end: rgba(236, 253, 245, 0.95);
  --alert-success-border: rgba(16, 185, 129, 0.4);
  --alert-warning-bg-start: rgba(255, 251, 235, 0.95);
  --alert-warning-bg-end: rgba(254, 252, 232, 0.95);
  --alert-warning-border: rgba(245, 158, 11, 0.4);
  --alert-error-bg-start: rgba(254, 242, 242, 0.95);
  --alert-error-bg-end: rgba(254, 226, 226, 0.95);
  --alert-error-border: rgba(239, 68, 68, 0.4);
  --alert-info-bg-start: rgba(239, 246, 255, 0.95);
  --alert-info-bg-end: rgba(219, 234, 254, 0.95);
  --alert-info-border: rgba(59, 130, 246, 0.4);

  /* Alert Colors - semantic text colors */
  --alert-success-text: #065f46;
  --alert-warning-text: #92400e;
  --alert-error-text: #991b1b;
  --alert-info-text: #1e40af;

  /* Neutral ramp — the colour session (2026-08-04), PD-20's deferred sweep.
     Q-07 counted 484 colour literals and PD-20 refused the sweep because "most are
     Bootstrap greys with no matching token, so converting them means *inventing* a
     neutral ramp". This is that ramp, and it is deliberately Bootstrap's own grey scale
     rather than an invention: those values are what the sheets already contain, so
     naming them documents the app instead of restyling it.

     The 35 accidental greys the sweep found (#ddd, #e0e0e0, #dee2e6, #d1d5db, ... four
     different "light border greys" alone) snap onto these thirteen steps. Every snap is
     within ~20 units of 255 and every screen it moves was re-approved image by image.

     The steps are defined PER THEME, in the five files under themes/, not here. That is
     not symmetry for its own sake: dark.css inverts --theme-gray-*, so a theme-independent
     chrome ramp would have paired a dark surface with dark text the moment a background
     literal resolved through a theme token and its text literal did not. The four light
     themes carry identical values — exactly the literals that render today, so the sweep
     costs them zero pixels — and dark.css carries the inversion, which is the one place
     this sweep visibly changes anything beyond the button fills. */

  /* X-17's remaining nine — tokens that were never defined, so the fallback half of the
     var() was what rendered. Phase 5 took the four --theme-*-hover names; these are
     the rest. Same treatment: the value written here is the literal that was rendering,
     so the name becomes real without moving a pixel — except where noted.

     --bg-tertiary is the exception and it is a bug fix: system-config.css:32 and :146
     consume it with NO fallback, so those two backgrounds were invalid at computed-value
     time and rendered nothing at all. See X-41.

     --primary-light carried three different fallbacks in four files (a focus ring rgba,
     #e7f3ff, #e3f2fd) — one name meaning three things. Split into the two roles it
     actually had. */
  --focus-ring-color: rgba(0, 123, 255, 0.25);
  --focus-border-color: #80bdff;
  --surface-selected: #e7f3ff;
  --surface-success-subtle: #f0fff4;
  --surface-warning-subtle: #fff3cd;
  --status-success-dark: #276749;
  --status-success-border: #28a745;
  --table-row-hover-bg: var(--neutral-50);
  --bg-tertiary: var(--neutral-200);

  /* Additional Gray Scale Colors */
  --color-gray-50: var(--theme-gray-50);
  --color-gray-100: var(--theme-gray-100);
  --color-gray-200: var(--theme-gray-200);
  --color-gray-600: var(--theme-gray-600);
  --color-gray-700: var(--theme-gray-700);
  --color-gray-900: var(--theme-gray-900);

  /* Legacy Support (aliasing existing variables) */
  --color-primary: var(--primary-color);

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 2500;
  --z-alert: 3000;
  --z-popover: 1050;
  --z-tooltip: 1060;
}