@layer reset, tokens, base, components, blocks, utilities;

@layer tokens {
  :root {
    --canvas: var(--wp--preset--color--canvas, #ffffff);
    --parchment: var(--wp--preset--color--parchment, #f6f7f9);
    --blue-mist: var(--wp--preset--color--blue-mist, #dceaf9);
    --blue-soft: var(--blue-mist);
    --blue-soft-1: var(--wp--preset--color--blue-soft-1, #e6f2fc);
    --blue-soft-2: var(--wp--preset--color--blue-soft-2, #c4dff7);
    --blue-deep-1: #1a2c4a;
    --blue-deep-2: #0e1726;

    --brand-ink: #231f20;
    --sand: var(--wp--preset--color--sand, #eadcc7);

    --ink: var(--wp--preset--color--ink, #0e1726);
    --ink-soft: #4a5568;
    --ink-muted: var(--wp--preset--color--ink-muted, #87938f);
    --on-dark: #ffffff;
    --on-dark-soft: rgba(255, 255, 255, 0.72);

    --accent: var(--wp--preset--color--accent, #267fd4);
    --accent-light: #3d96f4;
    --accent-bright: #5cadff;
    --accent-strong: color-mix(in srgb, var(--accent) 70%, var(--blue-deep-2));
    --accent-em: color-mix(in srgb, var(--accent-light) 48%, var(--accent-strong));
    --accent-eyebrow: color-mix(in srgb, var(--accent) 74%, var(--blue-deep-1) 26%);
    --accent-em-body: color-mix(in srgb, var(--accent) 32%, var(--ink-soft));
    --hairline: color-mix(in srgb, #e6eaf0 88%, var(--accent-light) 12%);

    --btn-rule: color-mix(in srgb, var(--ink) 22%, transparent);
    --btn-rule-soft: color-mix(in srgb, var(--ink) 12%, transparent);

    --serif: "Source Serif 4", Georgia, serif;
    --body: "Newsreader", Georgia, serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

    --fs-body: clamp(17px, 1vw + 13px, 22px);
    --fs-sans-body: clamp(15px, 0.88vw + 11.8px, 19px);
    --fs-ui: clamp(13px, 0.7vw + 11px, 16px);
    --fs-ui-lg: clamp(14px, 0.82vw + 11.25px, 17px);
    --fs-micro: clamp(13px, 0.28vw + 12px, 14px);
    --fs-masthead: clamp(11px, 0.55vw + 9px, 13px);

    --fs-heading-display: clamp(40px, 6.4vw, 100px);
    --content-below-header: min(22vh, 180px);
    --hero-content-top: max(
      clamp(128px, 28vh, 240px),
      calc(env(safe-area-inset-top, 0px) + 96px)
    );
    --fs-heading-section: clamp(32px, 4.5vw, 68px);
    --fs-heading-lead: clamp(32px, 5.2vw, 72px);
    --fs-heading-accent: clamp(24px, 2.4vw, 36px);
    --pad-x: var(--wp--preset--spacing--pad-x, clamp(24px, 5vw, 80px));

    --layout-max-main: 1280px;
    --layout-max-wide: 1600px;
    --layout-max-measure: 720px;
    --layout-max-prose: 540px;
    --layout-max-lede: 920px;
    --layout-gap-split: clamp(40px, 6vw, 96px);
    --layout-gap-three: clamp(40px, 5vw, 72px);
    --btn-group-gap: clamp(22px, 2.8vw, 32px);
    --section-v-slide: var(--wp--preset--spacing--section-slide, 12vh);
    --section-v-flow: var(--wp--preset--spacing--section-flow, 18vh);
    --section-v-tail: 10vh;
    --section-mobile-top: 14vh;

    --radius-card: 24px;
    --radius-pill: 999px;

    --shadow-soft-lift: 0 24px 48px -20px rgba(14, 23, 38, 0.12);
    --shadow-soft-lift-up: 0 -24px 48px -20px color-mix(in srgb, var(--ink) 12%, transparent);
    --shadow-card-hover: 0 6px 18px rgba(14, 23, 38, 0.07);

    --motion-standard: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --motion-snappy: 0.25s cubic-bezier(0.2, 0, 0, 1);
    --motion-reveal: 1s cubic-bezier(0.2, 0, 0, 1);

    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

    /* Nav frost / runtime (set by nav.js) */
    --scroll-y: 0px;
    --pill-cx: 50%;
    --pill-cy: 49px;
    --pill-rx: 600px;
    --pill-ry: 130px;
  }

  @media (min-width: 1920px) {
    :root {
      --fs-body: clamp(22px, 0.25vw + 19.2px, 27px);
      --fs-sans-body: clamp(19px, 0.22vw + 16.8px, 24px);
      --fs-ui: clamp(15px, 0.175vw + 13.6px, 20px);
      --fs-ui-lg: clamp(16px, 0.208vw + 14.2px, 21px);
      --fs-micro: clamp(14px, 0.115vw + 12.55px, 17px);
      --fs-masthead: clamp(13px, 0.15vw + 11.4px, 16px);
    }
  }

  @media (max-width: 900px) {
    :root {
      --fs-heading-display: clamp(46px, 11vw, 100px);
      --fs-body: clamp(19px, 0.35vw + 17.8px, 20px);
      --fs-sans-body: clamp(17px, 0.3vw + 15.6px, 18px);
      --fs-ui: clamp(14px, 0.55vw + 12px, 16px);
      --fs-ui-lg: clamp(15px, 0.65vw + 12.5px, 17px);
      --fs-micro: clamp(13px, 0.35vw + 12px, 14px);
    }
  }

  @media (max-width: 360px) {
    :root {
      --fs-body: clamp(17px, 2.5vw + 12px, 18px);
      --fs-sans-body: clamp(15px, 2.2vw + 10.5px, 16px);
      --fs-ui: clamp(13px, 0.7vw + 11px, 15px);
      --fs-ui-lg: clamp(14px, 0.82vw + 11.25px, 16px);
    }
  }
}