/* ==========================================================================
   Ana Stevanović — Design Tokens (mockup v2 · Everlead-inspired)
   Naming mirrors Automatic.css (ACSS) for EtchWP porting later.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Caveat:wght@500;600&display=swap");

:root {
  /* --- Palette (Everlead-inspired, adapted for Ana) ---------------------- */
  --primary: #ff4612;                        /* Everlead coral-orange       */
  --primary-hover: #e03d0f;
  --primary-ultra-light: #fff4f0;
  --primary-light: #ffb89e;
  --primary-dark: #c9340d;
  --primary-ultra-dark: #8a2409;

  --ink: #1e1c1c;                            /* charcoal headings           */
  --ink-soft: #323030;

  --sand: #f7f5f2;                           /* warm off-white sections     */
  --sand-deep: #ece8e3;
  --accent-gold: #ff4612;                    /* unified accent (was gold)   */

  --neutral-ultra-light: #fafafa;
  --neutral-light: #e8e8e8;
  --neutral: #6a6a6a;
  --neutral-dark: #444444;

  --white: #fff;
  --black: #181515;

  /* --- Contextual color ------------------------------------------------- */
  --body-bg-color: var(--white);
  --text-dark: var(--ink);
  --text-dark-muted: #757575;
  --text-light: var(--white);
  --text-light-muted: color-mix(in srgb, var(--white) 72%, transparent);

  --heading-color: var(--ink);
  --text-color: var(--text-dark-muted);
  --link-color: var(--primary);
  --link-color-hover: var(--primary-hover);

  /* --- Typography (Everlead pairing) ------------------------------------ */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body: "Lato", system-ui, -apple-system, sans-serif;
  --font-script: "Caveat", cursive;

  --heading-font-weight: 700;
  --heading-line-height: 1.12;
  --base-text-lh: 1.75;

  --text-xs: 0.8125rem;
  --text-s: 0.9375rem;
  --text-m: 1.0625rem;
  --text-l: clamp(1.15rem, 0.45vw + 1.05rem, 1.45rem);
  --text-xl: clamp(1.45rem, 0.85vw + 1.2rem, 1.95rem);

  --h6: 0.875rem;
  --h5: 1rem;
  --h4: clamp(1.15rem, 0.35vw + 1.05rem, 1.35rem);
  --h3: clamp(1.45rem, 0.65vw + 1.25rem, 1.85rem);
  --h2: clamp(1.85rem, 1.4vw + 1.5rem, 2.75rem);
  --h1: clamp(2.5rem, 2.5vw + 1.75rem, 4.5rem);

  --label: 0.72rem;
  --label-tracking: 0.22em;

  /* --- Spacing ---------------------------------------------------------- */
  --space-xs: 0.5rem;
  --space-s: 0.875rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;

  --section-space-s: clamp(2.75rem, 3vw + 1.75rem, 4rem);
  --section-space-m: clamp(4rem, 5vw + 2.5rem, 7rem);
  --section-space-l: clamp(5.5rem, 7vw + 3rem, 9.5rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --content-width: 85.375rem;
  --content-narrow: 52rem;
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));

  /* --- Shape / depth ---------------------------------------------------- */
  --radius: 0;
  --radius-l: 0;
  --radius-pill: 0;
  --radius-soft: 4px;

  --border-color: #e5e5e5;
  --border-color-light: color-mix(in srgb, #fff 22%, transparent);
  --border: 1px solid var(--border-color);

  --shadow-1: 0 8px 30px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow-2: 0 20px 60px color-mix(in srgb, var(--ink) 12%, transparent);
  --shadow-card: 0 4px 24px color-mix(in srgb, var(--ink) 6%, transparent);

  --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}