/*
 * Yoda Bill design tokens, "Encre & Safran" direction (docs/DESIGN.md).
 * Colour values mirror src/YodaBill.Web.Client/Design/DesignTokens.cs (kept in sync by a unit test).
 * The anti-flash script sets data-theme="light|dark" on <html>; any element can also carry data-theme
 * to render a themed island (used by the style guide).
 */

/* ---------- Colours: light ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --yb-frame: #E9EFEF;
  --yb-bg: #F6F8F8;
  --yb-bg-sunken: #EEF2F2;
  --yb-surface: #FFFFFF;
  --yb-surface-raised: #FFFFFF;
  --yb-hover: rgba(14,90,102,0.05);
  /* What can be typed on the paper of the editor, told apart from what is printed (owner's choice, 2026-10-29). */
  --yb-field-tint: rgba(14,90,102,0.055);
  --yb-field-tint-hover: rgba(14,90,102,0.1);
  --yb-selected: #E3F1F2;
  --yb-border: #E1E8E9;
  --yb-border-strong: #C9D4D6;
  --yb-border-input: #7F9297;
  --yb-scrim: rgba(9,30,35,0.48);

  --yb-text: #12262B;
  --yb-text-muted: #5B6E73;
  --yb-text-disabled: #8FA0A4;

  --yb-primary: #0E5A66;
  --yb-primary-hover: #0C3F48;
  --yb-on-primary: #FFFFFF;
  --yb-primary-soft: #E3F1F2;
  --yb-on-primary-soft: #0C3F48;
  --yb-accent: #F2B134;
  --yb-on-accent: #1A1300;
  --yb-accent-soft: #FDF1D6;
  --yb-on-accent-soft: #6B4700;
  /* The saffron of an action on an inverse surface (the snackbar: dark ink in light, light ink in dark). */
  --yb-inverse-accent: #F2B134;
  --yb-focus: #0E5A66;
  --yb-brand-surface: #0C3F48;
  --yb-on-brand: #F6F8F8;
  --yb-on-brand-muted: #A9CBD0;

  --yb-success: #1F7A55;
  --yb-success-soft: #E5F4EC;
  --yb-warning: #9A5B00;
  --yb-warning-soft: #FEF3DC;
  --yb-error: #B42318;
  --yb-error-soft: #FDECEA;
  --yb-info: #1D5BC6;
  --yb-info-soft: #E8EFFC;

  --yb-status-neutral-fg: #5B6E73;
  --yb-status-neutral-bg: #EEF2F2;
  --yb-status-violet-fg: #6D45D9;
  --yb-status-violet-bg: #F1ECFE;
  --yb-status-blue-fg: #1D5BC6;
  --yb-status-blue-bg: #E8EFFC;
  --yb-status-green-fg: #1F7A55;
  --yb-status-green-bg: #E5F4EC;
  --yb-status-petrol-fg: #0E5A66;
  --yb-status-petrol-bg: #E3F1F2;
  --yb-status-red-fg: #B42318;
  --yb-status-red-bg: #FDECEA;
  --yb-status-amber-fg: #9A5B00;
  --yb-status-amber-bg: #FEF3DC;
  --yb-status-orange-fg: #B4410C;
  --yb-status-orange-bg: #FDEBDD;
  --yb-status-bordeaux-fg: #9F1239;
  --yb-status-bordeaux-bg: #FCE7EE;

  --yb-illu-stroke: #0E5A66;
  --yb-illu-fill: #F2B134;
  --yb-illu-paper: #FFFFFF;
  --yb-illu-shade: #E3F1F2;

  --yb-chart-invoiced: #127A9E;
  --yb-chart-collected: #C48612;
  --yb-chart-previous: #5B6E73;

  /* Shadows are tinted with petrol and reserved for floating elements. */
  --yb-shadow-xs: 0 1px 2px rgb(14 58 70 / 0.06);
  --yb-shadow-sm: 0 1px 3px rgb(14 58 70 / 0.08), 0 1px 2px rgb(14 58 70 / 0.04);
  --yb-shadow-md: 0 8px 24px rgb(14 58 70 / 0.12), 0 2px 6px rgb(14 58 70 / 0.06);
  --yb-shadow-lg: 0 24px 48px -12px rgb(14 58 70 / 0.28), 0 4px 12px rgb(14 58 70 / 0.08);
}

/* ---------- Colours: dark ("Glacier") ---------- */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  --yb-frame: #0A1416;
  --yb-bg: #0F1B1E;
  --yb-bg-sunken: #132326;
  --yb-surface: #16262A;
  --yb-surface-raised: #1C2F34;
  --yb-hover: rgba(94,196,196,0.07);
  --yb-field-tint: rgba(94,196,196,0.08);
  --yb-field-tint-hover: rgba(94,196,196,0.14);
  --yb-selected: #173A3E;
  --yb-border: #2A3F44;
  --yb-border-strong: #3A5258;
  --yb-border-input: #5E777D;
  --yb-scrim: rgba(0,0,0,0.6);

  --yb-text: #E7F0F1;
  --yb-text-muted: #A3B5B9;
  --yb-text-disabled: #6B7F84;

  --yb-primary: #5EC4C4;
  --yb-primary-hover: #84D6D6;
  --yb-on-primary: #0F1B1E;
  --yb-primary-soft: #173A3E;
  --yb-on-primary-soft: #A6E3E3;
  --yb-accent: #F2B134;
  --yb-on-accent: #1A1300;
  --yb-accent-soft: #3A2E14;
  --yb-on-accent-soft: #F7C866;
  --yb-inverse-accent: #6B4700;
  --yb-focus: #5EC4C4;
  --yb-brand-surface: #0E3238;
  --yb-on-brand: #E7F0F1;
  --yb-on-brand-muted: #A3C4C8;

  --yb-success: #4CC38A;
  --yb-success-soft: #183A2E;
  --yb-warning: #F5B547;
  --yb-warning-soft: #3F2F12;
  --yb-error: #F07068;
  --yb-error-soft: #441F1F;
  --yb-info: #7AA7F5;
  --yb-info-soft: #1A2D4D;

  --yb-status-neutral-fg: #A3B5B9;
  --yb-status-neutral-bg: #1F3237;
  --yb-status-violet-fg: #B9A2F8;
  --yb-status-violet-bg: #2A2547;
  --yb-status-blue-fg: #8DB3F7;
  --yb-status-blue-bg: #1A2D4D;
  --yb-status-green-fg: #6FD3A0;
  --yb-status-green-bg: #183A2E;
  --yb-status-petrol-fg: #7FD3D3;
  --yb-status-petrol-bg: #143A40;
  --yb-status-red-fg: #F58E87;
  --yb-status-red-bg: #441F1F;
  --yb-status-amber-fg: #F5B547;
  --yb-status-amber-bg: #3F2F12;
  --yb-status-orange-fg: #F59A63;
  --yb-status-orange-bg: #44271A;
  --yb-status-bordeaux-fg: #F27A9B;
  --yb-status-bordeaux-bg: #431B29;

  --yb-illu-stroke: #5EC4C4;
  --yb-illu-fill: #F2B134;
  --yb-illu-paper: #1C2F34;
  --yb-illu-shade: #173A3E;

  --yb-chart-invoiced: #2E9BB5;
  --yb-chart-collected: #BF8A1E;
  --yb-chart-previous: #A3B5B9;

  /* In the dark, elevation comes from lighter surfaces; shadows only separate floating layers. */
  --yb-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --yb-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.03);
  --yb-shadow-md: 0 8px 24px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.05);
  --yb-shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
}

/* ---------- Typography, space, shape, motion, layout (theme independent) ---------- */
:root {
  --yb-font: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --yb-text-display: 3.5rem;      /* 56px, landing only */
  --yb-leading-display: 1.05;
  --yb-weight-display: 650;
  --yb-tracking-display: -0.035em;

  --yb-text-title-1: 1.625rem;    /* 26px, page title */
  --yb-leading-title-1: 2rem;
  --yb-weight-title-1: 620;
  --yb-tracking-title-1: -0.02em;

  --yb-text-title-2: 1.125rem;    /* 18px, sections, dialogs */
  --yb-leading-title-2: 1.625rem;
  --yb-weight-title-2: 600;
  --yb-tracking-title-2: -0.01em;

  --yb-text-title-3: 0.9375rem;   /* 15px, cards, field groups */
  --yb-leading-title-3: 1.375rem;
  --yb-weight-title-3: 600;

  --yb-text-body: 0.875rem;       /* 14px */
  --yb-leading-body: 1.3125rem;

  --yb-text-caption: 0.78125rem;  /* 12.5px */
  --yb-leading-caption: 1.0625rem;
  --yb-tracking-caption: 0.005em;

  --yb-text-amount-hero: 1.875rem; /* 30px, KPI and document totals */
  --yb-leading-amount-hero: 2.25rem;
  --yb-text-amount-compact: 1.25rem; /* 20px, hero amounts on phones */
  --yb-leading-amount-compact: 1.75rem;

  --yb-weight-regular: 400;
  --yb-weight-medium: 500;
  --yb-weight-strong: 600;

  --yb-space-1: 4px;
  --yb-space-2: 8px;
  --yb-space-3: 12px;
  --yb-space-4: 16px;
  --yb-space-5: 20px;
  --yb-space-6: 24px;
  --yb-space-8: 32px;
  --yb-space-10: 40px;
  --yb-space-12: 48px;
  --yb-space-16: 64px;

  --yb-radius-sm: 6px;    /* fields, buttons, filter chips */
  --yb-radius-md: 10px;   /* panels, menus */
  --yb-radius-lg: 14px;   /* dialogs, sheets, app sheet */
  --yb-radius-pill: 999px; /* status badges, avatars */

  --yb-duration-fast: 150ms;
  --yb-duration: 200ms;
  --yb-duration-slow: 250ms;
  --yb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --yb-nav-width: 248px;
  --yb-rail-width: 72px;
  --yb-topbar-height: 56px;
  --yb-bottomnav-height: 64px;
  --yb-sheet-inset: 8px;
  --yb-content-max: 1360px;
  --yb-form-max: 720px;
  --yb-field-height: 40px;
  --yb-control-height: 36px;
  /* Lists: "comfortable" rows, two-line cells (client + subject) keep the same height (owner's choice, 2026-10-29). */
  --yb-row-height: 56px;
  --yb-row-head-height: 40px;
  --yb-touch-target: 44px;
  --yb-icon-size: 20px;
  --yb-perforation-gap: 7px;
  --yb-perforation-dot: 2px;

  /* The paper of the PDF preview: white in both themes, like the printed document (lot 23). */
  --yb-pdf-paper: #FFFFFF;
}

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