/* ===========================
   Juliana — Design Tokens
   =========================== */

/*
 * CSS custom properties that alias WordPress preset vars.
 * Source of truth: theme.json. All components consume these vars;
 * none invent raw values.
 */

/* ===========================
   Colour Aliases
   =========================== */

:root {
  /* other */
  --c-base:         var(--wp--preset--color--base);
  --c-ink:          var(--wp--preset--color--ink);
  --c-accent:       var(--wp--preset--color--accent);
  --c-accent-hover: var(--wp--preset--color--accent-hover);
  --c-accent-text:  var(--wp--preset--color--accent-text); /* red for TEXT on dark surfaces — AA 4.5:1 */
  --c-surface-1:    var(--wp--preset--color--surface-1);
  --c-surface-2:    var(--wp--preset--color--surface-2);
  --c-surface-3:    var(--wp--preset--color--surface-3);
  --c-footer:       var(--wp--preset--color--footer);
  --c-ink-dim:      var(--wp--preset--color--ink-dim);
  --c-ink-muted:    var(--wp--preset--color--ink-muted);
  --c-hairline:     color-mix(in srgb, var(--c-ink) 12%, transparent);

}


/* ===========================
   Typography Aliases
   =========================== */

:root {
  /* other */
  --font-head:  var(--wp--preset--font-family--head);
  --font-body:  var(--wp--preset--font-family--body);

  --fs-meta:     var(--wp--preset--font-size--meta);
  --fs-eyebrow:  var(--wp--preset--font-size--eyebrow);
  --fs-body:     var(--wp--preset--font-size--body);
  --fs-h4:       var(--wp--preset--font-size--h-4);
  --fs-h3:       var(--wp--preset--font-size--h-3);
  --fs-h2:       var(--wp--preset--font-size--h-2);
  --fs-h1:       var(--wp--preset--font-size--h-1);
  --fs-display:  var(--wp--preset--font-size--display);
  --fs-wordmark: 1.25rem; /* internal UI constant — intentionally not a WP preset; not in the editor picker */
  --fs-card-meta: 0.8125rem; /* card date · read-time line — client-approved exception to the 12pt floor */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

}


/* ===========================
   Spacing Aliases
   =========================== */

:root {
  /* other */
  --sp-4:   var(--wp--preset--spacing--4);
  --sp-8:   var(--wp--preset--spacing--8);
  --sp-12:  var(--wp--preset--spacing--12);
  --sp-16:  var(--wp--preset--spacing--16);
  --sp-24:  var(--wp--preset--spacing--24);
  --sp-32:  var(--wp--preset--spacing--32);
  --sp-44:  2.75rem; /* touch target — WCAG 44px minimum */
  --sp-48:  var(--wp--preset--spacing--48);
  --sp-64:  var(--wp--preset--spacing--64);
  --sp-96:  var(--wp--preset--spacing--96);
  --sp-128: var(--wp--preset--spacing--128);

}


/* ===========================
   Border Radii
   =========================== */

:root {
  /* other */
  --r-card:   6px;
  --r-tile:   3px;
  --r-button: 6px;
  --r-pill:   40px;

}


/* ===========================
   Layout
   =========================== */

/*
 * Breakpoints (reference): 640 / 768 / 1024 / 1280.
 * Artboard endpoints: 390 (mobile) · 1440 (desktop).
 */

:root {
  /* other */
  --container:   1200px; /* j-container box width (content 1056 + 2x72 gutter at max) */
  --gutter:      var(--wp--custom--gutter, clamp(20px, 5vw, 120px));
  --section-pad: clamp(var(--sp-48), 8vw, var(--sp-96));

}