/* ═══════════════════════════════════════════════════════════════════
   BOX•E DESIGN TOKENS — the single source of truth for color, type,
   spacing, radii, and effects on boxeapp.com.

   Mirrors the Box•E app design system ("Technical Blueprint"):
   Material 3 ColorScheme.fromSeed(#6C63FF) with the app's overrides
   (surface → #F2F2F7, cards → pure white), Inter for UI text,
   Fira Code for small data labels.

   This file is intentionally standalone — no @imports, no component
   styles — so a future web app at app.boxeapp.com can import it as-is.
   Webfonts (Inter, Fira Code, Material Symbols Rounded) are loaded by
   each page via <link> tags.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ──────────────────────────────────────────────────── */
  --boxe-seed: #6C63FF;          /* AppTheme.defaultSeed */
  --boxe-logo-blue: #0047AB;     /* kBoxELogoBlue — logo/mascot backdrop only */

  /* ── M3 light scheme (Blueprint overrides applied) ──────────── */
  --primary: #4F44E2;
  --on-primary: #FFFFFF;
  --primary-container: #E3DFFF;
  --on-primary-container: #100069;
  --secondary: #5E5C71;
  --on-secondary: #FFFFFF;
  --secondary-container: #E3E0F9;
  --on-secondary-container: #1A1A2C;
  --tertiary: #7A5368;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #FFD8EA;
  --on-tertiary-container: #2F1123;
  --error: #BA1A1A;
  --on-error: #FFFFFF;
  --error-container: #FFDAD6;
  --on-error-container: #410002;
  --warning: #F57F17;
  --on-warning: #FFFFFF;
  --warning-container: #FFF8E1;
  --on-warning-container: #4E2A00;

  --surface: #F2F2F7;                 /* Blueprint override */
  --on-surface: #1C1B1F;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #F6F2F7;
  --surface-container: #FFFFFF;       /* Blueprint override */
  --surface-container-high: #EBE7EC;
  --surface-container-highest: #E5E1E6;
  --on-surface-variant: #47464F;
  --outline: #787680;
  --outline-variant: #C8C5D0;
  --inverse-surface: #313034;
  --inverse-on-surface: #F3EFF4;
  --inverse-primary: #C4C0FF;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-data: 'Fira Code', ui-monospace, monospace;
  --font-icons: 'Material Symbols Rounded';

  --type-display-large: 400 57px/1.12 var(--font-ui);
  --type-headline-large: 400 32px/1.25 var(--font-ui);
  --type-headline-medium: 600 28px/1.28 var(--font-ui);
  --type-headline-small: 700 24px/1.33 var(--font-ui);   /* "Box•E" brand title */
  --type-title-large: 400 22px/1.27 var(--font-ui);
  --type-title-medium: 600 16px/1.5 var(--font-ui);      /* card/section titles */
  --type-title-small: 600 14px/1.43 var(--font-ui);
  --type-body-large: 400 16px/1.5 var(--font-ui);
  --type-body-medium: 400 14px/1.43 var(--font-ui);
  --type-body-small: 400 12px/1.33 var(--font-ui);
  --type-label-large: 500 14px/1.43 var(--font-ui);
  --type-label-medium: 500 12px/1.33 var(--font-ui);
  --type-label-small: 500 11px/1.45 var(--font-data);    /* Blueprint: Fira Code */

  /* SectionHeader: UPPERCASE Fira Code, +1.1 tracking, primary color */
  --type-section-header: 600 11px/1.45 var(--font-data);
  --tracking-section-header: 1.1px;

  /* ── Spacing (mirror of AppSpacing) ─────────────────────────── */
  --space-page: 16px;
  --space-grid-gap: 8px;
  --space-list-item: 8px;
  --space-card-inner: 12px;
  --space-dialog: 24px;
  --space-field-gap: 12px;
  --space-section: 24px;

  /* Fixed component metrics */
  --hero-tile-thumb-w: 90px;
  --hero-tile-min-h: 84px;
  --list-row-h: 64px;
  --touch-target-min: 44px;

  /* ── Corner radii ───────────────────────────────────────────── */
  --radius-card: 24px;
  --radius-dialog: 32px;
  --radius-sheet: 32px;
  --radius-input: 32px;
  --radius-chip: 20px;
  --radius-glass-chip: 12px;
  --radius-pill: 999px;

  /* ── Glass & scrims ─────────────────────────────────────────── */
  --glass-blur: 8px;
  --glass-fill: rgba(255,255,255,.15);
  --glass-border: .5px solid rgba(255,255,255,.5);
  --scrim-flat: rgba(0,0,0,.45);
  --protect-gradient: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.7) 100%);
}

/* ── Derived + semantic aliases ─────────────────────────────────── */
:root {
  --surface-page: var(--surface);
  --surface-card: var(--surface-container);
  --text-body: var(--on-surface);
  --text-muted: var(--on-surface-variant);
  --text-placeholder: var(--outline);
  --text-accent: var(--primary);
  --highlight: color-mix(in srgb, var(--primary) 10%, transparent);

  --border-card: 1px solid color-mix(in srgb, var(--outline) 12%, transparent);
  --border-hairline: 1px solid var(--outline-variant);
  --divider: color-mix(in srgb, var(--outline-variant) 60%, transparent);
  --border-appbar: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  --appbar-fill: color-mix(in srgb, var(--surface) 80%, transparent);
}

/* ── Site layer — semantic tokens for boxeapp.com ───────────────── */
:root {
  --ink-primary: var(--on-surface);
  --ink-secondary: var(--on-surface-variant);
  --ink-inverse: #FFFFFF;
  --site-page: var(--surface);             /* #F2F2F7 */
  --site-panel: #FFFFFF;                   /* white cards */
  --site-sunken: #ECEAF4;                  /* nested-panel fill */
  --brand: var(--primary);                 /* #4F44E2 */
  --brand-container: var(--primary-container);
  --brand-blue: var(--boxe-logo-blue);     /* #0047AB — mascot backdrop only */
  /* cardboard accents, sampled from the mascot mark */
  --cardboard: #C89A78;
  --cardboard-tint: #F3ECE3;
  --cardboard-line: #17120E;
  --mascot-eye: #E8801A;
  --radius-badge: 22px;
  --radius-panel: var(--radius-card);      /* 24px */
  --content-max: 1180px;
  --block: clamp(72px, 9vw, 128px);
  --shadow-lift: 0 1px 2px rgba(20,19,31,.05), 0 18px 44px -20px rgba(79,68,226,.30);
  --shadow-float: 0 32px 72px -28px rgba(20,19,31,.32);
}