/* ==========================================================================
   Design tokens — ShamuWare Academy & Consulting
   Single source of truth for color, type, spacing, radius, shadow, motion.
   See CLAUDE.md §10 before changing any value here.
   ========================================================================== */

:root {
  /* ---- Color: base palette --------------------------------------------- */
  --color-ink-900: #0f1b2d; /* Ink Navy — primary dark surface / text on light */
  --color-ink-800: #16273d;
  --color-slate-700: #1b324b; /* Slate — secondary dark surface */
  --color-slate-600: #253f5c;
  --color-teal-500: #1f9e8d; /* Signal Teal — the single restrained accent */
  --color-teal-400: #29b6a3;
  --color-teal-700: #157567;
  --color-vellum-100: #f5f3ee; /* Vellum — warm-neutral light background */
  --color-vellum-050: #fbfaf7;
  --color-paper-000: #fff;
  --color-graphite-800: #26303d; /* body text on light surfaces */
  --color-graphite-600: #4b5563;
  --color-graphite-400: #7c8794;
  --color-line-light: #c7d2dd; /* Blueprint Line — hairlines on light surfaces */
  --color-line-dark: #2a3f58; /* Blueprint Line — hairlines on dark surfaces */
  --color-amber-600: #a15c1f; /* reserved: form error / warning text, AA on vellum */
  --color-amber-100: #f6e7d8;

  /* ---- Color: semantic tokens -------------------------------------------- */
  --color-bg: var(--color-vellum-100);
  --color-bg-raised: var(--color-paper-000);
  --color-bg-inverse: var(--color-ink-900);
  --color-bg-inverse-raised: var(--color-slate-700);
  --color-text: var(--color-graphite-800);
  --color-text-muted: var(--color-graphite-600);
  --color-text-inverse: var(--color-vellum-050);
  --color-text-inverse-muted: #b7c3d1;
  --color-accent: var(--color-teal-500);
  --color-accent-strong: var(--color-teal-700);
  --color-accent-on-dark: var(--color-teal-400);
  --color-border: var(--color-line-light);
  --color-border-inverse: var(--color-line-dark);
  --color-focus-ring: var(--color-teal-700);
  --color-danger: #9a3412;
  --color-danger-bg: #fbe8e0;

  /* ---- Typography --------------------------------------------------------
     System stacks only: sans for display (technical character), serif for
     body (human warmth). No web-font network request. */
  --font-display:
    -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial, ui-sans-serif, system-ui, sans-serif;
  --font-body:
    'Iowan Old Style', 'Palatino Linotype', palatino, 'URW Palladio L', georgia, 'Times New Roman',
    ui-serif, serif;
  --font-mono: 'SF Mono', 'Cascadia Code', consolas, 'Liberation Mono', monospace;

  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-md: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --text-lg: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --text-3xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem);
  --text-4xl: clamp(3rem, 2.3rem + 3.5vw, 4.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing scale (8px base, fluid where it improves composition) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: clamp(2.5rem, 2.1rem + 2vw, 4rem);
  --space-2xl: clamp(3.5rem, 2.8rem + 3.5vw, 6rem);
  --space-3xl: clamp(5rem, 4rem + 5vw, 8.5rem);

  /* ---- Layout ------------------------------------------------------------
     .container caps at --container-max and centers via margin-inline:auto;
     --gutter is its own side padding. Never add extra centering padding on
     top of this — see CLAUDE.md §10 for the incident that caused. */
  --container-max: 90rem; /* ~1440px */
  --container-wide: 100rem; /* ~1600px — full-bleed diagrams/timelines only */
  --container-narrow: 46rem;
  --container-text: 38rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* ---- Border / radius / shadow ------------------------------------------ */
  --border-hairline: 1px solid var(--color-border);
  --border-hairline-inverse: 1px solid var(--color-border-inverse);
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.08);
  --shadow-md: 0 6px 20px -6px rgba(15, 27, 45, 0.18);
  --shadow-lg: 0 16px 40px -12px rgba(15, 27, 45, 0.28);

  /* ---- Motion -------------------------------------------------------------
     Respect prefers-reduced-motion — see base.css. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --duration-reveal: 600ms;

  /* ---- Breakpoints (referenced in comments; media queries hardcode px) -- */
  --bp-sm: 375px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* ---- Z-index scale ------------------------------------------------------ */
  --z-nav: 100;
  --z-overlay: 200;
  --z-skip-link: 300;
}