/*
 * design-system.css — single source of truth for all design tokens.
 *
 * TO RESTYLE THE ENTIRE SITE: change a value here. Nothing else needs editing.
 * Every other CSS file must reference these via var(). No raw color, font,
 * spacing, or duration values belong anywhere else.
 */

:root {

  /* ── Core palette ─────────────────────────────────────────────── */
  --color-bg:           #f4f6fa;
  --color-text:         #1b1e27;
  --color-text-muted:   #4e5570;
  --color-accent-blue:  #1a6fd4;
  --color-accent-amber: #a07018;
  --color-border:       #dce0eb;
  --color-surface:      #ffffff;

  /* ── Extended palette ─────────────────────────────────────────── */
  --color-surface-2:          #edf0f6;
  --color-border-light:       #c6cad8;
  --color-text-dim:           #8d95ac;

  --color-accent-blue-hover:  #1558b0;
  --color-accent-blue-dim:    rgba(26, 111, 212, 0.10);
  --color-accent-blue-glow:   rgba(26, 111, 212, 0.18);

  --color-accent-amber-hover: #86601a;
  --color-accent-amber-dim:   rgba(160, 112, 24, 0.10);

  --color-navbar-bg-solid:    rgba(244, 246, 250, 0.95);

  --color-success:            #1a7a3a;
  --color-success-bg:         rgba(26, 122, 58, 0.08);
  --color-success-border:     rgba(26, 122, 58, 0.25);
  --color-error:              #c0392b;
  --color-error-bg:           rgba(192, 57, 43, 0.08);
  --color-error-border:       rgba(192, 57, 43, 0.25);

  /* ── Typography ───────────────────────────────────────────────── */
  --font-heading: 'IBM Plex Mono', monospace;
  --font-body:    'IBM Plex Sans', sans-serif;

  /* ── Type scale ───────────────────────────────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  3rem;

  /* ── Line heights ─────────────────────────────────────────────── */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Spacing ──────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ───────────────────────────────────────────────────── */
  --container-max:    1200px;
  --container-wide:   1440px;
  --container-narrow: 800px;
  --sidebar-width:    220px;
  --navbar-height:    64px;

  /* ── Radii ────────────────────────────────────────────────────── */
  --border-radius:    6px;
  --border-radius-lg: 12px;

  /* ── Shadows (lighter for light backgrounds) ──────────────────── */
  --shadow-sm:         0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:         0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:         0 10px 30px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.08);
  --shadow-blue:       0 0 16px rgba(26,111,212,.14), 0 0 32px rgba(26,111,212,.06);
  --shadow-card-hover: 0 8px 28px rgba(0,0,0,.10), 0 0 16px rgba(26,111,212,.10);

  /* ── Animation ────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(.34, 1.56, .64, 1);
  --anim-stagger:      80ms;

  /* ── Z-index ──────────────────────────────────────────────────── */
  --z-above:  10;
  --z-navbar: 100;
  --z-modal:  200;

  /* ──────────────────────────────────────────────────────────────
     BACKWARD-COMPATIBLE ALIASES
  ────────────────────────────────────────────────────────────── */
  --font-mono:      var(--font-heading);
  --font-sans:      var(--font-body);

  --radius-sm:      3px;
  --radius-md:      var(--border-radius);
  --radius-lg:      10px;
  --radius-xl:      16px;
  --radius-full:    9999px;

  --color-bg-dark:  var(--color-bg);
}