/* ============================================================
 * HADEF /app design tokens — single source of truth
 * Created: 2026-04-27 (Design System Overhaul)
 * Spec:    vault/01-Projects/HADEF/Design System Overhaul Spec.md
 *
 * RULE OF USE
 *   1. Import this FIRST on every /app/*.html page (before any
 *      other stylesheet, before any inline <style> block).
 *   2. /app component CSS may ONLY read from var(--hadef-*).
 *      No raw hex, no raw px outside the rhythm below.
 *   3. If you need a token that doesn't exist here, add it here
 *      first, then use it. Never invent ad-hoc values in pages.
 *
 * PROVENANCE
 *   Every value below is sourced from one of three places, named
 *   in its inline comment:
 *     [v4]      = api/static/marketing-v4.css (the brand reference)
 *     [anth]    = Anthropic / Claude.com chat surface convention
 *     [merc]    = Mercury bank dashboard convention
 *     [linear]  = Linear app sidebar / status convention
 *     [stripe]  = Stripe dashboard data-density convention
 *     [hadef]   = HADEF /app-specific addition (no marketing equivalent)
 *
 * NAMING
 *   --hadef-<group>-<role>-<modifier>
 *   group   = color | text | space | radius | shadow | dur | ease | z | layout
 *   role    = bg | ink | accent | muted | line | etc.
 *   modifier= soft | strong | dark | hover | etc.
 * ============================================================ */

:root {

  /* ── COLOR · base canvas ─────────────────────────────────────
     The cream/ink pair is the entire brand register. Every other
     surface is a derivative. */
  --hadef-bg:              #F4F2ED;                     /* [v4] --cream */
  --hadef-bg-alt:          #EEEBE3;                     /* [v4] --cream-alt — for layered sections */
  --hadef-surface:         #FFFFFF;                     /* [v4] m3-card surface */
  --hadef-surface-sunken:  #FAF8F3;                     /* [hadef] for table row stripes / nested cards */
  --hadef-ink:             #1C1917;                     /* [v4] --ink */
  --hadef-ink-soft:        #2D2D2D;                     /* [v4] --ink-soft */
  --hadef-muted:           #555555;                     /* [v4] --muted */
  --hadef-ghost:           #8A847C;                     /* [hadef] secondary metadata, derived from muted */
  --hadef-label:           #A8A29E;                     /* [v4] section-label color */

  /* ── COLOR · accent register ───────────────────────────────── */
  --hadef-accent:          #E8621A;                     /* [v4] --accent */
  --hadef-accent-soft:     rgba(232, 98, 26, 0.08);     /* [v4] --accent-soft */
  --hadef-accent-hover:    #D4541A;                     /* [v4] --accent-hover */
  --hadef-accent-glow:     rgba(232, 98, 26, 0.32);     /* [v4] focus halo */
  --hadef-on-accent:       #FFFFFF;                     /* [v4] text on accent CTA */

  /* ── COLOR · borders + dividers ────────────────────────────── */
  --hadef-line:            rgba(28, 25, 23, 0.10);      /* [v4] --border */
  --hadef-line-strong:     rgba(28, 25, 23, 0.18);      /* [v4] --border-strong */
  --hadef-line-on-dark:    rgba(244, 242, 237, 0.14);   /* [v4] --border-on-dark */

  /* ── COLOR · dark surfaces (sidebar, nav, footer) ──────────── */
  --hadef-dark:            #1C1917;                     /* [v4] --surface-dark */
  --hadef-on-dark:         #F4F2ED;                     /* [v4] --on-dark */
  --hadef-on-dark-soft:    rgba(244, 242, 237, 0.78);   /* [v4] --on-dark-soft */
  --hadef-on-dark-muted:   rgba(244, 242, 237, 0.52);   /* [v4] --on-dark-muted */
  --hadef-sidebar:         #1C1917;                     /* [linear] flat dark sidebar */
  --hadef-sidebar-hover:   rgba(255, 255, 255, 0.06);   /* [linear] subtle row hover */
  --hadef-sidebar-active:  rgba(232, 98, 26, 0.16);     /* [hadef] accent-tinted active row */

  /* ── COLOR · semantic (status, validation, charts) ─────────── */
  --hadef-green:           #16A34A;                     /* [v4] hero check icon */
  --hadef-green-soft:      #DCFCE7;                     /* [merc] success-pill bg */
  --hadef-blue:            #2563EB;                     /* [hadef] info / link valence */
  --hadef-blue-soft:       #EFF6FF;                     /* [hadef] info-pill bg */
  --hadef-amber:           #D97706;                     /* [hadef] warn */
  --hadef-amber-soft:      #FEF3C7;                     /* [hadef] warn-pill bg */
  --hadef-red:             #DC2626;                     /* [hadef] destructive / error */
  --hadef-red-soft:        #FEE2E2;                     /* [hadef] error-pill bg */
  --hadef-purple:          #7C3AED;                     /* [hadef] AI / generative valence */
  --hadef-purple-soft:     #EDE9FE;
  --hadef-linkedin:        #0A66C2;                     /* [hadef] platform-specific */

  /* ── TYPE · families ───────────────────────────────────────── */
  --hadef-font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;   /* [v4] */
  --hadef-font-mono:  'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace;                        /* [v4] */

  /* ── TYPE · scale (sizes mirror v4 fluid clamps where useful) ── */
  --hadef-text-display-xl: clamp(38px, 5vw, 60px);      /* [v4] --fs-display-xl — hero h1 */
  --hadef-text-display-l:  clamp(36px, 4.6vw, 60px);    /* [v4] --fs-display-l */
  --hadef-text-display-m:  clamp(28px, 3.4vw, 42px);    /* [v4] --fs-display-m — page intros */
  --hadef-text-h1:         clamp(22px, 2.2vw, 28px);    /* [v4] --fs-heading-l — page title strip */
  --hadef-text-h2:         22px;                        /* [hadef] section titles inside cards */
  --hadef-text-h3:         18px;                        /* [v4] --fs-heading-m — card title */
  --hadef-text-h4:         16px;                        /* [hadef] subsection */
  --hadef-text-body-l:     19px;                        /* [v4] --fs-body-l — lead copy */
  --hadef-text-body:       16px;                        /* [v4] --fs-body */
  --hadef-text-body-s:     14px;                        /* [v4] --fs-body-s — table cells, button text */
  --hadef-text-caption:    13px;                        /* [v4] --fs-caption */
  --hadef-text-label:      12px;                        /* [v4] --fs-label */
  --hadef-text-eyebrow:    11px;                        /* [v4] .s-label — mono uppercase */
  --hadef-text-mono-stat:  18px;                        /* [hadef] dashboard KPIs (Mercury-style tabular) */

  /* ── TYPE · weight ─────────────────────────────────────────── */
  --hadef-weight-regular:  400;                         /* [v4] body */
  --hadef-weight-medium:   500;                         /* [v4] eyebrows */
  --hadef-weight-semi:     600;                         /* [v4] buttons, nav */
  --hadef-weight-bold:     700;                         /* [v4] card titles */
  --hadef-weight-black:    800;                         /* [v4] page h1, hero */

  /* ── TYPE · line-height ────────────────────────────────────── */
  --hadef-lh-flat:         1.0;                         /* [hadef] stat numbers, single-line buttons */
  --hadef-lh-tight:        1.15;                        /* [v4] display headings */
  --hadef-lh-snug:         1.3;                         /* [hadef] card headings */
  --hadef-lh-normal:       1.5;                         /* [v4] body baseline */
  --hadef-lh-relaxed:      1.6;                         /* [v4] body — long-form prose */

  /* ── TYPE · letter-spacing (the feel-makers) ───────────────── */
  --hadef-track-display:   -0.025em;                    /* [v4] hero / display headings */
  --hadef-track-tight:     -0.02em;                     /* [v4] page titles */
  --hadef-track-default:   0;                           /* [v4] body */
  --hadef-track-eyebrow:   0.14em;                      /* [v4] s-label uppercase mono */
  --hadef-track-mono-tab:  0.06em;                      /* [v4] nav-pill mono caps */

  /* ── SPACE · 4-based rhythm matching v4 ────────────────────── */
  --hadef-space-1:  4px;                                /* [v4] --sp-1 */
  --hadef-space-2:  8px;                                /* [v4] --sp-2 */
  --hadef-space-3:  12px;                               /* [hadef] inserted between v4 sp-2 and sp-3 */
  --hadef-space-4:  16px;                               /* [v4] --sp-3 */
  --hadef-space-5:  24px;                               /* [v4] --sp-4 */
  --hadef-space-6:  32px;                               /* [v4] --sp-5 */
  --hadef-space-7:  48px;                               /* [v4] --sp-6 */
  --hadef-space-8:  64px;                               /* [v4] --sp-7 */
  --hadef-space-9:  96px;                               /* [v4] --sp-8 */
  --hadef-space-10: 128px;                              /* [v4] --sp-9 — section gutters */

  /* ── RADIUS ────────────────────────────────────────────────── */
  --hadef-radius-xs:   6px;                             /* [hadef] pill content */
  --hadef-radius-sm:   8px;                             /* [hadef] inputs, nav-item */
  --hadef-radius:      10px;                            /* [v4] --r-button */
  --hadef-radius-md:   14px;                            /* [v4] m3-card border-radius */
  --hadef-radius-lg:   16px;                            /* [v4] --r-card */
  --hadef-radius-xl:   22px;                            /* [hadef] hero panels, dashboards */
  --hadef-radius-pill: 9999px;                          /* [v4] --r-full */

  /* ── SHADOW ────────────────────────────────────────────────── */
  --hadef-shadow-xs:    0 1px 2px rgba(28, 25, 23, 0.04);                                          /* [hadef] flat surface lift */
  --hadef-shadow-card:  0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.03);              /* [v4] --shadow-card */
  --hadef-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.05);             /* [v4] --shadow-hover */
  --hadef-shadow-pop:   0 10px 28px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);      /* [v4] m3-card */
  --hadef-shadow-modal: 0 20px 60px rgba(28, 25, 23, 0.14);                                        /* [stripe] modal lift */
  --hadef-shadow-accent:0 4px 12px rgba(232, 98, 26, 0.32);                                        /* [hadef] primary CTA glow */
  --hadef-shadow-focus: 0 0 0 3px rgba(232, 98, 26, 0.32);                                         /* [v4] focus-visible ring */

  /* ── MOTION ────────────────────────────────────────────────── */
  --hadef-ease-standard:   cubic-bezier(0.16, 1, 0.3, 1);   /* [v4] --ease-out (anth-style) */
  --hadef-ease-emphasized: cubic-bezier(0.4, 0, 0.6, 1);    /* [v4] hmc-pulse — accent moments */
  --hadef-ease-linear:     linear;                          /* [v4] marquee */
  --hadef-dur-instant:     80ms;                            /* [hadef] press feedback */
  --hadef-dur-fast:        150ms;                           /* [v4] --dur-fast */
  --hadef-dur-base:        300ms;                           /* [v4] --dur-standard */
  --hadef-dur-slow:        600ms;                           /* [v4] --dur-scroll */

  /* ── LAYOUT ────────────────────────────────────────────────── */
  --hadef-max-container: 1200px;                            /* [v4] --max-container */
  --hadef-max-prose:     680px;                             /* [v4] --max-prose */
  --hadef-max-hero:      820px;                             /* [v4] --max-hero */
  --hadef-nav-height:    80px;                              /* [v4] --nav-height */
  --hadef-sidebar-w:     240px;                             /* [linear] sidebar width */

  /* Editorial / pricing layout (aliases — no new colors) */
  --hadef-layout-editorial-meta-w: 140px;                 /* [hadef] .hadef-editorial-row col 1 — matches design ref */
  --hadef-offset-popular-pill:     -10px;                 /* [hadef] POPULAR badge sits above card radius */
  --hadef-tap-min:       40px;                              /* [hadef] desktop tap target */
  --hadef-tap-min-touch: 44px;                              /* [hadef] mobile tap target (WCAG) */

  /* Cluster C — form & feedback primitives [hadef] prompt 62 */
  --hadef-max-toast:       360px;
  --hadef-text-micro:      10px;
  --hadef-badge-pad-x:     6px;
  --hadef-space-hair:      2px;
  --hadef-dot-status:      6px;
  --hadef-size-control:    18px;
  --hadef-toggle-track-w:  36px;
  --hadef-toggle-track-h:  20px;
  --hadef-toggle-thumb:    16px;
  --hadef-toggle-travel:   16px;
  --hadef-border-spinner:  2px;
  --hadef-textarea-min-h:  var(--hadef-space-9);
  --hadef-btn-min-sm:      var(--hadef-space-6);
  --hadef-btn-min-lg:      var(--hadef-space-7);
  --hadef-skeleton-min-h:  var(--hadef-space-4);
  --hadef-progress-track-h: 6px;
  --hadef-dur-shimmer:     1.4s;
  --hadef-dur-spinner:     700ms;

  /* ── Z-INDEX (small, named, predictable) ───────────────────── */
  --hadef-z-base:    0;
  --hadef-z-raised:  10;                                    /* sticky in-page */
  --hadef-z-nav:     50;                                    /* [v4] sticky nav */
  --hadef-z-overlay: 100;                                   /* dropdowns */
  --hadef-z-modal:   1000;
  --hadef-z-toast:   2000;
}

/* ── REDUCED MOTION ─────────────────────────────────────────────
   Respect OS-level preference. Pages MUST inherit this rather
   than redefine. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hadef-dur-instant: 1ms;
    --hadef-dur-fast:    1ms;
    --hadef-dur-base:    1ms;
    --hadef-dur-slow:    1ms;
  }
}