/* =============================================================================
   TekFocus — base.css
   Reset, design tokens, and base element styles.

   This is the foundation every other stylesheet builds on. Load order:
   base.css → typography.css → layout.css → components.css → pages.

   Brand standards (locked — see CLAUDE.md):
     Purple  #461D7C   Gold  #FDD023   Cream  #F5F2EA (canvas)
     Fraunces (display) / IBM Plex Sans (body) / IBM Plex Mono (operational)
     Personality: Disciplined. Direct. Experienced.

   Color usage rule (WCAG 2.1 AA):
     - Purple text on cream  → 10.9:1 (AAA) — safe for body and headings.
     - Gold text on cream    → 1.3:1       — NEVER use gold for text on cream.
       Gold is decorative on light surfaces; it carries text only on purple.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Modern reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  /* Respect the user's browser font-size preference — do not hard-set px. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-tab-size: 2;
  tab-size: 2;
  color-scheme: light;
}

body {
  min-block-size: 100vh;
  min-block-size: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Media defaults to block + responsive, never overflowing its container. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* Form controls inherit type instead of resetting to the UA default. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Avoid long unbreakable strings blowing out the layout. */
p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dt,
dd,
figcaption {
  overflow-wrap: break-word;
}

/* Headings inherit a balanced wrap where supported (no orphan words). */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Lists used as semantic lists keep markers; lists used for layout opt out
   via [role="list"] without losing their semantics. */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* Keep anchored scroll targets clear of any sticky header. */
:target {
  scroll-margin-block-start: var(--scroll-offset, 6rem);
}

/* -----------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand palette (raw, locked values) ------------------------------- */
  --color-purple: #461d7c;
  --color-gold: #fdd023;
  --color-cream: #f5f2ea;

  /* Purple ramp — derived shades for hover, borders, and dark surfaces. */
  --color-purple-900: #1c0d33;
  --color-purple-800: #2c1450;
  --color-purple-700: #35155e;
  --color-purple-600: #461d7c; /* base */
  --color-purple-500: #5d2ba0;
  --color-purple-400: #7a4fc0;

  /* Gold ramp — accents only; never body text on light surfaces. */
  --color-gold-600: #d9a800;
  --color-gold-500: #fdd023; /* base */
  --color-gold-400: #ffdd54;

  /* Cream / paper ramp — canvas and elevated surfaces. */
  --color-cream-50: #fbf9f4; /* lifted surface (cards) */
  --color-cream-100: #f5f2ea; /* base canvas */
  --color-cream-200: #ece7d9; /* sunken / subtle fill */

  /* Ink — warm near-black for long-form text on cream (14.8:1 on canvas). */
  --color-ink: #211b2b;
  --color-ink-muted: #564f5e; /* secondary text — 7.0:1 on canvas (AAA) */
  --color-ink-faint: #655e6e; /* captions / meta — 5.6:1 on canvas, 5.0:1 on sunken (AA everywhere) */

  /* --- Semantic color roles --------------------------------------------- */
  --color-bg: var(--color-cream-100);
  --color-surface: var(--color-cream-50);
  --color-surface-sunken: var(--color-cream-200);
  --color-surface-inverse: var(--color-purple-600);
  --color-surface-inverse-deep: var(--color-purple-900);

  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  --color-text-faint: var(--color-ink-faint);
  --color-text-on-inverse: var(--color-cream-100);
  --color-text-on-inverse-muted: color-mix(in srgb, var(--color-cream-100) 72%, transparent);

  --color-heading: var(--color-purple-600);
  --color-brand: var(--color-purple-600);
  --color-accent: var(--color-gold-500);

  --color-link: var(--color-purple-600);
  --color-link-hover: var(--color-purple-800);

  /* Functional UI state — error red (not a brand color). 5.3:1 on cream (AA). */
  --color-error: #b3261e;

  /* Hairlines and dividers — tinted from the brand, never pure gray. */
  --color-border: color-mix(in srgb, var(--color-purple-600) 16%, transparent);
  --color-border-strong: color-mix(in srgb, var(--color-purple-600) 32%, transparent);
  --color-border-inverse: color-mix(in srgb, var(--color-cream-100) 20%, transparent);

  /* Focus ring — gold on dark, purple on light; see :focus-visible below. */
  --color-focus: var(--color-purple-600);
  --color-focus-inverse: var(--color-gold-500);

  --color-selection-bg: var(--color-gold-500);
  --color-selection-text: var(--color-purple-900);

  /* --- Typography: families --------------------------------------------- */
  --font-display: "Fraunces Variable", "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Code",
    Consolas, "Liberation Mono", Menlo, monospace;

  /* --- Typography: weights ---------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Typography: fluid type scale ------------------------------------- */
  /* Mobile-first via clamp(): each step grows between the 360px floor and a
     ~1240px ceiling. Ratio ~1.2 (minor third) on mobile, opening up at scale. */
  --text-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); /* 12 → 13 */
  --text-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem); /* 14 → 15 */
  --text-base: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); /* 16 → 18 */
  --text-md: clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem); /* 18 → 21 */
  --text-lg: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem); /* 20 → 24 */
  --text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); /* 24 → 32 */
  --text-2xl: clamp(1.875rem, 1.62rem + 1.27vw, 2.75rem); /* 30 → 44 */
  --text-3xl: clamp(2.25rem, 1.85rem + 2.0vw, 3.5rem); /* 36 → 56 */
  --text-4xl: clamp(2.75rem, 2.1rem + 3.25vw, 4.5rem); /* 44 → 72 */

  /* --- Typography: line-height ------------------------------------------ */
  --leading-none: 1;
  --leading-tight: 1.1; /* display headings */
  --leading-snug: 1.25; /* sub-headings */
  --leading-normal: 1.6; /* body copy */
  --leading-relaxed: 1.75; /* long-form prose */

  /* --- Typography: tracking --------------------------------------------- */
  --tracking-tight: -0.02em; /* large display */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em; /* mono eyebrows / section markers */
  --tracking-widest: 0.18em; /* small all-caps labels */

  /* Reading measure for prose columns. */
  --measure: 68ch;
  --measure-narrow: 56ch;

  /* --- Spacing scale (4px base, rem-expressed) -------------------------- */
  --space-3xs: 0.25rem; /* 4  */
  --space-2xs: 0.5rem; /* 8  */
  --space-xs: 0.75rem; /* 12 */
  --space-sm: 1rem; /* 16 */
  --space-md: 1.5rem; /* 24 */
  --space-lg: 2rem; /* 32 */
  --space-xl: 3rem; /* 48 */
  --space-2xl: 4rem; /* 64 */
  --space-3xl: 6rem; /* 96 */
  --space-4xl: 8rem; /* 128 */

  /* Fluid vertical rhythm for section padding (scales with viewport). */
  --section-space: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --section-space-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 75rem; /* 1200px — default content width */
  --container-wide: 87.5rem; /* 1400px — full-bleed feature rows */
  --container-narrow: 46rem; /* 736px  — prose / forms */
  --container-prose: 42rem; /* 672px  — long-form reading column */
  --gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem); /* page inline padding */

  /* Breakpoints — documented here for reference. CSS custom properties
     cannot be used inside media queries, so the literal rem values below
     are repeated in @media rules across layout.css and components.css:
       sm  40rem  (640px)
       md  48rem  (768px)
       lg  64rem  (1024px)
       xl  80rem  (1280px)  */

  /* --- Borders & radii -------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  /* Restrained, warm-tinted shadows — the brand reads architectural, not glossy. */
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-purple-900) 8%, transparent);
  --shadow-sm: 0 2px 6px color-mix(in srgb, var(--color-purple-900) 8%, transparent);
  --shadow-md: 0 6px 20px -6px color-mix(in srgb, var(--color-purple-900) 18%, transparent);
  --shadow-lg: 0 18px 48px -16px color-mix(in srgb, var(--color-purple-900) 24%, transparent);

  /* --- Motion ----------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* --- Z-index scale ---------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Sticky-header offset used by :target and scroll-padding. */
  --scroll-offset: 6rem;
}

/* -----------------------------------------------------------------------------
   3. Base element styles
   -------------------------------------------------------------------------- */

html {
  scroll-padding-block-start: var(--scroll-offset);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  font-feature-settings: "kern", "liga", "calt";
}

/* Links — purple by default; underline kept for affordance, offset for legibility.
   Component classes (.button, nav links) opt out as needed. */
a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--duration-fast) var(--ease-standard),
    text-decoration-color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

/* Visible, high-contrast keyboard focus everywhere. */
:focus-visible {
  outline: var(--border-width-thick) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* On inverse (purple) surfaces, switch the ring to gold for contrast. */
.is-inverse :focus-visible,
.surface-inverse :focus-visible {
  outline-color: var(--color-focus-inverse);
}

::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}

hr {
  border: none;
  block-size: var(--border-width);
  background-color: var(--color-border);
  margin-block: var(--space-lg);
}

:where(ul, ol):not([role="list"]) {
  padding-inline-start: 1.5em;
}

:where(li) {
  margin-block-end: var(--space-2xs);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:not(pre) > code {
  background-color: var(--color-surface-sunken);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

blockquote {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   4. Accessibility helpers
   -------------------------------------------------------------------------- */

/* Visually hidden but available to assistive tech. */
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — hidden until focused, then pinned top-left. */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: var(--z-toast);
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-purple-600);
  color: var(--color-cream-100);
  border-radius: var(--radius-md);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Honor reduced-motion: drop transitions, animations, and smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}