/*
  DESIGN SYSTEM — TOKENS
  v1 — do not edit in place once apps depend on /v1/. Cut a /v2/ folder instead.
  Reconciled against Texta's live tokens.css + design-system.css (Session 24).

  BRAND OVERRIDE PATTERN — this is the whole trick that makes one system work
  across apps with different identities. Each app sets exactly TWO variables,
  before this file's effects are used (e.g. in Layout.jsx, once account data
  loads) — everything else (--brand-light, --brand-shadow, --brand-border,
  the orb colors, button glows) derives automatically:

    root.style.setProperty('--brand', '#14b8a6');       // Texta (teal)
    root.style.setProperty('--brand-rgb', '20, 184, 166');

    root.style.setProperty('--brand', '#f97316');       // Simple Invoice (orange)
    root.style.setProperty('--brand-rgb', '249, 115, 22');

  Default is transparent — never a fallback color — so nothing flashes the
  wrong hue before an account's real brand color loads.
*/

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand (set at runtime per-app; do not hardcode a fallback color) ---------- */
  --brand: transparent;
  --brand-rgb: 0, 0, 0;
  --brand-light: rgba(var(--brand-rgb), 0.11);
  --brand-shadow: rgba(var(--brand-rgb), 0.28);
  --brand-border: rgba(var(--brand-rgb), 0.22);

  /* ---------- Background ---------- */
  --color-bg: linear-gradient(160deg, #f8f8f8 0%, #fbfbfb 50%, #ffffff 100%);

  /* ---------- Surfaces ---------- */
  --color-sidebar: transparent;
  --color-surface: rgba(255, 255, 255, 0.62);
  --color-surface-raised: rgba(255, 255, 255, 0.78);
  --color-surface-solid: #ffffff;
  --color-black: #0f172a;
  --color-white: #ffffff;
  --glass-border: rgba(255, 255, 255, 0.8);

  /* ---------- Text ---------- */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94a3b8;
  --color-text-disabled: #cbd5e1;

  /* ---------- Borders ---------- */
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-light: rgba(15, 23, 42, 0.05);
  --border: 0.5px solid rgba(15, 23, 42, 0.08);
  --border-light: 0.5px solid rgba(15, 23, 42, 0.05);
  --hairline: 0.5px solid rgba(15, 23, 42, 0.08);
  --hairline-quiet: 0.5px solid rgba(15, 23, 42, 0.05);

  /* ---------- Nav ---------- */
  --color-nav-hover-bg: rgba(15, 23, 42, 0.04);

  /* ---------- Status (bg / border / text triads — never use alone) ---------- */
  --color-green-bg: #eaf3de;    --color-green-border: #c0dd97;  --color-green-text: #15803d;  --color-green-strong: #047857;
  --color-amber-bg: #faeeda;    --color-amber-border: #fac775;  --color-amber-text: #b45309;
  --color-red: #ef4444;         --color-red-bg: #fde8e8;        --color-red-border: #f5a5a5;   --color-red-text: #b91c1c;

  /* ---------- Accent palette (charts / sparklines) ---------- */
  --accent-sky: #0ea5e9;
  --accent-emerald: #10b981;
  --accent-violet: #8b5cf6;

  /* ---------- Typography ---------- */
  --font-display: 'Permanent Marker', cursive;      /* wordmark only, never body/UI text */
  --font-ui: 'DM Sans', system-ui, sans-serif;       /* all UI text: labels, buttons, body, nav */
  --font-mono: 'DM Mono', ui-monospace, monospace;   /* numbers, IDs, phone numbers, balances */

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 26px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.08em;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---------- Spacing (4px scale — never use arbitrary px) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px;

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 1px 12px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
  --shadow-modal: 0 20px 60px rgba(15, 23, 42, 0.18);
  --shadow-brand: 0 6px 16px -6px var(--brand-shadow);
  --shadow-brand-lg: 0 12px 32px -8px rgba(var(--brand-rgb), 0.50);

  /* Signature glass shadow recipe — inner highlight + outer shadow layers.
     No backdrop-filter — removed in Session 24 for scroll performance. */
  --shadow-glass:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 0 0 0.5px rgba(15, 23, 42, 0.04),
    0 12px 40px -12px rgba(15, 23, 42, 0.13),
    0 4px 14px -6px rgba(15, 23, 42, 0.07);

  /* ---------- Transitions ---------- */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;
  --t-fast: 120ms cubic-bezier(.2,.8,.2,1);
  --t-base: 200ms cubic-bezier(.2,.8,.2,1);
  --t-slow: 360ms cubic-bezier(.2,.8,.2,1);

  /* ---------- Layout ---------- */
  --sidebar-width: 232px;
  --topbar-height: 56px;
  --content-max: 960px;
  --content-max-wide: 1320px;

  /* ---------- Breakpoints (reference only — CSS vars don't work in @media,
     documented so every app's media queries agree) ----------
     640px  — primary mobile target, stat grids go 1-column
     768px  — sidebar collapses, mobile top bar appears, compose preview hidden
     1024px — two-column layouts stack, dashboard stat grid goes 2-col
     1280px — wide layout, increased page padding */
}