/* shaun godinho — design tokens
 * Single source of truth for color, type, space, motion, radius, shadow.
 * Loaded by site.css (@import) so every page using the marketing stylesheet
 * inherits the system. The CRM and frontend/ islands import this file
 * directly via crm/index.html's <link> and frontend/src/main.tsx's
 * import statement (added in Phase 0 follow-up).
 *
 * Conventions:
 *   --bg-*       background surfaces, from deepest to highest raise
 *   --ink-*      foreground text colors, from strongest to faintest
 *   --hairline-* translucent borders (per design directive: prefer over hard borders)
 *   --ember      brand accent (warm, softened coral)
 *   --live       status accent (softened green)
 *   --space-N    8px grid (N maps to multiples)
 *   --text-*     type scale (display through micro)
 *   --tracking-* letter-spacing (display drastic-negative, label drastic-positive)
 *   --ease-*     physics easings (no linear)
 *   --duration-* motion durations
 *   --shadow-*   multi-layer ambient (per directive: diffused, not harsh)
 */

:root {
  /* ── Background surfaces (dark, warm tilt toward ember — never pure black)
   * Pre-polish: cool-blue grays (#101014, #16161b). Updated to warm slightly
   * toward the ember accent so secondary surfaces feel lit-from-within rather
   * than sterile. */
  --bg-base:        #08080a;
  --bg-raise-1:     #11100f;
  --bg-raise-2:     #1a1714;
  --bg-glass:       rgba(255, 255, 255, 0.03);
  --bg-glass-hi:    rgba(255, 255, 255, 0.06);

  /* ── Foreground (warm off-white, never pure #fff) ── */
  --ink-strong:     #f5f4f1;
  --ink-default:    #d8d6cf;
  --ink-muted:      #8b897f;
  --ink-faint:      #5a5854;
  --ink-ghost:      #3a3936;

  /* ── Brand atoms ── */
  --ember:          #e87858;
  --ember-soft:     #f08a6b;
  --ember-glow:     rgba(232, 120, 88, 0.28);
  --ember-veil:     rgba(232, 120, 88, 0.08);

  --live:           #7fd9a3;
  --live-glow:      rgba(127, 217, 163, 0.22);

  /* ── Hairlines (per directive: 1px translucent over hard borders)
   * Pre-polish: 6% / 10% felt invisible against the warm dark base. Bumped
   * so divisions read at a glance without becoming hard edges. */
  --hairline:       rgba(255, 255, 255, 0.10);
  --hairline-hi:    rgba(255, 255, 255, 0.16);
  --hairline-lo:    rgba(255, 255, 255, 0.06);

  /* ── Spacing (8px grid) ── */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;
  --space-8:        64px;
  --space-9:        96px;
  --space-10:       128px;
  --space-11:       192px;

  /* ── Type scale ── */
  --text-display:   clamp(3rem, 8vw, 5.5rem);    /* 48 → 88 */
  --text-h1:        clamp(2rem, 5vw, 3.5rem);    /* 32 → 56 */
  --text-h2:        clamp(1.5rem, 3vw, 2rem);    /* 24 → 32 */
  --text-h3:        1.25rem;                     /* 20 */
  --text-lede:      clamp(1.0625rem, 1.5vw, 1.25rem); /* 17 → 20 */
  --text-body:      0.9375rem;                   /* 15 */
  --text-small:     0.8125rem;                   /* 13 */
  --text-label:     0.75rem;                     /* 12 */
  --text-micro:     0.6875rem;                   /* 11 */

  /* ── Tracking (drastic contrast: display tightens, labels widen) ── */
  --tracking-display: -0.045em;
  --tracking-h1:      -0.03em;
  --tracking-h2:      -0.022em;
  --tracking-h3:      -0.015em;
  --tracking-lede:    -0.012em;
  --tracking-body:    -0.005em;
  --tracking-label:   0.08em;
  --tracking-micro:   0.16em;

  /* ── Weight ── */
  --weight-display:  800;
  --weight-bold:     700;
  --weight-strong:   600;
  --weight-medium:   500;
  --weight-regular:  400;

  /* ── Radius ── */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-pill:    999px;

  /* ── Motion (physics — no linear) ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:  120ms;
  --duration-base:  240ms;
  --duration-slow:  480ms;
  --duration-xslow: 800ms;

  /* ── Shadow (multi-layered diffused ambient) ── */
  --shadow-1:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-2:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.32),
    0 24px 64px rgba(0, 0, 0, 0.28);
  --shadow-3:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 48px 128px rgba(0, 0, 0, 0.35);
  --shadow-glow-ember:
    0 0 0 1px var(--ember-veil),
    0 8px 32px var(--ember-veil);

  /* ── Atmospheric body wash (subtle radial halos)
   * Slight warmth boost (0.045 → 0.08) so the ember halo reads as the room's
   * focal light source rather than a flat color. The cool secondary halo
   * stays subtle as a counterweight. */
  --bg-atmosphere:
    radial-gradient(1200px 700px at 50% -240px, rgba(232, 120, 88, 0.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(120, 140, 220, 0.03), transparent 70%);
}