/* ==========================================================================
   TOKENS — brand palette, type scale, fonts, spacing, easing
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Registered so variable-font axes and glows can be animated in CSS. */
@property --wdth { syntax: '<number>'; inherits: false; initial-value: 100; }
@property --wght { syntax: '<number>'; inherits: false; initial-value: 400; }
@property --sweep { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
  /* Core palette */
  --ink:        #05070f;
  --navy-950:   #070b1a;
  --navy-900:   #0a0f22;
  --navy-800:   #0e152f;
  --navy-700:   #142046;
  --navy-600:   #1c2c62;
  --navy-500:   #2a3f88;

  --lime:       #dcff31;
  --lime-deep:  #b9db0f;
  --lime-glow:  color-mix(in oklab, var(--lime) 55%, transparent);
  --lime-veil:  color-mix(in oklab, var(--lime) 8%, transparent);

  --paper:      #eef1fb;
  --ash:        #8d97b8;
  --ash-dim:    #5c6689;
  --rec:        #ff3b2f;

  --accent:     var(--lime);

  --line:       color-mix(in oklab, var(--paper) 14%, transparent);
  --line-soft:  color-mix(in oklab, var(--paper) 7%, transparent);
  --glass:      color-mix(in oklab, var(--navy-900) 72%, transparent);

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

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.80rem, 0.76rem + 0.19vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.24vw, 1.15rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1.00vw, 2.10rem);
  --step-3:  clamp(1.80rem, 1.40rem + 2.00vw, 3.00rem);
  --step-4:  clamp(2.10rem, 1.40rem + 3.40vw, 4.00rem);
  --step-5:  clamp(2.60rem, 1.30rem + 6.20vw, 5.75rem);
  --step-6:  clamp(2.90rem, 1.10rem + 8.60vw, 8.50rem);

  /* Space */
  --frame:    clamp(0.75rem, 1.6vw, 1.5rem);
  --gutter:   clamp(1.25rem, 4vw, 4.5rem);
  --bay:      clamp(4.5rem, 11vh, 9rem);
  --rule:     1px;
  --hud-h:    2.75rem;
  --max:      100rem;

  /* Motion */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-mech: cubic-bezier(0.85, 0, 0.15, 1);
  --dur-fast:  0.18s;
  --dur:       0.42s;
  --dur-slow:  0.9s;
}