/* ==========================================================================
   InvoiceMeda — design tokens
   --------------------------------------------------------------------------
   This is the ONLY file where raw values (hex colors, rem/px sizes, ms
   durations, font files) are allowed. Everything else references tokens.
   `bash scripts/check-styles.sh` enforces this.

   Three tiers, in three separate :root blocks (the style guide at
   #/styleguide reads them in this order, so keep them separate):

     1. PRIMITIVES  raw palette and scales            --color-blue-45
     2. SEMANTIC    roles the UI thinks in            --color-primary
     3. COMPONENT   per-component knobs               --button-filled-bg

   Rule of thumb: components use tier 3 (or tier 2); nothing outside this
   file uses tier 1 directly.

   Naming: numbers in primitive names are pixel equivalents at the default
   16px browser font size (--space-16 = 1rem = 16px). Sizes are stored in
   rem so the whole UI scales when someone increases their browser font size.

   Color theme: dark only. Surfaces get lighter as they sit "higher"
   (Material 3 tonal elevation) instead of using shadows. Flat colors only.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Fonts — self-hosted Inter (variable weight 100–900), SIL Open Font License.
   Files live in /assets/fonts. To switch fonts: add @font-face rules for the
   new family here and point --font-family-brand at it.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   1. PRIMITIVES
   ========================================================================== */
:root, ::backdrop {
  /* ---- Color: blue — the "sent" status and the blue document accent.
     Tone number ≈ lightness (0 black … 100 white) */
  --color-blue-10: #0B1D48;
  --color-blue-20: #102C6E;
  --color-blue-30: #173C94;
  --color-blue-40: #1E4EC0;
  --color-blue-45: #2563EB; /* white text on it: 5.17:1 (WCAG AA ✓) */
  --color-blue-50: #3F78F0;
  --color-blue-60: #6090F3;
  --color-blue-70: #86ABF6;
  --color-blue-80: #ADC6FA; /* blue text on dark surfaces ✓ */
  --color-blue-90: #D6E2FD;
  --color-blue-95: #EBF1FE;

  /* ---- Color: neutral (true gray, from the Flux kit's dark mode) — surfaces and text */
  --color-neutral-0: #000000;
  --color-neutral-4: #0A0A0B;
  --color-neutral-6: #111111;  /* app background (kit: background-dark) */
  --color-neutral-10: #1C1C1E; /* cards (kit: surface-dark) */
  --color-neutral-12: #222224;
  --color-neutral-17: #2A2A2D;
  --color-neutral-20: #303033;
  --color-neutral-22: #353538;
  --color-neutral-24: #3A3A3E;
  --color-neutral-30: #48484C;
  --color-neutral-40: #5F5F64;
  --color-neutral-50: #77777C;
  --color-neutral-60: #919196;
  --color-neutral-70: #ACACB1;
  --color-neutral-80: #C7C7CB;
  --color-neutral-90: #F0F0F0; /* main text (kit: text-primary-dark). 14.6:1 on cards ✓ */
  --color-neutral-95: #F5F5F5;
  --color-neutral-98: #FAFAFA;
  --color-neutral-100: #FFFFFF;

  /* ---- Color: neutral variant (cool gray) — secondary text, outlines */
  --color-neutral-variant-30: #2E2E32; /* dividers, card borders (decorative) */
  --color-neutral-variant-50: #6B7280;
  --color-neutral-variant-60: #6F7582; /* field borders: 3.7:1 on cards (≥3:1 for UI shapes ✓) */
  --color-neutral-variant-80: #9CA3AF; /* secondary text (kit: text-secondary-dark). 6.7:1 on cards ✓ */
  --color-neutral-variant-90: #D1D5DB;

  /* ---- Color: sage (gray with a little green) — selected states, tonal highlights */
  --color-slate-20: #15231A;
  --color-slate-30: #1F3A27;
  --color-slate-80: #A9D3B1;
  --color-slate-90: #D3F0D8;

  /* ---- Color: red — errors, destructive actions, overdue */
  --color-red-10: #410002;
  --color-red-20: #690005;
  --color-red-30: #93000A;
  --color-red-45: #D32F2F; /* white text on it: 4.98:1 ✓ */
  --color-red-80: #FFB4AB;
  --color-red-90: #FFDAD6;

  /* ---- Color: green (brand, from the Flux kit) — primary actions, success, paid */
  --color-green-10: #0E2114;
  --color-green-20: #14301C;
  --color-green-30: #1B5E2E; /* kit "secondary": dark green pills and containers */
  --color-green-45: #2A8539; /* primary button. The kit's #2D8C3C is 4.26:1 with white text; this is a touch
                                darker so white text passes: 4.66:1 (WCAG AA ✓) */
  --color-green-50: #2D8C3C; /* kit "primary": chart bars, indicators (not behind small text) */
  --color-green-60: #4FAE5F;
  --color-green-70: #7DC88B; /* kit "accent": green text on dark surfaces. 8.6:1 on cards ✓ */
  --color-green-80: #A5DBAE;
  --color-green-90: #D3F0D8;
  --color-green-95: #E8F5E9;

  /* ---- Color: amber — warning, unpaid */
  --color-amber-10: #271900;
  --color-amber-20: #412D00;
  --color-amber-30: #5D4200;
  --color-amber-40: #7A5200;
  --color-amber-80: #F7C35C;
  --color-amber-90: #FFDF9E;

  /* ---- Color: teal — approved */
  --color-teal-30: #00504B;
  --color-teal-40: #00695F;
  --color-teal-80: #7ED8CE;
  --color-teal-90: #B2F1E9;

  /* ---- Color: violet — converted */
  --color-violet-30: #4A3A8A;
  --color-violet-80: #CBBEFF;
  --color-violet-90: #E7DEFF;

  /* ---- Font families */
  --font-family-inter: "Inter";
  --font-family-jakarta: "Plus Jakarta Sans"; /* kit heading font (used when installed; otherwise Inter) */
  --font-family-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-monospace: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Font sizes (rem; name = px equivalent) */
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-45: 2.8125rem;
  --font-size-57: 3.5625rem;

  /* ---- Font weights (Inter is variable, so any value 100–900 works) */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  /* ---- Line heights (rem; name = px equivalent) */
  --line-height-16: 1rem;
  --line-height-20: 1.25rem;
  --line-height-24: 1.5rem;
  --line-height-28: 1.75rem;
  --line-height-32: 2rem;
  --line-height-36: 2.25rem;
  --line-height-40: 2.5rem;
  --line-height-44: 2.75rem;
  --line-height-52: 3.25rem;
  --line-height-64: 4rem;

  /* ---- Letter spacing */
  --letter-spacing-tighter: -0.025em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-snug: -0.01em;
  --letter-spacing-none: 0em;
  --letter-spacing-wide: 0.01em;
  --letter-spacing-wider: 0.02em;

  /* ---- Spacing (4px base; name = px equivalent) */
  --space-0: 0rem;
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;

  /* ---- Sizes (fixed dimensions of controls and layout) */
  --size-2: 0.125rem;
  --size-4: 0.25rem;
  --size-6: 0.375rem;
  --size-8: 0.5rem;
  --size-12: 0.75rem;
  --size-16: 1rem;
  --size-18: 1.125rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-28: 1.75rem;
  --size-32: 2rem;
  --size-40: 2.5rem;
  --size-48: 3rem;
  --size-52: 3.25rem;
  --size-56: 3.5rem;
  --size-64: 4rem;
  --size-72: 4.5rem;
  --size-80: 5rem;
  --size-88: 5.5rem;
  --size-96: 6rem;
  --size-112: 7rem;
  --size-160: 10rem;
  --size-240: 15rem;
  --size-280: 17.5rem;
  --size-360: 22.5rem;
  --size-560: 35rem;
  --size-640: 40rem;
  --size-720: 45rem;
  --size-960: 60rem;
  --size-1120: 70rem;

  /* ---- Radii */
  --radius-0: 0rem;
  --radius-4: 0.25rem;
  --radius-6: 0.375rem;
  --radius-8: 0.5rem;
  --radius-10: 0.625rem;
  --radius-12: 0.75rem;
  --radius-14: 0.875rem;
  --radius-16: 1rem;
  --radius-18: 1.125rem;
  --radius-28: 1.75rem;
  --radius-full: 624.9375rem; /* "pill" — any huge value works */

  /* ---- Border widths (px on purpose: hairlines should stay crisp) */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;

  /* ---- Opacity (percent, so they work in both `opacity` and `color-mix()`) */
  --opacity-0: 0%;
  --opacity-8: 8%;
  --opacity-10: 10%;
  --opacity-12: 12%;
  --opacity-16: 16%;
  --opacity-38: 38%;
  --opacity-60: 60%;
  --opacity-100: 100%;

  /* ---- Z-index scale */
  --z-minus-1: -1;
  --z-0: 0;
  --z-1: 1;
  --z-10: 10;
  --z-100: 100;
  --z-200: 200;
  --z-300: 300;

  /* ---- Motion (Material 3 durations and easing curves) */
  --duration-0: 0ms;
  --duration-50: 50ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-250: 250ms;
  --duration-300: 300ms;
  --duration-400: 400ms;
  --duration-500: 500ms;
  --duration-1400: 1400ms;
  --duration-2000: 2000ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --easing-linear: linear;

  /* ---- Icon sizes */
  --icon-size-16: 1rem;
  --icon-size-18: 1.125rem;
  --icon-size-20: 1.25rem;
  --icon-size-24: 1.5rem;
  --icon-size-32: 2rem;
  --icon-size-40: 2.5rem;

  /* ---- Breakpoints (Material 3 window size classes) — REFERENCE ONLY.
     CSS can't use variables inside @media, so media queries repeat these
     numbers. If you change one, search the project for the old value.
       compact   0–599px     phones: bottom nav bar, dialogs become sheets
       medium    600–839px   tablets: navigation rail
       expanded  840–1199px  two-pane editor (form + live preview)
       large     1200px+     wide desktop */
  --breakpoint-medium: 600px;
  --breakpoint-expanded: 840px;
  --breakpoint-large: 1200px;

  /* ---- Paper and print sizes (documents use print units: in, mm, pt) */
  --paper-letter-width: 8.5in;
  --paper-letter-height: 11in;
  --paper-a4-width: 210mm;
  --paper-a4-height: 297mm;
  --paper-margin: 0.6in;
  --print-size-0-75: 0.75pt;
  --print-size-1-5: 1.5pt;
  --print-size-3: 3pt;
  --print-size-4: 4pt;
  --print-size-6: 6pt;
  --print-size-8: 8pt;
  --print-size-9: 9pt;
  --print-size-10: 10pt;
  --print-size-12: 12pt;
  --print-size-14: 14pt;
  --print-size-18: 18pt;
  --print-size-24: 24pt;
  --print-size-28: 28pt;
  --print-size-40: 40pt;
  --print-size-56: 56pt;
  --print-size-180: 180pt;
  --print-size-220: 220pt;
  --line-height-tight: 1.2;
  --line-height-relaxed: 1.45;
}


/* ==========================================================================
   2. SEMANTIC TOKENS — roles. Pages and components think in these.

   Color pattern for primary / error / success / warning:
     --color-X                strong fill (filled buttons, FAB)
     --color-on-X             text/icons placed ON that fill
     --color-X-text           that hue as text/icons on dark surfaces
     --color-X-container      soft tonal fill (chips, highlights)
     --color-on-X-container   text/icons on the soft fill
   (The look follows the Flux CRM kit in dark mode: a saturated green fill for
   primary actions, so green TEXT on dark surfaces needs its own lighter token.)
   ========================================================================== */
:root, ::backdrop {
  color-scheme: dark;

  /* ---- Primary (green) */
  --color-primary: var(--color-green-45);            /* fills behind white text: 4.66:1 ✓ */
  --color-on-primary: var(--color-neutral-100);
  --color-primary-text: var(--color-green-70);       /* green text and icons on dark: 8.6:1 ✓ */
  --color-primary-container: var(--color-green-30);  /* dark green pills (active filters, avatars) */
  --color-on-primary-container: var(--color-green-90);
  --color-primary-tint: var(--color-green-10);       /* faint green wash for a highlighted card */
  --color-primary-tint-border: var(--color-green-30);
  --color-inverse-primary: var(--color-green-45);

  /* ---- Charts */
  --color-chart-1: var(--color-green-50);            /* the kit's primary green, solid */
  --color-chart-2: var(--color-amber-80);            /* drawn hatched (striped) */

  /* ---- Secondary (sage) — selected rows and other soft highlights */
  --color-secondary: var(--color-slate-80);
  --color-on-secondary: var(--color-slate-20);
  --color-secondary-container: var(--color-slate-30);
  --color-on-secondary-container: var(--color-slate-90);

  /* ---- Surfaces (lowest → highest = darker → lighter) */
  --color-background: var(--color-neutral-6);
  --color-surface: var(--color-neutral-6);
  --color-surface-dim: var(--color-neutral-6);
  --color-surface-bright: var(--color-neutral-24);
  --color-surface-container-lowest: var(--color-neutral-4);
  --color-surface-container-low: var(--color-neutral-10);
  --color-surface-container: var(--color-neutral-12);
  --color-surface-container-high: var(--color-neutral-17);
  --color-surface-container-highest: var(--color-neutral-22);
  --color-on-surface: var(--color-neutral-90);          /* 15:1 on cards */
  --color-on-surface-variant: var(--color-neutral-variant-80); /* 6.7:1 on cards, 4.8:1 on highest */
  --color-inverse-surface: var(--color-neutral-90);
  --color-inverse-on-surface: var(--color-neutral-20);

  /* ---- Lines */
  --color-outline: var(--color-neutral-variant-60);       /* 3.7:1 — field borders */
  --color-outline-variant: var(--color-neutral-variant-30); /* dividers, card borders (decorative) */
  --color-outline-quiet: var(--color-neutral-30);         /* quiet borders on ghost buttons and segmented controls */

  /* ---- Scrim behind dialogs and sheets */
  --color-scrim: color-mix(in srgb, var(--color-neutral-0) var(--opacity-60), transparent);

  /* ---- Error / destructive */
  --color-error: var(--color-red-45);
  --color-on-error: var(--color-neutral-100);
  --color-error-text: var(--color-red-80);
  --color-error-container: var(--color-red-30);
  --color-on-error-container: var(--color-red-90);

  /* ---- Success */
  --color-success: var(--color-green-45);
  --color-on-success: var(--color-neutral-100);
  --color-success-text: var(--color-green-80);
  --color-success-container: var(--color-green-30);
  --color-on-success-container: var(--color-green-90);

  /* ---- Warning (amber fill needs dark text) */
  --color-warning: var(--color-amber-80);
  --color-on-warning: var(--color-amber-10);
  --color-warning-text: var(--color-amber-80);
  --color-warning-container: var(--color-amber-30);
  --color-on-warning-container: var(--color-amber-90);

  /* ---- Document statuses: accent (dots, chart bars, chip text) + container (chip background).
     Every accent passes 4.5:1 on its container. */
  --color-status-draft: var(--color-neutral-variant-80);
  --color-status-draft-container: var(--color-surface-container-highest);
  --color-status-sent: var(--color-blue-80);
  --color-status-sent-container: var(--color-blue-30);
  --color-status-approved: var(--color-teal-80);
  --color-status-approved-container: var(--color-teal-30);
  --color-status-declined: var(--color-red-80);
  --color-status-declined-container: var(--color-surface-container-highest);
  --color-status-converted: var(--color-violet-80);
  --color-status-converted-container: var(--color-violet-30);
  --color-status-paid: var(--color-green-80);
  --color-status-paid-container: var(--color-green-30);
  --color-status-unpaid: var(--color-amber-80);
  --color-status-unpaid-container: var(--color-amber-30);
  --color-status-overdue: var(--color-red-80);
  --color-status-overdue-container: var(--color-red-30);

  /* ---- State layers: a flat overlay of the content color at these opacities */
  --state-hover-opacity: var(--opacity-8);
  --state-focus-opacity: var(--opacity-10);
  --state-pressed-opacity: var(--opacity-10);
  --state-dragged-opacity: var(--opacity-16);
  --state-selected-opacity: var(--opacity-12);
  --state-disabled-content-opacity: var(--opacity-38);
  --state-disabled-container-opacity: var(--opacity-12);

  /* ---- Focus ring (keyboard focus) */
  --focus-ring-color: var(--color-primary-text);
  --focus-ring-width: var(--border-width-3);
  --focus-ring-offset: var(--border-width-2);

  /* ---- Typography: families */
  --font-family-brand: var(--font-family-inter);
  --font-family-base: var(--font-family-brand), var(--font-family-system);
  --font-family-heading: var(--font-family-jakarta), var(--font-family-base); /* page titles, headings, big numbers */
  --font-family-code: var(--font-family-monospace);

  /* ---- Typography: Material 3 role names, Flux kit values.
     Kit scale: display 36 bold · title 26 bold · heading 20 semibold · subheading 15 medium ·
     body 14 · small 12 · caption 11. Headings are bold with slightly tight letter spacing. */
  --font-display-lg-size: var(--font-size-57);
  --font-display-lg-line-height: var(--line-height-64);
  --font-display-lg-weight: var(--font-weight-700);
  --font-display-lg-tracking: var(--letter-spacing-tighter);
  --font-display-md-size: var(--font-size-45);
  --font-display-md-line-height: var(--line-height-52);
  --font-display-md-weight: var(--font-weight-700);
  --font-display-md-tracking: var(--letter-spacing-tighter);
  --font-display-sm-size: var(--font-size-36);          /* kit "display" */
  --font-display-sm-line-height: var(--line-height-44);
  --font-display-sm-weight: var(--font-weight-700);
  --font-display-sm-tracking: var(--letter-spacing-tighter);

  --font-headline-lg-size: var(--font-size-32);
  --font-headline-lg-line-height: var(--line-height-40);
  --font-headline-lg-weight: var(--font-weight-700);
  --font-headline-lg-tracking: var(--letter-spacing-tighter);
  --font-headline-md-size: var(--font-size-28);         /* big numbers on stat cards */
  --font-headline-md-line-height: var(--line-height-36);
  --font-headline-md-weight: var(--font-weight-700);
  --font-headline-md-tracking: var(--letter-spacing-tighter);
  --font-headline-sm-size: var(--font-size-26);         /* kit "title": page titles */
  --font-headline-sm-line-height: var(--line-height-32);
  --font-headline-sm-weight: var(--font-weight-700);
  --font-headline-sm-tracking: var(--letter-spacing-tight);

  --font-title-lg-size: var(--font-size-20);            /* kit "heading": card and section headings */
  --font-title-lg-line-height: var(--line-height-28);
  --font-title-lg-weight: var(--font-weight-600);
  --font-title-lg-tracking: var(--letter-spacing-snug);
  --font-title-md-size: var(--font-size-16);
  --font-title-md-line-height: var(--line-height-24);
  --font-title-md-weight: var(--font-weight-600);
  --font-title-md-tracking: var(--letter-spacing-snug);
  --font-title-sm-size: var(--font-size-14);
  --font-title-sm-line-height: var(--line-height-20);
  --font-title-sm-weight: var(--font-weight-600);
  --font-title-sm-tracking: var(--letter-spacing-none);

  --font-subheading-size: var(--font-size-15);          /* kit "subheading": row titles in lists */
  --font-subheading-line-height: var(--line-height-20);
  --font-subheading-weight: var(--font-weight-500);
  --font-subheading-tracking: var(--letter-spacing-none);

  --font-body-lg-size: var(--font-size-16);             /* text in fields (16px stops phones zooming in) */
  --font-body-lg-line-height: var(--line-height-24);
  --font-body-lg-weight: var(--font-weight-400);
  --font-body-lg-tracking: var(--letter-spacing-none);
  --font-body-md-size: var(--font-size-14);             /* kit "body" */
  --font-body-md-line-height: var(--line-height-20);
  --font-body-md-weight: var(--font-weight-400);
  --font-body-md-tracking: var(--letter-spacing-none);
  --font-body-sm-size: var(--font-size-12);             /* kit "small" */
  --font-body-sm-line-height: var(--line-height-16);
  --font-body-sm-weight: var(--font-weight-400);
  --font-body-sm-tracking: var(--letter-spacing-wide);

  --font-label-lg-size: var(--font-size-14);
  --font-label-lg-line-height: var(--line-height-20);
  --font-label-lg-weight: var(--font-weight-500);
  --font-label-lg-tracking: var(--letter-spacing-none);
  --font-label-md-size: var(--font-size-12);
  --font-label-md-line-height: var(--line-height-16);
  --font-label-md-weight: var(--font-weight-500);
  --font-label-md-tracking: var(--letter-spacing-wide);
  --font-label-sm-size: var(--font-size-11);            /* kit "caption" */
  --font-label-sm-line-height: var(--line-height-16);
  --font-label-sm-weight: var(--font-weight-500);
  --font-label-sm-tracking: var(--letter-spacing-wider);

  /* ---- Spacing roles */
  --space-none: var(--space-0);
  --space-3xs: var(--space-2);
  --space-2xs: var(--space-4);
  --space-xs: var(--space-8);
  --space-sm: var(--space-12);
  --space-md: var(--space-16);
  --space-card: var(--space-20);  /* inside cards (kit: 20px) */
  --space-lg: var(--space-24);
  --space-xl: var(--space-32);
  --space-2xl: var(--space-48);
  --space-3xl: var(--space-64);

  /* ---- Layout */
  --layout-gutter: var(--space-md);           /* page side padding on phones */
  --layout-gutter-wide: var(--space-lg);      /* page side padding on tablet/desktop */
  --layout-max-width: var(--size-1120);       /* content column max width */
  --layout-reading-width: var(--size-640);    /* comfortable text width */
  --layout-form-width: var(--size-720);       /* forms such as Settings */

  /* ---- Sizes */
  --size-touch-target: var(--size-48);        /* minimum tap area for anything interactive */
  --size-control-sm: var(--size-32);
  --size-control-md: var(--size-40);
  --size-control-lg: var(--size-48);
  --size-field: var(--size-48);

  /* ---- Shape (corner radius) scale */
  --shape-none: var(--radius-0);
  --shape-xs: var(--radius-6);   /* kit radius-sm: badges inside cards, tooltips */
  --shape-sm: var(--radius-8);   /* fields */
  --shape-md: var(--radius-10);  /* kit radius-md: buttons, nav pills */
  --shape-lg: var(--radius-14);  /* kit radius-lg: cards */
  --shape-xl: var(--radius-18);  /* kit radius-xl: dialogs, sheets */
  --shape-full: var(--radius-full);

  /* ---- Borders */
  --border-width-hairline: var(--border-width-1);
  --border-width-thick: var(--border-width-2);

  /* ---- Elevation: M3 dark uses tonal surfaces, not shadows */
  --elevation-none: none;

  /* ---- Layers (stacking order). Dialogs, menus and snackbars use the
     browser's top layer and don't need z-index. */
  --z-behind: var(--z-minus-1);   /* state-layer overlays sit behind content */
  --z-raised: var(--z-1);
  --z-sticky: var(--z-10);
  --z-nav: var(--z-100);
  --z-fab: var(--z-200);

  /* ---- Motion */
  --motion-duration-short: var(--duration-100);
  --motion-duration-medium: var(--duration-200);
  --motion-duration-long: var(--duration-400);
  --motion-duration-extra-long: var(--duration-500);
  --motion-duration-spin: var(--duration-1400);
  --motion-duration-progress: var(--duration-2000);
  --motion-easing-standard: var(--easing-standard);
  --motion-easing-enter: var(--easing-emphasized-decelerate);
  --motion-easing-exit: var(--easing-emphasized-accelerate);
  --motion-easing-linear: var(--easing-linear);

  /* ---- Icon sizes */
  --icon-size-sm: var(--icon-size-18);
  --icon-size-md: var(--icon-size-24);
  --icon-size-lg: var(--icon-size-32);
  --icon-size-xl: var(--icon-size-40);

  /* ---- Documents (contracts / invoices) always render light, even in the
     dark app. --doc-color-accent is replaced at runtime by the brand accent
     color chosen in Settings. */
  --doc-color-background: var(--color-neutral-100);
  --doc-color-text: var(--color-neutral-10);
  --doc-color-text-muted: var(--color-neutral-40);
  --doc-color-border: var(--color-neutral-90);
  --doc-color-surface: var(--color-neutral-95);
  --doc-color-accent: var(--doc-accent-green);
  --doc-font-family: var(--font-family-base);

  /* Document type and spacing (print units, so PDFs come out the same size everywhere) */
  --doc-font-size-xs: var(--print-size-8);
  --doc-font-size-sm: var(--print-size-9);
  --doc-font-size-body: var(--print-size-10);
  --doc-font-size-lg: var(--print-size-12);
  --doc-font-size-title: var(--print-size-18);
  --doc-font-size-display: var(--print-size-24);
  --doc-line-height: var(--line-height-relaxed);
  --doc-line-height-tight: var(--line-height-tight);
  --doc-space-xs: var(--print-size-3);
  --doc-space-sm: var(--print-size-6);
  --doc-space-md: var(--print-size-12);
  --doc-space-lg: var(--print-size-18);
  --doc-space-xl: var(--print-size-28);
  --doc-space-2xl: var(--print-size-40);
  --doc-border-width: var(--print-size-0-75);
  --doc-rule-width: var(--print-size-1-5);
  --doc-radius: var(--print-size-3);
  --doc-logo-max-height: var(--print-size-56);
  --doc-logo-max-width: var(--print-size-180);
  --doc-signature-width: var(--print-size-220);
  --doc-signature-height: var(--print-size-56);
  --doc-page-margin: var(--paper-margin);
  --doc-page-width-letter: var(--paper-letter-width);
  --doc-page-height-letter: var(--paper-letter-height);
  --doc-page-width-a4: var(--paper-a4-width);
  --doc-page-height-a4: var(--paper-a4-height);
  --doc-color-paid: var(--color-green-45);
  --doc-color-on-accent: var(--color-neutral-100);   /* text on an accent-colored band (presets all pass 4.5:1) */
  --doc-stamp-rotation: -12deg;

  /* Brand-color choices offered in Settings. All pass 4.5:1 on white paper. */
  --doc-accent-blue: var(--color-blue-45);        /* 5.17:1 */
  --doc-accent-navy: var(--color-blue-30);        /* 9.95:1 */
  --doc-accent-teal: var(--color-teal-40);        /* 6.59:1 */
  --doc-accent-green: var(--color-green-45);      /* 4.66:1 (default — the app's brand green) */
  --doc-accent-red: var(--color-red-45);          /* 4.98:1 */
  --doc-accent-burgundy: var(--color-red-30);     /* 9.35:1 */
  --doc-accent-violet: var(--color-violet-30);    /* 9.28:1 */
  --doc-accent-brown: var(--color-amber-40);      /* 6.92:1 */
  --doc-accent-slate: var(--color-slate-30);      /* 9.36:1 */
  --doc-accent-charcoal: var(--color-neutral-20); /* 13.17:1 */
}

/* Reduced motion: every animation and transition collapses to (almost) instant.
   Spinners keep turning slowly so "loading" is still visible. */
@media (prefers-reduced-motion: reduce) {
  :root, ::backdrop {
    --motion-duration-short: var(--duration-0);
    --motion-duration-medium: var(--duration-0);
    --motion-duration-long: var(--duration-0);
    --motion-duration-extra-long: var(--duration-0);
    --motion-duration-spin: var(--duration-2000);
  }
}


/* ==========================================================================
   3. COMPONENT TOKENS — reference semantic tokens only.
   Grouped by component, in the same order as /components.
   ========================================================================== */
:root, ::backdrop {
  /* ---- app-icon */
  --icon-size: var(--icon-size-md);
  --icon-color: currentColor;

  /* ---- app-button */
  --button-height: var(--size-control-md);
  --button-height-sm: var(--size-control-sm);
  --button-height-lg: var(--size-control-lg);
  --button-padding-x: var(--space-md);
  --button-padding-x-with-icon: var(--space-sm);
  --button-padding-x-text: var(--space-sm);
  --button-gap: var(--space-xs);
  --button-radius: var(--shape-md);
  --button-icon-size: var(--icon-size-sm);
  --button-filled-bg: var(--color-primary);
  --button-filled-fg: var(--color-on-primary);
  --button-tonal-bg: var(--color-surface-container-highest);  /* neutral "secondary" button */
  --button-tonal-fg: var(--color-on-surface);
  --button-outlined-border: var(--color-outline-quiet);
  --button-outlined-fg: var(--color-on-surface);
  --button-text-fg: var(--color-primary-text);
  --button-danger-bg: var(--color-error);
  --button-danger-fg: var(--color-on-error);
  --button-disabled-bg: color-mix(in srgb, var(--color-on-surface) var(--state-disabled-container-opacity), transparent);
  --button-disabled-fg: color-mix(in srgb, var(--color-on-surface) var(--state-disabled-content-opacity), transparent);

  /* ---- app-icon-button */
  --icon-button-size: var(--size-control-md);
  --icon-button-radius: var(--shape-md);
  --icon-button-fg: var(--color-on-surface-variant);
  --icon-button-selected-fg: var(--color-primary-text);
  --icon-button-filled-bg: var(--color-primary);
  --icon-button-filled-fg: var(--color-on-primary);
  --icon-button-tonal-bg: var(--color-surface-container-highest);
  --icon-button-tonal-fg: var(--color-on-surface);
  --icon-button-outlined-border: var(--color-outline);

  /* ---- app-fab */
  --fab-size: var(--size-56);
  --fab-radius: var(--shape-lg);
  --fab-bg: var(--color-primary);
  --fab-fg: var(--color-on-primary);
  --fab-padding-x: var(--space-md);
  --fab-offset: var(--space-md);

  /* ---- Fields: app-text-field, app-select, app-date-field */
  --field-height: var(--size-field);
  --field-padding-x: var(--space-md);
  --field-padding-y: var(--space-sm);
  --field-radius: var(--shape-sm);
  --field-gap: var(--space-sm);
  --field-border-width: var(--border-width-hairline);
  --field-border-width-focus: var(--border-width-thick);
  --field-border-color: var(--color-outline);
  --field-border-color-hover: var(--color-on-surface);
  --field-border-color-focus: var(--color-primary-text);
  --field-label-color: var(--color-on-surface-variant);
  --field-label-color-focus: var(--color-primary-text);
  --field-text-color: var(--color-on-surface);
  --field-supporting-color: var(--color-on-surface-variant);
  --field-error-color: var(--color-error-text);
  --field-notch-padding: var(--space-2xs);
  --field-label-float-scale: 0.75; /* floating label = 12/16 of resting size */

  /* ---- app-switch */
  --switch-track-width: var(--size-52);
  --switch-track-height: var(--size-32);
  --switch-track-border: var(--border-width-thick);
  --switch-track-off-bg: var(--color-surface-container-highest);
  --switch-track-off-border: var(--color-outline);
  --switch-track-on-bg: var(--color-primary);
  --switch-handle-off-size: var(--size-16);
  --switch-handle-on-size: var(--size-24);
  --switch-handle-pressed-size: var(--size-28);
  --switch-handle-off-bg: var(--color-outline);
  --switch-handle-on-bg: var(--color-on-primary);
  --switch-handle-icon-color: var(--color-primary);

  /* ---- app-chip */
  --chip-height: var(--size-control-sm);
  --chip-radius: var(--shape-full);
  --chip-padding-x: var(--space-md);
  --chip-padding-x-with-icon: var(--space-xs);
  --chip-gap: var(--space-xs);
  --chip-border: var(--color-outline-variant);
  --chip-fg: var(--color-on-surface-variant);
  --chip-selected-bg: var(--color-primary-container);          /* dark green pill, like the kit's active filters */
  --chip-selected-fg: var(--color-on-primary-container);

  /* ---- app-status-chip */
  --status-chip-height: var(--size-24);
  --status-chip-radius: var(--shape-full);
  --status-chip-padding-x: var(--space-xs);
  --status-chip-dot-size: var(--size-8);

  /* ---- app-card */
  --card-radius: var(--shape-lg);
  --card-padding: var(--space-card);
  --card-border: var(--color-outline-variant);
  --card-elevated-bg: var(--color-surface-container-low);
  --card-filled-bg: var(--color-surface-container-highest);
  --card-outlined-bg: var(--color-surface);
  --card-outlined-border: var(--color-outline-variant);

  /* ---- app-dialog / app-bottom-sheet */
  --dialog-bg: var(--color-surface-container-high);
  --dialog-radius: var(--shape-xl);
  --dialog-padding: var(--space-lg);
  --dialog-min-width: var(--size-280);
  --dialog-max-width: var(--size-560);
  --dialog-wide-max-width: var(--size-960);
  --dialog-scrim: var(--color-scrim);
  --sheet-bg: var(--color-surface-container-low);
  --sheet-max-width: var(--size-640);
  --sheet-handle-width: var(--size-32);
  --sheet-handle-height: var(--size-4);
  --sheet-handle-color: var(--color-on-surface-variant);

  /* ---- app-snackbar */
  --snackbar-bg: var(--color-inverse-surface);
  --snackbar-fg: var(--color-inverse-on-surface);
  --snackbar-action-fg: var(--color-inverse-primary);
  --snackbar-radius: var(--shape-md);
  --snackbar-min-height: var(--size-48);
  --snackbar-max-width: var(--size-560);
  --snackbar-offset: var(--space-md);

  /* ---- app-menu */
  --menu-bg: var(--color-surface-container-high);
  --menu-radius: var(--shape-md);
  --menu-min-width: var(--size-112);
  --menu-max-width: var(--size-280);
  --menu-item-height: var(--size-48);
  --menu-padding-y: var(--space-xs);

  /* ---- app-segmented */
  --segmented-height: var(--size-control-md);
  --segmented-radius: var(--shape-md);
  --segmented-border: var(--color-outline-quiet);
  --segmented-selected-bg: var(--color-primary);                /* green pill for the chosen option */
  --segmented-selected-fg: var(--color-on-primary);

  /* ---- app-list-item */
  --list-item-min-height: var(--size-56);
  --list-item-min-height-two-line: var(--size-72);
  --list-item-padding-x: var(--space-md);
  --list-item-padding-y: var(--space-xs);
  --list-item-gap: var(--space-md);
  --list-item-avatar-size: var(--size-40);
  --list-item-avatar-bg: var(--color-primary-container);
  --list-item-avatar-fg: var(--color-on-primary-container);
  --list-item-divider: var(--color-outline-variant);
  --list-item-selected-bg: var(--color-secondary-container);
  --list-item-selected-fg: var(--color-on-secondary-container);

  /* ---- Tabs (Settings areas): a rounded track with a green pill on the current tab */
  --tabs-track-bg: var(--color-surface-container-low);
  --tabs-track-border: var(--color-outline-variant);
  --tabs-radius: var(--shape-md);
  --tabs-fg: var(--color-on-surface-variant);
  --tabs-active-bg: var(--color-primary);
  --tabs-active-fg: var(--color-on-primary);

  /* ---- app-empty-state */
  --empty-state-icon-box: var(--size-80);
  --empty-state-icon-bg: var(--color-surface-container-high);
  --empty-state-icon-fg: var(--color-primary-text);
  --empty-state-max-width: var(--size-360);

  /* ---- app-top-bar */
  --top-bar-height: var(--size-64);
  --top-bar-bg: var(--color-surface);
  --top-bar-scrolled-bg: var(--color-surface-container);
  --top-bar-padding-x: var(--space-2xs);

  /* ---- app-nav (bottom bar on phones, rail on wider screens) */
  --nav-bar-height: var(--size-80);
  --nav-rail-width: var(--size-88);
  --nav-bg: var(--color-surface-container);
  --nav-rail-bg: var(--color-surface);
  --nav-item-fg: var(--color-on-surface-variant);           /* icon + label, resting */
  --nav-item-hover-fg: var(--color-primary-text);           /* icon + label, hover / focus (9.5:1) */
  --nav-item-active-bg: var(--color-primary);               /* green pill behind the selected item */
  --nav-item-active-fg: var(--color-on-primary);            /* icon + label, selected (4.66:1 on the pill) */
  --nav-item-radius: var(--shape-lg);                       /* rounded pill; var(--shape-none) for a square block */
  --nav-rail-item-height: var(--size-64);
  --nav-rail-item-gap: var(--space-xs);

  /* ---- app-sync-status (cloud icon in the top bar) */
  --sync-status-error-fg: var(--color-error-text);
  --sync-status-offline-fg: var(--color-on-surface-variant);
  --sync-status-spin-duration: var(--duration-1400);

  /* ---- Search bar on the dashboard (opens #/search) */
  --search-launcher-height: var(--size-field);
  --search-launcher-bg: var(--color-surface-container-low);
  --search-launcher-fg: var(--color-on-surface-variant);
  --search-launcher-radius: var(--shape-md);

  /* ---- app-stat-card */
  --stat-card-bg: var(--color-surface-container-low);
  --stat-card-radius: var(--shape-lg);
  --stat-card-padding: var(--space-card);
  --stat-card-icon-box: var(--size-40);
  --stat-card-icon-radius: var(--shape-md);
  --stat-card-border: var(--color-outline-variant);
  --stat-card-highlight-bg: var(--color-primary-tint);          /* the kit's green-tinted "revenue" card */
  --stat-card-highlight-border: var(--color-primary-tint-border);

  /* ---- app-bar-chart */
  --bar-chart-height: var(--size-240);
  --bar-chart-series-1: var(--color-chart-1);
  --bar-chart-series-2: var(--color-chart-2);
  --bar-chart-series-3: var(--color-primary-text);
  --bar-chart-series-4: var(--color-status-converted);
  --bar-chart-grid: var(--color-outline-variant);
  --bar-chart-axis-text: var(--color-on-surface-variant);
  --bar-chart-bar-radius: var(--radius-6);
  --bar-chart-hatch-width: 6; /* stripe thickness, in SVG units of a 6×6 pattern tile (the rest is the gap) */

  /* ---- app-progress */
  --progress-color: var(--color-primary-text);
  --progress-track: var(--color-surface-container-highest);
  --progress-linear-height: var(--size-4);
  --progress-circular-size: var(--size-40);
  --progress-circular-size-sm: var(--size-18);
  --progress-stroke-width: 4; /* in SVG units of a 48×48 box */

  /* ---- app-tooltip */
  --tooltip-bg: var(--color-inverse-surface);
  --tooltip-fg: var(--color-inverse-on-surface);
  --tooltip-radius: var(--shape-sm);
  --tooltip-max-width: var(--size-280);

  /* ---- app-banner */
  --banner-bg: var(--color-surface-container-high);
  --banner-radius: var(--shape-lg);
  --banner-icon-fg: var(--color-primary-text);

  /* ---- app-image-field */
  --image-field-preview-size: var(--size-96);
  --image-field-preview-bg: var(--color-surface-container-highest);
  --image-field-preview-border: var(--color-outline-variant);
  --image-field-preview-radius: var(--shape-md);
  --image-field-drop-border: var(--color-primary-text);

  /* ---- app-color-field */
  --color-field-swatch-size: var(--size-40);
  --color-field-swatch-border: var(--color-outline);   /* visible edge even for dark swatches */
  --color-field-selected-ring: var(--color-on-surface);

  /* ---- app-item-list */
  --item-list-gap: var(--space-sm);
  --item-list-drop-indicator: var(--color-primary-text);
  --item-list-dragging-opacity: var(--state-disabled-content-opacity);

  /* ---- app-summary (label / amount rows) */
  --summary-row-gap: var(--space-xs);
  --summary-divider: var(--color-outline-variant);

  /* ---- app-signature-pad */
  --signature-pad-height: var(--size-160);
  --signature-pad-bg: var(--doc-color-background);
  --signature-pad-ink: var(--doc-color-text);
  --signature-pad-guide: var(--doc-color-border);
  --signature-pad-radius: var(--shape-md);

  /* ---- app-doc-preview (paper preview of a document) */
  --doc-preview-bg: var(--color-surface-container-lowest);
  --doc-preview-radius: var(--shape-md);
  --doc-preview-padding: var(--space-md);
  --doc-preview-padding-compact: var(--space-none);

  /* ---- app-template-picker */
  --template-picker-min: var(--size-160);
  --template-picker-thumb-height: var(--size-240);
  --template-picker-thumb-height-compact: var(--size-112);
  --template-picker-selected: var(--color-primary-text);

  /* ---- app-item-editor */
  --item-editor-gap: var(--space-sm);
  --item-editor-handle-fg: var(--color-on-surface-variant);
  --item-editor-suggestion-bg: var(--color-surface-container-high);
  --item-editor-suggestion-radius: var(--shape-md);
  --item-editor-suggested-border: var(--color-primary);
  --item-editor-listening-fg: var(--color-error-text);
}