/* ============================================================
   tokens.css — FluentShadow Design System · Slate Warm
   All design values live here. No hardcoded values elsewhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Colors · Base ─── */
  --color-bg: #14100d;
  --color-surface: #1b1611;
  --color-surface-2: #241d16;
  --color-border: #2d241b;
  --color-border-strong: #3a2f24;

  /* ─── Colors · Text ─── */
  --color-text: #f3ebde;
  --color-text-muted: #9b8d7c;
  --color-text-subtle: #6a5f52;
  --color-text-inverse: #14100d;

  /* ─── Colors · Primary (accent) ─── */
  --color-primary: #ff6a1a;
  --color-primary-hover: #ff824a;
  --color-primary-dim: rgba(255, 106, 26, 0.12);
  --color-primary-contrast: #14100d;

  /* ─── Colors · Semantic ─── */
  --color-success: #6ecb9d;
  --color-success-dim: rgba(110, 203, 157, 0.12);
  --color-warning: #e8b94a;
  --color-warning-dim: rgba(232, 185, 74, 0.12);
  --color-danger: #e06a5c;
  --color-danger-dim: rgba(224, 106, 92, 0.1);

  /* ─── Legacy aliases (for any lingering references) ─── */
  --color-accent: var(--color-primary);
  --color-accent-hover: var(--color-primary-hover);
  --color-accent-dim: var(--color-primary-dim);

  /* ─── Typography ─── */
  --font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Besley', Georgia, 'Times New Roman', serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --font-size-xs: 0.6875rem;   /* 11px */
  --font-size-sm: 0.75rem;     /* 12px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md: 0.9375rem;   /* 15px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.375rem;    /* 22px */
  --font-size-2xl: 1.75rem;    /* 28px */

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

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-loose: 1.7;

  /* ─── Spacing · 4px scale ─── */
  --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-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* ─── Radius ─── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ─── Shadows (multi-layer: ambient + key light on warm dark) ─── */
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 1px 1px rgba(0, 0, 0, 0.12);
  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 10px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 18px 44px rgba(0, 0, 0, 0.5);

  /* ─── Motion · easing ─── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Transitions ─── */
  --transition-fast: 0.12s var(--ease-out-quart);
  --transition-base: 0.22s var(--ease-out-smooth);

  /* ─── Focus ring (WCAG-visible on dark surfaces) ─── */
  --focus-ring: 0 0 0 3px rgba(255, 106, 26, 0.35);
  --focus-ring-strong: 0 0 0 2px var(--color-primary);
}