/* ============================================================
   AdulteryFaery.com — Design Tokens
   Single source of truth for color, type, spacing, layout.
   ============================================================ */

@layer reset, base, components, utilities;

:root {
  /* === Color === */
  --ink:         #1A1416;   /* primary surface (warm near-black) */
  --ink-2:       #241B1F;   /* slightly lifted ink for cards */
  --paper:       #F5EFE6;   /* primary editorial paper */
  --paper-warm:  #EDE3D4;   /* secondary paper for sections */
  --rouge:       #FEA6D1;   /* THE accent (client requirement, do not change) */
  --rouge-deep:  #C7568F;   /* AA-compliant rouge for body text on paper */
  --rule:        #1A1416;   /* hairline rules */
  --whisper:     #7A6E6A;   /* muted meta text on paper */
  --whisper-d:   #B8A99F;   /* muted meta on ink */

  /* === Surface mapping (semantic) === */
  --surface:     var(--paper);
  --surface-alt: var(--paper-warm);
  --on-surface:  var(--ink);
  --on-surface-muted: var(--whisper);
  --link:        var(--rouge-deep);
  --link-hover:  var(--ink);

  /* === Typography === */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Fluid type scale — mobile-first; clamp(min, ideal, max) */
  --type-display: clamp(2.25rem, 6vw + 1rem, 5.25rem);  /* hero headlines */
  --type-h1:      clamp(1.875rem, 4vw + 0.75rem, 3.25rem);
  --type-h2:      clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  --type-h3:      clamp(1.25rem, 1.5vw + 0.5rem, 1.625rem);
  --type-body:    1.0625rem;     /* 17px — comfortable reading */
  --type-meta:    0.8125rem;     /* 13px — meta/byline */
  --type-small:   0.75rem;       /* 12px — labels */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-loose:   1.65;

  /* === Spacing — 8pt grid === */
  --space-1: 0.5rem;    /*  8px */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px */
  --space-4: 2rem;      /* 32px */
  --space-6: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  /* === Layout === */
  --measure:    66ch;            /* optimal reading width */
  --container:  1200px;
  --container-wide: 1400px;
  --rule-w:     1px;
  --nav-h:      64px;            /* mobile nav height */
  --nav-h-d:    72px;            /* desktop nav height */

  /* === Motion === */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --duration:   200ms;
  --duration-slow: 400ms;
}

/* ============================================================
   Reset (minimal — preserve sensible defaults)
   ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
  img, picture, svg, video { max-width: 100%; height: auto; display: block; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
  ::selection { background: var(--rouge); color: var(--ink); }
}

/* ============================================================
   Base — typography defaults
   ============================================================ */
@layer base {
  html {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: var(--leading-loose);
    color: var(--on-surface);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }
  body {
    min-height: 100dvh;
    font-size: var(--type-body);
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
  }
  h1 { font-size: var(--type-h1); }
  h2 { font-size: var(--type-h2); }
  h3 { font-size: var(--type-h3); font-weight: 500; }
  p { line-height: var(--leading-loose); }
  a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: color var(--duration) var(--ease); }
  a:hover { color: var(--link-hover); }
  hr { border: 0; border-top: var(--rule-w) solid var(--rule); margin: var(--space-6) 0; }
  small, .meta { font-family: var(--font-ui); font-size: var(--type-meta); color: var(--on-surface-muted); letter-spacing: 0.02em; }

  /* Skip link for keyboard nav */
  .skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--ink); color: var(--paper);
    padding: var(--space-2) var(--space-3);
    z-index: 100;
    text-decoration: none;
  }
  .skip-link:focus { top: 0; }
}