/* ===============================
   MagiQa Design Tokens
   Loaded before style.css — do not add component rules here.
=============================== */

:root {
  /* —— Brand palette —— */
  --color-bg: #ffffff;
  --color-surface: #f8fbff;
  --color-surface-alt: #f0f6ff;
  --color-surface-muted: #f8fafc;
  --color-section-soft: #f7fbff;
  --color-section-alt: #f0f7ff;

  --color-text: #1a1a1a;
  --color-heading: #0a1a2e;
  --color-heading-deep: #122a45;
  --color-text-secondary: #334155;
  --color-muted-strong: #475569;
  --color-muted-soft: #64748b;
  --color-muted: #6c757d;

  --color-primary: #0057d8;
  --color-primary-soft: #0a58ca;
  --color-primary-accent: #0099ff;
  --color-primary-alt: #007bff;
  --color-primary-hover: #0046b0;
  --color-primary-muted: rgba(0, 87, 216, 0.12);
  --color-primary-bg: #e8f2ff;
  --color-border-accent: #dbeafe;

  --color-border: #e2e8f0;
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-border-primary: rgba(0, 87, 216, 0.12);

  --color-ink: #0f172a;
  --color-white: #ffffff;
  --color-on-dark: #e5e7eb;
  --color-on-dark-soft: #c8d9f0;

  --color-success: #10b981;
  --color-success-deep: #059669;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;

  /* —— Typography —— */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.02rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-section: 1.35rem;

  /* Fluid heading scale */
  --font-size-display: clamp(2.5rem, 5vw, 3.5rem);
  --font-size-h1: clamp(1.85rem, 3.5vw, 2.45rem);
  --font-size-h2: clamp(2rem, 4vw, 2.75rem);
  --font-size-h3: clamp(1.5rem, 3vw, 1.875rem);
  --font-size-h4: 1.25rem;
  --font-size-lead: clamp(1.05rem, 2vw, 1.2rem);
  --font-size-sublead: clamp(1.1rem, 2vw, 1.25rem);

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

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.65;
  --line-height-relaxed: 1.75;
  --line-height-body: 1.7;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-snug: -0.015em;
  --letter-spacing-normal: 0;
  --letter-spacing-eyebrow: 0.12em;
  --letter-spacing-eyebrow-wide: 0.14em;

  /* —— Radii —— */
  --radius-xs: 0.5rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  /* —— Shadows —— */
  --shadow-soft: 0 4px 18px rgba(15, 23, 42, 0.06);
  --shadow-medium: 0 12px 35px rgba(15, 23, 42, 0.12);
  --shadow-strong: 0 18px 45px rgba(15, 23, 42, 0.18);
  --shadow-primary: 0 10px 25px rgba(0, 87, 216, 0.28);
  --shadow-primary-hover: 0 14px 35px rgba(0, 87, 216, 0.38);

  /* —— Spacing —— */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;

  /* —— Layout —— */
  --content-max-width: 72rem;
  --content-narrow: 42rem;
  --content-prose: 44rem;
  --container-padding: 20px;
  --navbar-offset: 72px;
}