/* ============================================================
   MORFO LABS — design tokens v1.1 · mirrors Figma "Brand System v1.0"
   Source of truth: Figma variables (Primitives / Color / Spacing /
   Shape / Motion) + brand book. Do not invent values here.
   ============================================================ */

:root {
  /* color — primitives */
  --ml-obsidian: #0A0A0A;
  --ml-graphite: #1A1A1A;
  --ml-steel:    #787B7B;
  --ml-white:    #FFFFFF;
  --ml-lime:     #B8F500;   /* signal — see usage rules below */
  --ml-steel-dark: #5A5D5D; /* steel for small text on white */
  --ml-paper:    #F4F4F3;   /* light-mode panel tint */

  /* color — semantic (dark-first, like the product) */
  --ml-bg:             var(--ml-obsidian);
  --ml-surface:        var(--ml-graphite);
  --ml-text:           var(--ml-white);
  --ml-text-secondary: var(--ml-steel);
  --ml-signal:         var(--ml-lime);
  --ml-line:           rgba(255, 255, 255, 0.12);

  /* type */
  --ml-font-text: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ml-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale — 1920 reference, fluid */
  --ml-type-display: clamp(56px, 8.96vw, 172px);   /* hero, blob numerals */
  --ml-type-h1:      clamp(34px, 3.4vw, 64px);
  --ml-type-h2:      clamp(22px, 1.7vw, 32px);
  --ml-type-body:    16px;
  --ml-type-data:    14px;
  --ml-type-label:   11px;
  --ml-type-caption: 10px;
  --ml-track-display: -0.03em;                     /* -5.16px @ 172px */

  /* space — 8px base (Figma Spacing collection) */
  --ml-space-1: 4px;
  --ml-space-2: 8px;
  --ml-space-3: 16px;
  --ml-space-4: 24px;
  --ml-space-5: 40px;
  --ml-space-6: 64px;
  --ml-space-7: 104px;

  /* shape (Figma Shape collection + morph radius from site design) */
  --ml-radius-surface: 0;
  --ml-radius-live: 999px;
  /* the signature asymmetric "morph" radius — nav, buttons: 32/8/32/8 */
  --ml-radius-morph: 32px 8px 32px 8px;
  --ml-radius-morph-flip: 8px 32px 8px 32px;       /* hover state */
  --ml-radius-morph-lg: 64px 16px 64px 16px;       /* cards */
  --ml-radius-morph-lg-flip: 16px 64px 16px 64px;
  --ml-radius-card: 64px;                          /* hero panel */

  /* motion (Figma Motion collection) */
  --ml-ease-morph: cubic-bezier(0.16, 1, 0.3, 1);
  --ml-ease-exit:  cubic-bezier(0.7, 0, 0.84, 0);
  --ml-dur-micro: 120ms;
  --ml-dur-base:  240ms;
  --ml-dur-morph: 480ms;

  /* layout — "the rigid": 1920 canvas, 150px margins, 8px grid */
  --ml-margin: clamp(20px, 7.8vw, 150px);
  --ml-container: 1620px;                          /* 1920 − 2×150 */
  --ml-header-h: clamp(72px, 6.7vw, 128px);
}

/* Lime usage rule (brand book ch. 03): as INK, lime stays ≤2% of a
   composition — LABS letters, indices, live states, cursors.
   As FIELD, lime appears only via blob shapes (site design v1.1),
   never as rectangular fills. Text on lime fields is obsidian only. */