/* Avenzo Design System - tokens (single source of truth).
   Values come from the approved sign-in pages. Theme is explicit: an inline script in every
   page's <head> sets <html data-theme="light|dark"> before first paint (saved avenzo_theme,
   else the device preference). The prefers-color-scheme block is only a no-script fallback. */

@font-face {
  font-family: "Avenzo Sans";
  src: url("/assets/ui/fonts/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #F7F5F1;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-subtle: #F1EEE9;
  --surface-sunken: #E9E5DF;
  --field: #FBFAF8;
  --overlay: rgba(23, 23, 23, 0.40);
  --glass: rgba(247, 245, 241, 0.88);

  /* Text */
  --text: #171717;
  --text-2: #6F6B66;
  --text-3: #8C8781;
  --text-on-brand: #FFFFFF;

  /* Lines */
  --border: rgba(23, 23, 23, 0.10);
  --border-strong: rgba(23, 23, 23, 0.20);

  /* Brand. --brand for the mark and accents; filled controls use --brand-fill so white text
     meets AA; links and brand-coloured text use --brand-ink. Orange is never used for large areas. */
  --mark-ink: #171717;
  --brand: #FF5A1F;
  --brand-fill: #E0480F;
  --brand-fill-hover: #CC3F0B;
  --brand-ink: #C23A08;
  --brand-soft: rgba(255, 90, 31, 0.10);
  --ring: rgba(255, 90, 31, 0.22);

  /* Status */
  --success: #067647;
  --success-soft: rgba(6, 118, 71, 0.08);
  --warning: #B54708;
  --warning-soft: rgba(181, 71, 8, 0.09);
  --danger: #B42318;
  --danger-soft: rgba(180, 35, 24, 0.07);
  --info: #175CD3;
  --info-soft: rgba(23, 92, 211, 0.08);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(23, 23, 23, 0.06);
  --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.06);
  --shadow-md: 0 4px 16px rgba(23, 23, 23, 0.08);
  --shadow-lg: 0 16px 48px rgba(23, 23, 23, 0.14);

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --r: 12px;
  --control: 54px;
  --control-sm: 44px;

  /* Spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* Type */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenzo Sans", var(--font-ui);
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.5;

  /* Layout */
  --content-narrow: 640px;
  --content: 1120px;
  --content-wide: 1360px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 140ms;
  --med: 200ms;

  /* Layers */
  --z-sticky: 40; --z-nav: 60; --z-dropdown: 80; --z-overlay: 90; --z-modal: 100; --z-toast: 120;

  /* Semantic names (aliases of the tokens above) */
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --brand-orange: var(--brand);
  --brand-orange-hover: var(--brand-fill-hover);
  --focus-ring: var(--ring);
}

/* Dark values apply on screen only: printed pages (receipts, legal pages) always use the light palette. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0D0D0D;
    --surface: #151515;
    --surface-raised: #1B1B1B;
    --surface-subtle: #1B1B1B;
    --surface-sunken: #232323;
    --field: #111111;
    --overlay: rgba(0, 0, 0, 0.60);
    --glass: rgba(13, 13, 13, 0.86);
    --text: #F6F4F1;
    --text-2: #A6A29D;
    --text-3: #85817C;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);
    --mark-ink: #F6F4F1;
    --brand: #FF6A2E;
    --brand-fill: #E0480F;
    --brand-fill-hover: #F0540F;
    --brand-ink: #FF8A57;
    --brand-soft: rgba(255, 106, 46, 0.14);
    --ring: rgba(255, 106, 46, 0.28);
    --success: #47CD89;
    --success-soft: rgba(71, 205, 137, 0.10);
    --warning: #FDB022;
    --warning-soft: rgba(253, 176, 34, 0.11);
    --danger: #F97066;
    --danger-soft: rgba(249, 112, 102, 0.10);
    --info: #84ADFF;
    --info-soft: rgba(132, 173, 255, 0.11);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  }
}

/* No-script fallback only (the boot script always sets data-theme). */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0D0D0D; --surface: #151515; --surface-raised: #1B1B1B; --surface-subtle: #1B1B1B;
    --surface-sunken: #232323; --field: #111111; --overlay: rgba(0, 0, 0, 0.60); --glass: rgba(13, 13, 13, 0.86);
    --text: #F6F4F1; --text-2: #A6A29D; --text-3: #85817C;
    --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20);
    --mark-ink: #F6F4F1; --brand: #FF6A2E; --brand-fill: #E0480F; --brand-fill-hover: #F0540F;
    --brand-ink: #FF8A57; --brand-soft: rgba(255, 106, 46, 0.14); --ring: rgba(255, 106, 46, 0.28);
    --success: #47CD89; --success-soft: rgba(71, 205, 137, 0.10); --warning: #FDB022; --warning-soft: rgba(253, 176, 34, 0.11);
    --danger: #F97066; --danger-soft: rgba(249, 112, 102, 0.10); --info: #84ADFF; --info-soft: rgba(132, 173, 255, 0.11);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  }
}

/* ---------------------------------------------------------------------------------------------
   Legacy aliases. Pages written before the design system use these names; each maps onto a
   semantic token above so those pages follow the same palette in both themes. New code should
   use the semantic names. (Admin/workspace pages re-map a few of these in assets/admin.css,
   where --bg-2 means "card" rather than "tinted background".)
   --------------------------------------------------------------------------------------------- */
:root {
  --bg-2: var(--surface-subtle);
  --bg-3: var(--surface-sunken);
  --bg-4: color-mix(in srgb, var(--surface-sunken) 80%, var(--text) 6%);
  --bg-5: color-mix(in srgb, var(--surface-sunken) 70%, var(--text) 10%);
  --tx: var(--text);
  --tx-2: var(--text-2);
  --tx-3: var(--text-3);
  --ink: var(--text);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --cocoa: var(--text);
  --muted: var(--text-2);
  --muted-2: var(--text-3);
  --surface-2: var(--surface-subtle);
  --panel: var(--surface);
  --paper: var(--surface);
  --border-2: var(--border);
  --line: var(--border);
  --line-2: var(--border);
  --brand-d: var(--brand-fill-hover);
  --brand-2: var(--brand-fill);
  --brand-glow: transparent; /* legacy orange glow shadows are retired */
  --accent: var(--brand);
  --accent-600: var(--brand-fill);
  --accent-700: var(--brand-fill-hover);
  --accent-soft: var(--brand-soft);
  --gold: var(--warning);
  --gold-soft: var(--warning-soft);
  --warn: var(--warning);
  --warn-soft: var(--warning-soft);
  --jade: var(--success);
  --jade-soft: var(--success-soft);
  --leaf: var(--success);
  --confirm: var(--success);
  --confirm-soft: var(--success-soft);
  --shadow: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);
  --shadow-card: var(--shadow-sm);
  --shadow-pop: var(--shadow-lg);
  --radius: var(--radius-md);
  --r-sm: var(--radius-sm);
  --r-lg: var(--radius-lg);
  --rx: var(--radius-xl);
  --rl: var(--radius-lg);
  --rm: var(--radius-md);
  --rs: var(--radius-sm);
}