/* ═══════════════════════════════════════════════════════════
   BusinessWelder Design Tokens
   Source of truth: UI-DESIGN-DIRECTION.md §2 (Concept 02 — Build Studio)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* §2.1 Color */
  --ink: #0f1115;
  --ink-2: #22262d;
  --line-dark: #2d323a;
  --muted: #69717d;
  --paper: #f4f6f8;
  --white: #ffffff;
  --line: #dfe4ea;
  --blue: #063579;
  --blue-dark: #032554;
  --blue-soft: #e7eefb;
  --orange: #ff7a1a;
  --orange-dark: #d85a00;
  --orange-soft: #fff2e9;
  --green: #16855b;
  --green-soft: #edf8f3;
  --red: #c73e4c;
  --red-soft: #fff0f2;

  /* §2.2 Elevation */
  --shadow-sm: 0 1px 2px rgba(15,17,21,.05), 0 8px 24px rgba(15,17,21,.06);
  --shadow-md: 0 24px 70px rgba(15,17,21,.14);

  /* §2.3 Radius */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;

  /* §2.4 Type */
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Container */
  --max-w: 1420px;

  /* Z-index */
  --z-sticky: 200;
  --z-modal: 500;

  /* ═══ Aliases for page-styles.css naming convention ═══ */
  /* Color aliases */
  --color-background: var(--paper);
  --color-background-alt: var(--white);
  --color-background-muted: #eef1f5;
  --color-border: var(--line);
  --color-card: var(--white);
  --color-danger: var(--red);
  --color-navy: var(--ink);
  --color-navy-dark: #050608;
  --color-orange: var(--orange);
  --color-orange-light: var(--orange-soft);
  --color-success: var(--green);
  --color-success-bg: var(--green-soft);
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--muted);

  /* Font size aliases */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 42px;
  --font-size-5xl: 56px;

  /* Font weight aliases */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line height aliases */
  --line-height-relaxed: 1.7;
  --line-height-snug: 1.3;

  /* Radius aliases */
  --radius-xl: var(--radius-lg);
  --radius-full: 999px;

  /* Shadow aliases */
  --shadow-lg: var(--shadow-md);
  --shadow-xl: 0 32px 90px rgba(15,17,21,.18);
  --shadow-2xl: 0 40px 120px rgba(15,17,21,.24);

  /* Spacing aliases */
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-3);
  --spacing-lg: var(--space-4);
  --spacing-xl: var(--space-4);
  --spacing-2xl: var(--space-5);
  --spacing-3xl: var(--space-6);
  --spacing-4xl: var(--space-7);

  /* Transition alias */
  --transition-base: all .25s cubic-bezier(.4,0,.2,1);
}