/* ==========================================================================
   BE | Belkar Business Engineering — Design Tokens
   Source of Truth: docs/BE-gilded-steel-tokens.md (v3.0 LOCKED)
   ========================================================================== */

:root {
  /* Native browser UI & scrollbar color scheme (Dark primary) */
  color-scheme: dark light;

  /* === Tier 1: Dark Primitives === */
  --be-ink-950: #0D0E10;
  --be-ink-900: #1A1816;
  --be-ink-850: #23211D;
  --be-ink-800: #302C26;
  --be-ink-700: #36332E;
  --be-ink-600: #44403A;
  --be-cream-50: #F7F2EB;
  --be-cream-200: #DED1BD;
  --be-amber-400: #E8A33D;
  --be-amber-300: #F0B254;
  --be-slate-400: #7E93A3;
  --be-green-500: #4CAF7A;
  --be-orange-700: #B86A1E;
  --be-red-500: #C73E3E;

  /* === Tier 1: Light Primitives === */
  --be-paper-50: #FAF8F5;
  --be-paper-0: #FFFFFF;
  --be-paper-100: #F7F4F0;
  --be-paper-200: #F0ECE6;
  --be-paper-300: #DDD4CB;
  --be-paper-400: #CFC4B6;
  --be-char-900: #1F1E1C;
  --be-char-600: #736755;
  --be-amber-700: #8A5A12;
  --be-amber-800: #754D0F;
  --be-slate-600: #4F6372;
  --be-green-700: #2A7A4F;
  --be-orange-800: #B86D23;
  --be-red-700: #A32E2E;

  /* === Tier 2: Semantic Tokens (Dark — Primary) === */
  --be-canvas: var(--be-ink-950);
  --be-surface-nav: var(--be-ink-900);
  --be-surface-nav-glass: rgba(26, 24, 22, 0.85);
  --be-surface-card: var(--be-ink-850);
  --be-surface-raised: var(--be-ink-800);
  --be-border: var(--be-ink-700);
  --be-border-strong: var(--be-ink-600);

  --be-accent: var(--be-amber-400);
  --be-accent-hover: var(--be-amber-300);
  --be-accent-ink: #0D0E10;
  --be-accent-muted: rgba(232, 163, 61, 0.12);
  --be-accent-border: rgba(232, 163, 61, 0.30);

  --be-data: var(--be-slate-400);
  --be-data-muted: rgba(126, 147, 163, 0.10);

  --be-text-primary: var(--be-cream-50);
  --be-text-secondary: var(--be-cream-200);
  --be-text-muted: #8A8275;
  --be-text-accent: var(--be-amber-400);
  --be-text-data: var(--be-slate-400);

  --be-success: var(--be-green-500);
  --be-warning: var(--be-orange-700);
  --be-danger: var(--be-red-500);

  /* === Typography === */
  --be-font-display: 'Arimo', system-ui, sans-serif;
  --be-font-body: 'Lunasima', system-ui, sans-serif;
  --be-font-data: 'Space Mono', 'Courier New', monospace;

  /* Type Scale */
  --be-text-hero: clamp(2rem, 4.2vw, 2.75rem);
  --be-text-h1: clamp(1.75rem, 2.5vw, 2.125rem);
  --be-text-h2: 1.25rem;
  --be-text-h3: 1rem;
  --be-text-prose: 1rem;
  --be-text-body: 0.875rem;
  --be-text-small: 0.75rem;
  --be-text-micro: 0.625rem;
  --be-text-data-lg: 1.5rem;
  --be-text-data-sm: 0.75rem;

  /* === Spacing === */
  --be-space-xs: 4px;
  --be-space-sm: 8px;
  --be-space-md: 12px;
  --be-space-lg: 16px;
  --be-space-xl: 24px;
  --be-space-2xl: 40px;
  --be-space-3xl: 64px;
  --be-space-section: clamp(4.5rem, 9vw, 7.5rem);

  /* === Radius === */
  --be-radius-sm: 4px;
  --be-radius-md: 6px;
  --be-radius-lg: 8px;
  --be-radius-xl: 12px;

  /* === Layout & Motion === */
  --be-container-max: 1240px;
  --be-container-gutter: clamp(1.25rem, 4vw, 3rem);
  --be-nav-height: 10dvh;
  --be-hero-height: 90dvh;
  --be-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Native UI accent & scrollbar */
  accent-color: var(--be-accent);
  scrollbar-color: var(--be-border-strong) var(--be-canvas);
}

/* Explicit Dark Override */
:root:has(> head > meta[name="color-scheme"][content="dark"]) {
  color-scheme: dark;
}

/* Explicit Light Override */
:root:has(> head > meta[name="color-scheme"][content="light"]),
[data-theme="light"] {
  color-scheme: light;

  --be-canvas: var(--be-paper-50);
  --be-surface-nav: var(--be-paper-100);
  --be-surface-nav-glass: rgba(247, 244, 240, 0.85);
  --be-surface-card: var(--be-paper-0);
  --be-surface-raised: var(--be-paper-200);
  --be-border: var(--be-paper-300);
  --be-border-strong: var(--be-paper-400);

  --be-accent: var(--be-amber-700);
  --be-accent-hover: #734A0D;
  --be-accent-ink: #FAF8F5;
  --be-accent-muted: rgba(138, 90, 18, 0.10);
  --be-accent-border: rgba(138, 90, 18, 0.30);

  --be-data: var(--be-slate-600);
  --be-data-muted: rgba(79, 99, 114, 0.08);

  --be-text-primary: var(--be-char-900);
  --be-text-secondary: var(--be-char-600);
  --be-text-muted: #9A8F7C;
  --be-text-accent: var(--be-amber-800);
  --be-text-data: var(--be-slate-600);

  --be-success: var(--be-green-700);
  --be-warning: var(--be-orange-800);
  --be-danger: var(--be-red-700);
}