/* ==========================================================================
   DD AUTOPILOT — BASE
   Design tokens, reset, typography
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Colour system — MODERN NEWSROOM (cool ground, single cobalt accent) */
  --ink: #14171b;              /* body text — cool near-black */
  --ink-soft: #3c4149;         /* secondary text */
  --ink-muted: #5a616b;        /* meta, captions (AA on paper) */
  --ink-faint: #a2a9b2;        /* placeholders, borders at rest */

  --paper: #f3f4f6;            /* page background — cool light */
  --paper-lift: #ffffff;       /* cards, focus, modal surfaces */
  --paper-sink: #eaecef;       /* inputs, subtle fills */

  --rule: #dcdfe4;             /* dividers, default borders */
  --rule-soft: #e7e9ed;        /* lighter divider variant */

  --accent: #2f4fe0;           /* single accent — cobalt */
  --accent-ink: #1e39a8;       /* accent as text/links on light — AA */
  --accent-wash: #eaeeff;      /* accent background wash */

  --signal: #c0362c;           /* breaking / live only — never decorative */
  --signal-wash: #fbecea;

  --highlight: #f4c64e;        /* GEO answer box, pull-quote emphasis */
  --highlight-wash: #fef6df;

  --error: #c0362c;
  --success: #1b7a49;

  /* Category colours — used ONLY on post cards + category badges, never as primary */
  --cat-food: #c0362c;
  --cat-finance: #1b7a49;
  --cat-health: #7c5cbf;
  --cat-travel: #2f6fb0;
  --cat-lifestyle: #b25a00;

  /* Typography — self-hosted Fraunces headlines + system sans body (0 external calls) */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;

  /* Type scale — mobile-first, fluid with clamp() */
  --fs-micro:  clamp(0.688rem, 0.65rem + 0.1vw, 0.75rem);   /* 11-12px */
  --fs-small:  clamp(0.813rem, 0.78rem + 0.15vw, 0.875rem); /* 13-14px */
  --fs-body:   clamp(1rem, 0.96rem + 0.25vw, 1.125rem);     /* 16-18px */
  --fs-lead:   clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem);   /* 18-20px */
  --fs-h6:     clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-h5:     clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem);
  --fs-h4:     clamp(1.25rem, 1.2rem + 0.35vw, 1.5rem);
  --fs-h3:     clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  --fs-h2:     clamp(1.75rem, 1.55rem + 0.8vw, 2.25rem);
  --fs-h1:     clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);     /* 36-52px — post titles */
  --fs-hero:   clamp(2.5rem, 2rem + 2vw, 4rem);             /* homepage hero */

  /* Line heights — optimised for each size */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.7;
  --lh-loose: 1.8;

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

  /* Layout */
  --reading-col: 38rem;        /* 608px — 60-70 chars comfortable read */
  --prose-col: 44rem;          /* 704px — slightly wider for lists/images */
  --content-max: 72rem;        /* 1152px — site max-width */
  --sidebar-w: 17.5rem;        /* 280px */

  /* Radius — light touch, only where needed */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Shadow — only 2 levels, subtle */
  --shadow-lift: 0 1px 3px rgba(20,23,27,.07), 0 1px 2px rgba(20,23,27,.05);
  --shadow-float: 0 10px 30px rgba(20,23,27,.10), 0 2px 6px rgba(20,23,27,.05);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.15s;
  --dur: 0.25s;
}

/* ---------- 2. FONT FACES ----------
   Fraunces (display serif) is self-hosted, latin subset, ~68KB — used only for
   headlines. Body uses the system sans stack (San Francisco / Segoe UI / Roboto):
   zero network cost, excellent reading. No external font requests. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 3. MODERN RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- 4. BODY + TYPOGRAPHY DEFAULTS ---------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: -0.003em;  /* Inter reads slightly tighter at body size */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;  /* Fraunces: display cut, crisp */
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 500; }
h5 { font-size: var(--fs-h5); font-weight: 500; }
h6 { font-size: var(--fs-h6); font-weight: 500; }

p { line-height: var(--lh-body); }
strong, b { font-weight: 600; }
em, i { font-style: italic; }

a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: rgba(47, 79, 224, 0.32);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent-ink); }

::selection { background: var(--accent); color: var(--paper-lift); }

/* ---------- 5. UI FONT for meta, buttons, forms, admin chrome ---------- */
.u-ui,
.meta, .byline, .caption, .tag,
button, input, select, textarea,
.nav, .breadcrumb, .pagination,
.widget-title, .post-meta,
.wp-block-button__link {
  font-family: var(--font-ui);
  letter-spacing: -0.005em;
}

/* ---------- 6. FOCUS — accessible, branded ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- 7. SKIP LINK ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-weight: 500;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* ---------- 8. SCREEN-READER ONLY ---------- */
.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;
}

/* ---------- 9. PRINT — clean, readable when printed ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .dd-topbar, .dd-ticker, .dd-ribbon, .site-header, .site-footer,
  .sidebar, .dd-share-bar, .dd-progress-bar, .ad-slot { display: none !important; }
  article { max-width: 100%; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }
}

/* ---------- 10. REDUCED MOTION ---------- */
@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;
  }
}