/* =========================================================================
   Design tokens — Cloud Billing Services (Distributor RevOps)
   Concept: precise, technical, AU-sovereign infrastructure. Operator-grade.
   ========================================================================= */

:root,
[data-theme='light'] {
  /* ---------- Surfaces (warm cream / paper) ---------- */
  --color-bg: #f6f3ec;              /* cream paper */
  --color-surface: #fbf8f1;         /* lifted surface */
  --color-surface-2: #ffffff;       /* card plain */
  --color-surface-offset: #eee9df;  /* subtle block */
  --color-surface-offset-2: #e5dfd2;
  --color-surface-dynamic: #d9d2c2;
  --color-divider: #d9d3c3;
  --color-border: #c9c1ad;

  /* ---------- Text (deep ink) ---------- */
  --color-text: #161b24;            /* near-black navy */
  --color-text-muted: #525c6b;
  --color-text-faint: #8a93a3;
  --color-text-inverse: #f6f3ec;

  /* ---------- Primary accent — ink navy ---------- */
  --color-primary: #111827;
  --color-primary-hover: #0a0f1a;
  --color-primary-active: #000000;
  --color-primary-highlight: #d7d4cc;

  /* ---------- Signal accent — amber (margin/recovery moments) ---------- */
  --color-amber: #b8732b;
  --color-amber-soft: #e8b981;
  --color-amber-highlight: #f2e2c9;

  /* ---------- Utility colors ---------- */
  --color-success: #2f6b3d;
  --color-success-highlight: #d4e3d6;
  --color-warning: #96451d;
  --color-warning-highlight: #eed6c2;
  --color-error: #8a2e3e;
  --color-error-highlight: #e8cfd2;
  --color-blue: #27496b;
  --color-blue-highlight: #cfd8e1;

  /* ---------- Radius ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.4rem;
  --radius-lg: 0.6rem;
  --radius-xl: 0.9rem;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(22, 27, 36, 0.06);
  --shadow-md: 0 6px 20px rgba(22, 27, 36, 0.08);
  --shadow-lg: 0 24px 60px rgba(22, 27, 36, 0.12);
  --shadow-inset: inset 0 0 0 1px var(--color-border);

  /* ---------- Content widths ---------- */
  --content-narrow: 680px;
  --content-default: 1040px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* ---------- Transitions ---------- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-expressive: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Fonts ---------- */
  --font-display: 'Boska', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Satoshi', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', ui-monospace, monospace;

  /* ---------- Type scale ---------- */
  --text-xs: clamp(0.75rem, 0.72rem + 0.18vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.22vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --text-hero: clamp(3rem, 1.6rem + 5.8vw, 5.75rem);

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}

/* =========================================================================
   DARK MODE — ink background, cream text
   ========================================================================= */
[data-theme='dark'] {
  --color-bg: #0c0f15;
  --color-surface: #111621;
  --color-surface-2: #161c29;
  --color-surface-offset: #131925;
  --color-surface-offset-2: #1a2130;
  --color-surface-dynamic: #222b3d;
  --color-divider: #222938;
  --color-border: #2b3448;

  --color-text: #ece6d7;
  --color-text-muted: #8892a3;
  --color-text-faint: #5a6273;
  --color-text-inverse: #0c0f15;

  --color-primary: #ece6d7;           /* cream becomes CTA in dark */
  --color-primary-hover: #ffffff;
  --color-primary-active: #d3cebf;
  --color-primary-highlight: #1e2535;

  --color-amber: #e6b36a;
  --color-amber-soft: #c4864a;
  --color-amber-highlight: #3a2e1d;

  --color-success: #7fb08a;
  --color-success-highlight: #1d2c23;
  --color-warning: #d5895a;
  --color-warning-highlight: #332015;
  --color-error: #d47989;
  --color-error-highlight: #332029;
  --color-blue: #7aa0cc;
  --color-blue-highlight: #1b2532;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 0 0 1px var(--color-border);
}

/* System preference fallback when user hasn't toggled */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0c0f15;
    --color-surface: #111621;
    --color-surface-2: #161c29;
    --color-surface-offset: #131925;
    --color-surface-offset-2: #1a2130;
    --color-surface-dynamic: #222b3d;
    --color-divider: #222938;
    --color-border: #2b3448;
    --color-text: #ece6d7;
    --color-text-muted: #8892a3;
    --color-text-faint: #5a6273;
    --color-text-inverse: #0c0f15;
    --color-primary: #ece6d7;
    --color-primary-hover: #ffffff;
    --color-primary-active: #d3cebf;
    --color-primary-highlight: #1e2535;
    --color-amber: #e6b36a;
    --color-amber-soft: #c4864a;
    --color-amber-highlight: #3a2e1d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  }
}