/* ═══════════════════════════════════════════════════════════════════════════
   Decipher V2 — Shared brand baseline
   Loaded on every page. Page-specific tokens and component CSS stay inline
   in each page's <style> block and override these defaults where needed.

   Scope:
     - Brand design tokens (colour, type, radii, shadows, motion)
     - Base reset + body typography
     - Shared utility primitives (container, sr-only, .accent)
     - Nothing else. Per-page visuals remain page-local.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Brand tokens ───────────────────────────────────────────────────────── */
:root {
  /* Surface palette */
  --d-bg: #faf9f7;
  --d-bg-elevated: #ffffff;
  --d-bg-card: #ffffff;
  --d-bg-card-hover: #f5f3f0;
  --d-surface: #f5f3f0;
  --d-surface-deep: #ebe8e2;

  /* Text palette */
  --d-text: #0a0a0a;
  --d-text-sec: #4a4842;
  --d-text-tri: #7a7770;

  /* Accent + signal colours */
  --d-accent: #ea580c;
  --d-accent-hover: #dc4a04;
  --d-accent-subtle: rgba(249,115,22,0.06);
  --d-accent-glow: rgba(249,115,22,0.08);
  --d-success: #16a34a;
  --d-violet: #635bff;
  --d-teal: #0ea5e9;
  --d-gold: #d97706;
  --d-pink: #ec4899;
  --d-emerald: #10b981;

  /* Borders */
  --d-border: rgba(0,0,0,0.08);
  --d-border-strong: rgba(0,0,0,0.14);
  --d-border-active: rgba(249,115,22,0.4);

  /* Radii */
  --d-radius-sm: 6px;
  --d-radius-md: 10px;
  --d-radius-lg: 16px;
  --d-radius-xl: 24px;
  --d-radius-full: 100px;

  /* Elevation */
  --d-shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --d-shadow-md: 0 4px 14px rgba(16,24,40,0.08);
  --d-shadow-lg: 0 12px 32px rgba(16,24,40,0.10);

  /* Motion */
  --d-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Type stacks */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-mark:    'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Theme hook (dark mode stubs — each page layers its own dark set) ───── */
[data-theme="dark"] {
  --d-bg: #0a0a0a;
  --d-bg-elevated: #141414;
  --d-bg-card: #1a1a1a;
  --d-bg-card-hover: #1f1f1f;
  --d-surface: #141414;
  --d-surface-deep: #1a1a1a;
  --d-text: #ffffff;
  --d-text-sec: #c4c4c4;
  --d-text-tri: #8a8884;
  --d-border: rgba(255,255,255,0.08);
  --d-border-strong: rgba(255,255,255,0.14);
}

/* ── Base reset ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--d-text);
  background: var(--d-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ── Shared typography primitives ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--d-text);
  margin: 0;
}

p {
  margin: 0;
  color: var(--d-text-sec);
}

/* ── Utilities ──────────────────────────────────────────────────────────── */
.accent { color: var(--d-accent); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Motion preferences ─────────────────────────────────────────────────── */
@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;
  }
}