:root {

    --yellow-500:   #FFC300;
  --yellow-400:   #FFD449;

    --ink-950:      #0B0B0A;
  --ink-900:      #101010;
  --ink-850:      #151514;
  --ink-800:      #1B1B19;

  --paper-000:    #F7F5F2;
  --paper-500:    #9A948C;

    --paper-a04:    rgba(247, 245, 242, 0.04);
  --paper-a08:    rgba(247, 245, 242, 0.08);
  --paper-a12:    rgba(247, 245, 242, 0.12);
  --paper-a30:    rgba(247, 245, 242, 0.30);
  --paper-a55:    rgba(247, 245, 242, 0.55);
  --paper-a75:    rgba(247, 245, 242, 0.75);
  --yellow-a15:   rgba(255, 195, 0, 0.15);

    --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI Variable Display", "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-body:
    -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-quote:
    "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;

      --size-hero:    clamp(36px, 12px + 5.2vw, 88px);
  --size-display: clamp(36px, 16px + 5.4vw, 92px);
  --size-h1:      clamp(34px, 21px + 4.1vw, 72px);
  --size-h2:      clamp(27px, 21px + 2.0vw, 50px);
  --size-h3:      clamp(20px, 18px + 0.56vw, 28px);
  --size-lead:    clamp(17px, 16px + 0.42vw, 22px);
  --size-body:    clamp(16px, 15.7px + 0.09vw, 17px);
  --size-caption: clamp(12px, 11.7px + 0.09vw, 13px);
  --size-numeral: clamp(64px, 32px + 8.5vw, 176px);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --leading-tight: 0.98;
  --leading-snug:  1.12;
  --leading-body:  1.72;

  --tracking-tight: -0.035em;
  --tracking-wide:   0.14em;

    --space-3xs:  4px;
  --space-2xs:  8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 72px;
  --space-3xl: 112px;
  --space-4xl: 160px;

    --container: 1320px;
  --measure:    720px;
  --gutter:      20px;
  --header-h:    92px;
    --logo-h:      52px;
  --logo-h-foot: 58px;

    --btn-h:       44px;
  --btn-h-lg:    52px;
  --btn-pad-x:   20px;
  --btn-pad-x-lg:26px;
  --btn-size:    15px;

    --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

    --dur-hover: 400ms;
  --dur-ui:    600ms;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.76, 0, 0.24, 1);

    --z-cursor: 900; --z-header: 800; --z-overlay: 790; --z-loader: 1000;
    --z-modal: 1200;

    --glow-accent: 0 0 60px -12px rgba(255, 195, 0, .45);
  --glow-soft:   0 0 120px -30px rgba(255, 195, 0, .25);

    --card-fill:
    linear-gradient(180deg, rgba(247,245,242,.045) 0%, rgba(247,245,242,.012) 100%);
  --card-fill-hover:
    linear-gradient(180deg, rgba(255,195,0,.07) 0%, rgba(247,245,242,.015) 100%);

    --rule-fade:
    linear-gradient(90deg, transparent, var(--paper-a12) 18%, var(--paper-a12) 82%, transparent);

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

  --surface:        var(--ink-950);
  --surface-raised: var(--ink-900);
  --surface-high:   var(--ink-850);
  --surface-accent: var(--yellow-500);

  --text:           var(--paper-000);
  --text-muted:     var(--paper-500);
  --text-accent:    var(--yellow-500);
  --text-on-accent: var(--ink-950);

  --line:        var(--paper-a12);
  --line-soft:   var(--paper-a08);
  --line-active: var(--yellow-500);

  --focus-ring:  var(--yellow-500);

  --type-hero:    var(--weight-semibold) var(--size-hero)/var(--leading-tight) var(--font-display);
  --type-display: var(--weight-semibold) var(--size-display)/var(--leading-tight) var(--font-display);
  --type-h1:      var(--weight-semibold) var(--size-h1)/var(--leading-tight) var(--font-display);
  --type-h2:      var(--weight-medium) var(--size-h2)/var(--leading-snug) var(--font-display);
  --type-h3:      var(--weight-medium) var(--size-h3)/var(--leading-snug) var(--font-display);
  --type-lead:    var(--weight-regular) var(--size-lead)/1.55 var(--font-body);
  --type-body:    var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body);
  --type-caption: var(--weight-regular) var(--size-caption)/1.5 var(--font-body);
  --type-quote:   italic var(--weight-regular) var(--size-lead)/1.5 var(--font-quote);
}

@media (min-width: 768px)  { :root { --gutter: 40px; --logo-h: 58px; --logo-h-foot: 68px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; --logo-h: 64px; --logo-h-foot: 78px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-hover: 1ms; --dur-ui: 1ms; }
}