/* ============================================================================
   MICAH LINDENBERGER DESIGN SYSTEM — tokens
   The single file to copy into a new project. Every value was measured from
   the live sites (2026folio, applicants, lattice2026) unless a comment says
   "recommended". Mirrors the micah-design-system skill one to one; change
   both together or they drift.

   Two registers live here:
     --page-*   Graphite long-form (applicants). The default for case studies.
     --deck-*   The 2026 mini portfolio deck (light, color per project).
   Product registers (--rs-* etc.) are NOT here on purpose: they belong to the
   product being shown and are scoped under .product in that project only.
   ============================================================================ */

:root {
  /* ── Graphite long-form ──────────────────────────────────────────────── */
  --page-bg:      #161516;
  --page-surface: #1D1D1D;
  --page-fg:      #F4F1EC;
  --page-soft:    #D0C9C1;
  --page-muted:   #B7B0A8;
  --page-rule:    #303030;
  --page-accent:  #9C8B70; /* the one warm note: large marks only, never under 18px */

  --font-heading: 'Instrument Sans', system-ui, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --font-label:   'IBM Plex Mono', 'Courier New', monospace;
  --font-deck:    'Proxima Nova', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --size-display: clamp(30px, 3.6vw, 54px);
  --line-display: 1.04;
  --weight-display: 600;
  --size-heading: clamp(18px, 1.8vw, 26px);
  --line-heading: 1.12;
  --weight-heading: 600;
  --size-body: 15px;
  --line-body: 1.65;
  --size-label: 10px;
  --weight-label: 400;
  --tracking-label: 0.14em;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 8px 30px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.4);

  --content-max: 1080px;
  --gutter: clamp(20px, 6vw, 48px);
  --space-section: clamp(64px, 10vw, 120px);

  --hero-spark-1: #85AF00;
  --hero-spark-2: #FFCC00;
  --hero-spark-3: #FB9CFD;
  --hero-spark-4: #A19BFF;
  --hero-spark-5: #FF4C00;

  /* ── Motion, shared by every register ────────────────────────────────── */
  --ease-enter:  cubic-bezier(.22, 1, .36, 1);   /* enter, hover, reveal */
  --ease-arrive: cubic-bezier(.23, 1, .32, 1);   /* deck copy/media arriving */
  --ease-exit:   cubic-bezier(.4, 0, 1, 1);      /* always shorter than the enter */
  --ease-move:   cubic-bezier(.65, 0, .35, 1);   /* page color, auto slides, zoom */
  --ease-settle: cubic-bezier(.32, .72, 0, 1);   /* drag release, manual slide */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;
  --reveal-fast:   250ms;
  --reveal-medium: 400ms;
  --reveal-slow:   700ms;

  /* ── Deck (2026 mini portfolio) ──────────────────────────────────────── */
  --deck-ink: #141414;
  --deck-ink-header: #1C1C1C;
  --deck-paper-text: #F5F4F1;
  --deck-cream: #FAF7F3;
  --deck-lilac: #F2E6FB;
  --deck-charcoal: #222222;
  --deck-white: #FFFFFF;
  --deck-overview: #000000;
  --deck-placeholder: #f4f2ec;
  --page-margin: 64px;
  --page-margin-left: 140px;
  --page-margin-top: 130px;
  --page-margin-mobile: 28px;
  --page-margin-top-mobile: 96px;
  --cursor-size: 16px;
  --cursor-color: #ffffff;
  --cursor-color-active: #ff5a36;
  --cursor-color-grabbing: #db4d2e;
  --dot-color: rgba(20, 20, 20, .2);
  --dot-color-hover: rgba(20, 20, 20, .45);
  --dot-active-opacity: .9;
  --hover-grow-scale-button: 1.12;
  --hover-grow-scale-card: 1.05;
  --hover-grow-duration: .32s;
  --hover-grow-easing: var(--ease-enter);
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}