/* ============================================================
   Spoonbill Productions — Design Tokens + Base Type
   ============================================================
   Loaded FIRST on every page. Holds the locked color/type/spacing
   tokens and the base element defaults (reset, body, headings,
   links). Component styles live in styles.css. There is no third
   stylesheet — redesign.css was retired 2026-06-01.

   The six color tokens are LOCKED. The two pinks are the only
   accent colors. Use weight, scale, and whitespace for variety,
   not new hues.

   Display + body type LOCKED to Fraunces + Inter, with
   Instrument Serif for italic accents and editorial display
   moments. The pairing IS the brand. Do not substitute.

   Naming follows BEM-lite (block__element--modifier). All
   color/type/spacing values flow through these custom
   properties — never hardcode hex, px, or rem values for any
   of these axes in component CSS.
   ============================================================ */

/* Establish layer order site-wide (statement form is valid before @import).
   base < components < zonesystem, so component + zone rules in styles.css
   always win over these element defaults. Without this, the base file is
   UNLAYERED and outranks every layered rule (underlines, heading sizes, etc.). */
@layer base, components, zonesystem;

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT@9..144,400..700,30..100&display=swap");

@layer base {

:root {
    /* ---------- Color ---------- */
    --c-ink:            #1a1a1a;   /* primary text, primary button fill, dark sections */
    --c-cream:          #f7f1ec;   /* hero text, button text on dark, soft surfaces */
    --c-spoonbill:      #e89bb5;   /* lighter pink — kicker labels, hover edges, full-bleed bands */
    --c-spoonbill-deep: #b35178;   /* deeper pink — hover button, accent links, eyebrows. Tuned to 4.81:1 on white for WCAG AA. */
    --c-muted:          #6b6660;   /* secondary / supporting text */
    --c-rule:           #d8cfc7;   /* dividers, borders, hairlines */

    /* ---------- Type: families ---------- */
    --font-sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif:      "Fraunces", Georgia, "Times New Roman", serif;
    --font-instrument: "Instrument Serif", "Fraunces", Georgia, serif;

    /* ---------- Type: fluid scale (clamp values from styles.css) ---------- */
    --fs-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.85rem);
    --fs-sm:   clamp(0.875rem, 0.8rem  + 0.375vw, 1rem);
    --fs-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
    --fs-lg:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);
    --fs-xl:   clamp(1.75rem,  1.4rem  + 1.75vw, 2.5rem);
    --fs-2xl:  clamp(2.5rem,   1.8rem  + 3.5vw, 4rem);
    --fs-3xl:  clamp(3.5rem,   2.5rem  + 5vw,    6rem);

    /* ---------- Spacing: fluid scale ---------- */
    --sp-10: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
    --sp-20: clamp(1rem,   0.9rem  + 0.5vw,  1.5rem);
    --sp-30: clamp(1.5rem, 1.3rem  + 1vw,    2.5rem);
    --sp-40: clamp(2.5rem, 2rem    + 2.5vw,  4rem);
    --sp-50: clamp(4rem,   3rem    + 5vw,    8rem);
    --sp-60: clamp(6rem,   4rem    + 10vw,   12rem);

    /* ---------- Layout ---------- */
    --content: 720px;
    --wide:    1240px;

    /* ---------- Radii ---------- */
    --radius-sm:   4px;
    --radius-pill: 999px;

    /* ---------- Shadows — paper-soft, never harsh ---------- */
    --shadow-soft: 0 1px 3px rgba(26,26,26,0.06), 0 8px 24px rgba(26,26,26,0.04);
    --shadow-lift: 0 2px 6px rgba(26,26,26,0.08), 0 18px 40px rgba(26,26,26,0.08);
}

/* ============================================================
   Element defaults — match site/styles.css exactly.
   ============================================================ */

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

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

body {
    margin: 0;
    background: #ffffff;                  /* white, NOT cream */
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.2em;
    transition: color 0.15s ease;
}
/* Hover color comes from the zone (deep-pink on light zones, light-pink on
   dark zones). Unlayered, so it supersedes the scattered per-component
   a:hover rules — those can be deleted for cleanliness. */
a:hover { color: var(--zone-link-hover, var(--c-spoonbill-deep)); }

/* ---------- Headings ----------
   Production sizing/weights below are the locked-in values from the
   former .rd[data-typeface="hybrid"] design direction (2026-06-01
   consolidation). Component-specific overrides (.hero h1, .page-hero h1)
   still win where applied. */
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.02;
}
h1 {
    font-size: clamp(2.75rem, 1.6rem + 4.5vw, 5.5rem);
    max-width: 18ch;
}
h2 {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    max-width: 22ch;
}
h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.35;
}

p { margin: 0; }

::selection { background: var(--c-spoonbill); color: var(--c-ink); }

}  /* end @layer base */