/* ==========================================================================
   Design Tokens — "Intelligent Systems"
   Source: Figma "FONT combination" › Desktop - 1 (node 16:2)
   ========================================================================== */

/* ---- Fonts (self-hosted, assets/fonts; SIL Open Font License) -----------
   Latin + Latin Extended subsets from Google Fonts. unicode-range lets the
   browser fetch the -ext files only if a page actually uses such glyphs. */
@font-face {
  font-family: "Anton";
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/anton-latin.woff2") format("woff2");
  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: "Anton";
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/anton-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  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: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/roboto-mono-latin.woff2") format("woff2");
  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: "Roboto Mono";
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/roboto-mono-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Color: primitives ------------------------------------------------ */
  --color-grey-950: #1a1a1a;
  --color-grey-900: #232323;
  --color-grey-850: #2e2e2e;
  --color-grey-50:  #f3f3f3;
  --color-white:    #ffffff;
  --color-black:    #000000;
  --color-lime-400: #b9ff03;

  /* ---- Color: semantic -------------------------------------------------- */
  --color-bg:             var(--color-grey-900); /* page background */
  --color-surface:        var(--color-grey-850); /* cards */
  --color-surface-sunken: var(--color-grey-950); /* highlighted blocks */
  --color-text:           var(--color-grey-50);
  --color-text-inverse:   var(--color-black);
  --color-accent:         var(--color-lime-400); /* light: on it, type is always --color-text-inverse */
  --color-border:         var(--color-white);
  --color-border-accent:  var(--color-lime-400);

  /* ---- Typography: families -------------------------------------------- */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, monospace;
  --font-body:    "Inter", system-ui, sans-serif; /* replaced Gothic A1, whose round letters sagged below the line */
  --weight-display: 400;      /* Anton has a single (heavy) weight */
  --tracking-display: 0.01em;

  /* ---- Scale unit -------------------------------------------------------
     The Figma artboard is 1440px wide. Up to 1440 one design px = 1px;
     above that everything grows proportionally, so the page keeps the
     exact artboard composition on any larger screen.                       */
  --artboard: 1440;
  --px: max(1px, 100vw / var(--artboard));

  /* ---- Typography: scale ----------------------------------------------- */
  --text-display-xl: max(48px, 100vw * 80 / var(--artboard)); /* 80 @ 1440 */
  --text-display-l:  max(34px, 100vw * 64 / var(--artboard)); /* 64 @ 1440 */
  --text-display-m:  max(28px, 100vw * 40 / var(--artboard)); /* 40 @ 1440 */
  --text-lead:       max(20px, 100vw * 26 / var(--artboard)); /* 26 @ 1440 */
  --text-quote-mark: calc(32 * var(--px));
  --text-base:       calc(14 * var(--px));

  --leading-tight: 1;        /* display: 80/80, 64/64 */
  --leading-lead:  1.2308;   /* 26/32 */
  --leading-body:  1.2857;   /* 14/18 */
  --leading-mono:  normal;   /* Roboto Mono default */

  --tracking-tight: -0.02em; /* -2% everywhere in the design */

  /* ---- Spacing (4px base, scales with --px) ---------------------------- */
  --space-1:   calc(4 * var(--px));
  --space-1-5: calc(6 * var(--px));
  --space-2:   calc(8 * var(--px));
  --space-2-5: calc(10 * var(--px));
  --space-3:   calc(12 * var(--px));
  --space-4:   calc(16 * var(--px));
  --space-5:   calc(20 * var(--px));
  --space-6:   calc(24 * var(--px));
  --space-8:   calc(32 * var(--px));
  --space-10:  calc(40 * var(--px));
  --space-12:  calc(48 * var(--px));
  --space-16:  calc(64 * var(--px));
  --space-18:  calc(72 * var(--px));
  --space-20:  calc(80 * var(--px));
  --space-26:  calc(104 * var(--px));
  --space-28:  calc(112 * var(--px));
  --space-32:  calc(128 * var(--px));

  /* ---- Layout ---------------------------------------------------------- */
  --page-gutter: var(--space-5);  /* 20px edge margin */

  /* ---- Radius & borders ------------------------------------------------ */
  --radius: calc(4 * var(--px)); /* one radius for buttons, tags, icons; surfaces stay square */
  --border-width: 1px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);       /* UI feedback: hovers, toggles */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);     /* entrances: quick start, long soft landing */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* things that leave or collapse */
  --ease-snap: cubic-bezier(0.87, 0, 0.13, 1);      /* wipes: a beat of hold, then snaps across */
  --duration-fast: 160ms;
  --duration-hover: 300ms;
  --duration-fade: 250ms;       /* backdrops, overlays */
  --duration-tilt: 500ms;       /* rotations, item reveals */
  --duration-sheet-out: 600ms;
  --duration-sheet-in: 750ms;
  --duration-reveal: 950ms;     /* every entrance: intro, scroll reveals */
  --stagger: 70ms;              /* delay step between words */
  --stagger-items: 100ms;       /* delay step between list items, cards, menu links */
  --reveal-distance: calc(24 * var(--px)); /* every entrance rises by this much */
}