/*
  Design tokens — single source of truth for the entire site.
  Change a value here and it propagates everywhere. Never hardcode
  a color, spacing, or timing value outside this file.
*/

:root {
  /* ---------- Color ---------- */
  --color-primary: #111111;      /* headings, primary text */
  --color-secondary: #555555;    /* body copy, muted text */
  --color-bg: #fafafa;           /* page background */
  --color-card: #ffffff;         /* card / surface background */
  --color-border: #eaeaea;       /* hairlines, dividers, card borders */
  --color-accent: #2563eb;       /* links, CTAs, focus rings */
  --color-accent-hover: #1d4ed8;
  --color-accent-soft: #eff4ff;  /* tinted backgrounds for accent chips */

  /* status (used sparingly — project/certificate badges only) */
  --color-status-live: #15803d;
  --color-status-live-bg: #f0fdf4;
  --color-status-progress: #b45309;
  --color-status-progress-bg: #fffbeb;
  --color-status-planned: #555555;
  --color-status-planned-bg: #f4f4f5;

  /* ---------- Dark surface (footer, CTA bands — used deliberately, not as a theme) ---------- */
  --color-dark-surface: #0d0d0f;       /* near-black, slightly cool — not pure #000 */
  --color-dark-surface-raised: #17171a; /* one step up, for cards sitting on dark */
  --color-dark-text: #f5f5f5;
  --color-dark-text-muted: #9a9a9f;
  --color-dark-border: rgba(255, 255, 255, 0.08);
  --color-dark-accent: #5b8def;        /* accent lifted a touch for AA contrast on dark */

  /* ---------- Typography ---------- */
  --font-display: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero: clamp(2.75rem, 5vw + 1rem, 5rem);
  --fs-h1: clamp(2.25rem, 3vw + 1rem, 3rem);
  --fs-h2: clamp(1.75rem, 2vw + 1rem, 2.25rem);
  --fs-h3: 1.375rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ---------- Layout ---------- */
  --container-max: 1120px;
  --container-padding: var(--space-5);
  --nav-height: 72px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-md: 0 6px 20px rgba(17, 17, 17, 0.07);
  --shadow-lg: 0 20px 48px rgba(17, 17, 17, 0.14);
  --shadow-xl: 0 32px 64px rgba(17, 17, 17, 0.18);
  --border-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 260ms;
  --duration-slow: 420ms;

  /* ---------- Breakpoints (reference only — media queries live in responsive.css) ---------- */
  /* mobile: 375px · tablet: 768px · laptop: 1024px · desktop: 1440px */
}