@layer vision-tokens, document-foundation, editorial-grid, interface-modules, route-compositions, motion-policy, fluid-adaptation;

@layer vision-tokens {
  :root {
    --gfhv-ink: #131218;
    --gfhv-ink-soft: #34313f;
    --gfhv-paper: #f5f1e6;
    --gfhv-paper-raised: #fbf8ef;
    --gfhv-paper-sunk: #ece6d5;
    --gfhv-ultramarine: #1f36c9;
    --gfhv-ultramarine-deep: #16267f;
    --gfhv-ultramarine-mist: #dfe3fb;
    --gfhv-chartreuse: #d8f24a;
    --gfhv-chartreuse-deep: #b9d321;
    --gfhv-coral: #ff6a4d;

    --gfhv-surface: var(--gfhv-paper);
    --gfhv-surface-raised: var(--gfhv-paper-raised);
    --gfhv-surface-invert: var(--gfhv-ultramarine-deep);
    --gfhv-on-invert: var(--gfhv-paper-raised);
    --gfhv-line: color-mix(in srgb, var(--gfhv-ink) 22%, transparent);
    --gfhv-line-strong: color-mix(in srgb, var(--gfhv-ink) 55%, transparent);
    --gfhv-focus: var(--gfhv-coral);

    --gfhv-font-display: "Non Natural Grotesk Plain", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
    --gfhv-font-body: "Non Natural Grotesk Plain", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --gfhv-step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
    --gfhv-step-0: clamp(0.95rem, 0.9rem + 0.28vw, 1.06rem);
    --gfhv-step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --gfhv-step-2: clamp(1.4rem, 1.2rem + 1vw, 1.95rem);
    --gfhv-step-3: clamp(1.85rem, 1.5rem + 1.7vw, 2.9rem);
    --gfhv-step-4: clamp(2.4rem, 1.8rem + 3vw, 4.4rem);
    --gfhv-step-giant: clamp(3.5rem, 2rem + 9vw, 11rem);

    --gfhv-space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
    --gfhv-space-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.65rem);
    --gfhv-space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.95rem);
    --gfhv-space-s: clamp(1rem, 0.92rem + 0.4vw, 1.3rem);
    --gfhv-space-m: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
    --gfhv-space-l: clamp(2.2rem, 1.8rem + 1.8vw, 3.4rem);
    --gfhv-space-xl: clamp(3.2rem, 2.5rem + 3vw, 5.5rem);
    --gfhv-space-2xl: clamp(4.5rem, 3.4rem + 5vw, 8rem);

    --gfhv-shell: min(100% - 2 * var(--gfhv-gutter), 82rem);
    --gfhv-gutter: clamp(1rem, 0.6rem + 2vw, 2.75rem);
    --gfhv-rail: 15.5rem;

    --gfhv-corner-cut: 14px;
    --gfhv-radius-tight: 6px;
    --gfhv-radius-soft: 16px;

    --gfhv-ring: 0 0 0 3px color-mix(in srgb, var(--gfhv-coral) 55%, transparent);
    --gfhv-lift: 0 22px 44px -30px color-mix(in srgb, var(--gfhv-ultramarine-deep) 70%, transparent);

    --gfhv-motion-fast: 140ms;
    --gfhv-motion-base: 260ms;
    --gfhv-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}