/* ============================================================
   MODIFI — Design Tokens
   Extracted from "MODIFI Design proposal" (Keynote deck).
   Single source of truth. Everything else references these vars.
   Colours sampled directly from the deck; blue is an interpolated
   anchor — recalibrate --mod-blue against the brand file if needed.
   ============================================================ */

:root {
  /* -- Core palette (sampled) ------------------------------- */
  --mod-yellow:      #FCC000;  /* Brand. Energy / play. The signal. */
  --mod-ink:         #000000;  /* Editorial black. The serious frame. */
  --mod-warm-ink:    #2A2020;  /* Espresso — warm alt dark surface.  */
  --mod-paper:       #FFFFFF;  /* Readable content surface.          */
  --mod-blue:        #1560C0;  /* Interactive / selected. (anchor)   */
  --mod-orange:      #D86C00;  /* Record / live-active state.        */
  --mod-red:         #DA1A22;  /* Alert / punctuation accent.        */

  /* -- Neutral scale (grey gummy UI) ------------------------ */
  --mod-n-50:        #F7F7F7;
  --mod-n-100:       #F2F2F2;
  --mod-n-200:       #E6E6E6;
  --mod-n-300:       #D6D6D6;
  --mod-n-400:       #B8B8B8;
  --mod-n-500:       #7F7F7F;  /* Logo grey — deliberately soft.     */
  --mod-n-600:       #5C5C5C;
  --mod-n-700:       #3B3B3B;
  --mod-n-800:       #222222;
  --mod-n-900:       #111111;

  /* -- Yellow tints/shades (for states & fields) ------------ */
  --mod-yellow-tint: #FFD84D;
  --mod-yellow-deep: #E0A800;

  /* -- Semantic aliases ------------------------------------- *
   * Reference these in product code, not the raw palette,
   * so a surface can be re-themed without touching components. */
  --mod-bg:            var(--mod-ink);
  --mod-fg:            var(--mod-paper);
  --mod-accent:        var(--mod-yellow);
  --mod-interactive:   var(--mod-blue);
  --mod-record:        var(--mod-orange);
  --mod-alert:         var(--mod-red);
  --mod-muted:         var(--mod-n-500);
  --mod-surface:       var(--mod-n-100);   /* light UI blob field */
  --mod-surface-edge:  var(--mod-n-300);
  --mod-on-accent:     var(--mod-ink);     /* text on yellow      */
  --mod-on-interactive:var(--mod-paper);   /* text on blue        */

  /* ============================================================
     Typography — three roles (system stacks, zero dependency)
     display  = neo-grotesque editorial (Helvetica Neue)
     rounded  = playful product UI      (SF Pro Rounded via ui-rounded)
     mono     = technical labels        (running header, annotations)
     ============================================================ */
  --mod-font-display: "Helvetica Neue", Helvetica, Arial, "Inter", system-ui, sans-serif;
  --mod-font-rounded: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
                      "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --mod-font-mono:    ui-monospace, "SF Mono", "SFMono-Regular", Menlo,
                      "Roboto Mono", monospace;

  /* Fluid type scale (clamp: min / preferred / max) */
  --mod-text-hero:   clamp(3.5rem, 1.5rem + 9vw, 9rem);     /* deck titles   */
  --mod-text-xl:     clamp(2.5rem, 1.4rem + 4.5vw, 5rem);   /* section leads */
  --mod-text-l:      clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --mod-text-m:      clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --mod-text-body:   1.0625rem;   /* 17px */
  --mod-text-sm:     0.9375rem;   /* 15px */
  --mod-text-label:  0.75rem;     /* 12px running-header labels */
  --mod-text-micro:  0.6875rem;   /* 11px */

  --mod-leading-tight: 1.0;
  --mod-leading-snug:  1.15;
  --mod-leading-body:  1.5;

  --mod-track-tight:   -0.03em;   /* big display */
  --mod-track-normal:  0;
  --mod-track-label:   0.14em;    /* uppercase mono labels */

  --mod-weight-regular: 400;
  --mod-weight-medium:  500;
  --mod-weight-bold:    700;

  /* ============================================================
     Spacing — 8px base, 4px half-step
     ============================================================ */
  --mod-space-1:  0.25rem;   /*  4 */
  --mod-space-2:  0.5rem;    /*  8 */
  --mod-space-3:  0.75rem;   /* 12 */
  --mod-space-4:  1rem;      /* 16 */
  --mod-space-5:  1.5rem;    /* 24 */
  --mod-space-6:  2rem;      /* 32 */
  --mod-space-7:  3rem;      /* 48 */
  --mod-space-8:  4rem;      /* 64 */
  --mod-space-9:  6rem;      /* 96 */
  --mod-space-10: 8rem;      /* 128 */

  --mod-gutter:   clamp(1.25rem, 0.5rem + 3vw, 4rem);  /* page side margin */
  --mod-maxw:     72rem;                               /* content column   */

  /* ============================================================
     Radius — pills & squircles are signature
     ============================================================ */
  --mod-r-sm:       0.5rem;    /*  8 */
  --mod-r-md:       1rem;      /* 16 */
  --mod-r-lg:       1.75rem;   /* 28 — gummy cards */
  --mod-r-squircle: 28%;       /* app-icon / tiles */
  --mod-r-pill:     999px;

  /* ============================================================
     Elevation — mostly flat; soft lift + optional gel highlight
     ============================================================ */
  --mod-shadow-sm: 0 1px 2px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --mod-shadow-md: 0 4px 10px rgba(0,0,0,.10), 0 12px 28px rgba(0,0,0,.10);
  --mod-shadow-lg: 0 12px 30px rgba(0,0,0,.16), 0 32px 64px rgba(0,0,0,.16);
  --mod-gel-highlight: inset 0 2px 4px rgba(255,255,255,.55),
                       inset 0 -3px 6px rgba(0,0,0,.10);

  /* ============================================================
     Motion — named for the engine's crossfade semantics
     (30ms tight timeline sync · 150ms live smoothing)
     ============================================================ */
  --mod-dur-instant: 30ms;
  --mod-dur-fast:    150ms;
  --mod-dur-base:    240ms;
  --mod-dur-slow:    480ms;

  --mod-ease-crossfade: cubic-bezier(.4, 0, .2, 1);   /* smooth blend */
  --mod-ease-out:       cubic-bezier(.16, 1, .3, 1);
  --mod-ease-gel:       cubic-bezier(.34, 1.56, .64, 1); /* gummy overshoot */
}