/* ==========================================================================
   Amalfi Global: design tokens
   Single source of truth. See DESIGN_SYSTEM.md for rationale and usage.
   ========================================================================== */
@layer reset, wp, tokens, base, astra, layout, components, patterns, utilities, motion;
/* Core block-library CSS demoted into the lowest layer so theme layers always win. */
@import url("/wp-includes/css/dist/block-library/style.min.css") layer(wp);

@layer tokens {
  /* ---- Fonts (self-hosted, variable) ---- */
  @font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
  }

  :root {
    /* ---- Palette: raw ---- */
    --c-ink:        #0E0E0C;  /* near-black, warm */
    --c-ink-2:      #1A1916;  /* raised dark surface */
    --c-ink-3:      #26241F;  /* dark hairlines */
    --c-ivory:      #F6F2EA;  /* page */
    --c-linen:      #EDE6D8;  /* alternate section */
    --c-limestone:  #DCD3C2;  /* hairlines on light, cards */
    --c-stone:      #8C8475;  /* decorative only on ivory (3.3:1) */
    --c-taupe:      #6B6457;  /* secondary text on ivory (5.2:1) */
    --c-sea:        #1E3A4C;  /* Tyrrhenian deep: the one colour */
    --c-sea-2:      #274B61;
    --c-gold:       #B89B5E;  /* champagne: rules, icons, text on dark ONLY */
    --c-gold-light: #D4BE8C;  /* gold on ink for small text (10.6:1) */
    --c-gold-text:  #7C6131;  /* gold for text on ivory (5.2:1, AA) */

    /* ---- Palette: semantic ---- */
    --bg:            var(--c-ivory);
    --bg-alt:        var(--c-linen);
    --bg-inverse:    var(--c-ink);
    --fg:            var(--c-ink);
    --fg-muted:      var(--c-taupe);
    --fg-inverse:    var(--c-ivory);
    --fg-inverse-muted: #B5AD9E; /* on ink: 8.6:1 */
    --accent:        var(--c-gold);
    --accent-text:   var(--c-gold-text);
    --line:          color-mix(in srgb, var(--c-ink) 14%, transparent);
    --line-inverse:  color-mix(in srgb, var(--c-ivory) 16%, transparent);
    --focus:         var(--c-sea);
    --selection-bg:  var(--c-sea);
    --selection-fg:  var(--c-ivory);

    /* ---- Typography ---- */
    --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Fluid scale: 360px → 1440px viewport, ratio ≈ 1.25 → 1.333 */
    --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13 → 14 : captions, eyebrow */
    --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.125rem);       /* 16 → 18 : body */
    --step-1:  clamp(1.1875rem, 1.1rem + 0.37vw, 1.4375rem);  /* 19 → 23 : lead */
    --step-2:  clamp(1.5rem, 1.33rem + 0.74vw, 2rem);         /* 24 → 32 : h4 */
    --step-3:  clamp(1.875rem, 1.58rem + 1.3vw, 2.75rem);     /* 30 → 44 : h3 */
    --step-4:  clamp(2.25rem, 1.75rem + 2.22vw, 3.75rem);     /* 36 → 60 : h2 */
    --step-5:  clamp(2.75rem, 1.9rem + 3.7vw, 5.25rem);       /* 44 → 84 : h1 */
    --step-6:  clamp(3.25rem, 1.8rem + 6.4vw, 7.5rem);        /* 52 → 120: hero display */
    --step-7:  clamp(4.5rem, 1.5rem + 13vw, 13rem);           /* footer wordmark */

    --lh-tight: 1.04;
    --lh-heading: 1.12;
    --lh-body: 1.7;
    --tracking-eyebrow: 0.24em;
    --tracking-ui: 0.08em;
    --tracking-display: -0.01em;
    --measure: 62ch;

    /* ---- Space (4/8 base) ---- */
    --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 */
    --s-11: 10rem;   /* 160 */
    --s-12: 12.5rem; /* 200 */
    --section-y: clamp(5rem, 3rem + 8vw, 11rem);   /* 80 → 176 */
    --gutter:    clamp(1rem, 0.4rem + 2.6vw, 3rem); /* 16 → 48 */

    /* ---- Layout ---- */
    --w-content: 44rem;   /* 704: prose */
    --w-wide:    76rem;   /* 1216 */
    --w-max:     96rem;   /* 1536: full bleed cap */
    --header-h:     110px;
    --header-h-min: 72px;

    /* ---- Lines, radius, shadow ---- */
    --hairline: 1px solid var(--line);
    --hairline-inverse: 1px solid var(--line-inverse);
    --radius: 0;           /* luxury = square corners */
    --radius-pill: 999px;  /* only for cursor/scroll cue */
    --shadow-none: none;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(.2, .7, .1, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: 240ms;   /* micro: colour, underline */
    --dur-2: 600ms;   /* UI: header, buttons */
    --dur-3: 900ms;   /* reveals */
    --dur-4: 1200ms;  /* hero, masks */
    --dur-kenburns: 24s;
    --stagger: 90ms;

    /* ---- Texture ---- */
    --grain-opacity: .045;

    color-scheme: light;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms;
      --dur-kenburns: 0s; --stagger: 0ms;
    }
  }
}