/* =========================================================================
   Project Relay — Colors & Typography
   Foundational design tokens. Import this file first in any HTML artifact.
   ========================================================================= */

/* ---------- Fonts ----------
   Onest (variable, 100–900) — full Cyrillic support, self-hosted.
   Two subset files; the browser downloads only the ranges it needs. */
@font-face {
  font-family: 'Onest';
  src: url('fonts/Onest-Variable-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  src: url('fonts/Onest-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  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;
}

/* ---------- Tokens ---------- */
:root {
  /* Core neutrals */
  --color-midnight-ink: #000000;
  --color-canvas-white: #ffffff;
  --color-charcoal-border: #171717;
  --color-shadow-base: #0a0a0d;
  --color-pale-ash: #f5f5f5;
  --color-muted-gray: #737373;

  /* Brand accent */
  --color-accent-green: #a3e635;
  --color-accent-green-deep: #84cc16;

  /* Pastel content cards */
  --color-card-saffron:  #fef3c8;
  --color-card-lavender: #fae9ff;
  --color-card-mint:     #d2fae5;
  --color-card-pink:     #f5d1fe;
  --color-highlight-yellow: #fbbf25;

  /* Semantic */
  --color-coral-alert:    #f87171;
  --color-coral-alert-bg: #fee2e2;

  /* Gradients */
  --gradient-honey-dew:   linear-gradient(rgb(253,229,177), rgb(252,214,131));
  --gradient-lime-spritz: linear-gradient(rgb(219,244,181), rgb(198,238,137));
  --gradient-sky-breeze:  linear-gradient(rgb(137,229,240), rgb(182,239,246) 27%, rgb(204,243,250) 35%, rgb(197,243,248) 55%);

  /* Semantic foreground/background */
  --fg-1: var(--color-midnight-ink);
  --fg-2: #404040;
  --fg-3: var(--color-muted-gray);
  --fg-inverse: var(--color-canvas-white);
  --bg-1: var(--color-canvas-white);
  --bg-2: var(--color-pale-ash);
  --border-strong: var(--color-charcoal-border);
  --border-muted:  var(--color-muted-gray);

  /* Typography */
  --font-sans: 'Onest', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* Type scale */
  --text-caption: 12px;     --leading-caption: 1.67;
  --text-body-sm: 14px;     --leading-body-sm: 1.57;
  --text-body: 16px;        --leading-body: 1.5;
  --text-subheading: 18px;  --leading-subheading: 1.44;  --tracking-subheading: -0.108px;
  --text-heading-sm: 20px;  --leading-heading-sm: 1.42;  --tracking-heading-sm: -0.18px;
  --text-heading: 24px;     --leading-heading: 1.4;      --tracking-heading: -0.24px;
  --text-heading-lg: 32px;  --leading-heading-lg: 1.38;  --tracking-heading-lg: -0.544px;
  --text-display-sm: 36px;  --leading-display-sm: 1.33;  --tracking-display-sm: -0.612px;
  --text-display: 48px;     --leading-display: 1.16;     --tracking-display: -0.96px;
  --text-display-lg: 64px;  --leading-display-lg: 1.14;  --tracking-display-lg: -1.344px;

  /* Spacing scale (4px base) */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px; --spacing-40: 40px;
  --spacing-44: 44px; --spacing-48: 48px; --spacing-60: 60px; --spacing-64: 64px;
  --spacing-80: 80px; --spacing-88: 88px; --spacing-100: 100px; --spacing-120: 120px;

  --section-gap: 40px;
  --card-padding: 24px;
  --element-gap: 24px;

  /* Border radii */
  --radius-buttons: 4px;
  --radius-cards: 8px;
  --radius-large-cards: 16px;
  --radius-xl-cards: 20px;
  --radius-pill: 100px;

  /* Shadows — flat offset, no blur */
  --shadow-subtle:   2px 2px 0px 0px rgb(10,10,13);
  --shadow-subtle-2: 4px 4px 0px 0px rgb(10,10,13);
  --shadow-hairline: 1px 1px 0px 0px rgb(10,10,13);
  --shadow-charcoal: 4px 4px 0px 0px rgb(23,23,23);
}

/* ---------- Semantic tag styles ---------- */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-body); line-height: var(--leading-body); color: var(--fg-1); }

h1, .h1 {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg); margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading); margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: var(--text-subheading); line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading); margin: 0;
}
p, .body { font-weight: var(--weight-medium); font-size: var(--text-body); line-height: var(--leading-body); margin: 0; }
small, .caption { font-weight: var(--weight-medium); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--fg-3); }
code, .code, kbd { font-family: var(--font-mono); font-size: 0.95em; }

.display-lg { font-size: var(--text-display-lg); line-height: var(--leading-display-lg); letter-spacing: var(--tracking-display-lg); font-weight: var(--weight-bold); }
.display    { font-size: var(--text-display);    line-height: var(--leading-display);    letter-spacing: var(--tracking-display);    font-weight: var(--weight-bold); }
.display-sm { font-size: var(--text-display-sm); line-height: var(--leading-display-sm); letter-spacing: var(--tracking-display-sm); font-weight: var(--weight-bold); }