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

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Gothic+A1:wght@400&family=Roboto+Mono:wght@400&display=swap");

: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-orange-500: #ff4c24;

  /* ---- 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-orange-500);
  --color-border:         var(--color-white);
  --color-border-accent:  var(--color-orange-500);

  /* ---- Typography: families -------------------------------------------- */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, monospace;
  --font-body:    "Gothic A1", system-ui, sans-serif;
  --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);
  --duration-fast: 160ms;
  --duration-fade: 250ms;       /* backdrops, overlays */
  --duration-tilt: 500ms;       /* rotations, item reveals */
  --duration-sheet-out: 600ms;
  --duration-sheet-in: 750ms;
  --duration-reveal: 800ms;     /* every entrance: intro, scroll reveals */
  --stagger: 60ms;              /* delay step between words */
  --stagger-items: 90ms;        /* delay step between list items, cards, menu links */
  --reveal-distance: calc(24 * var(--px)); /* every entrance rises by this much */
}