/* ===========================================================================
   {{APP_NAME}} — design tokens
   ---------------------------------------------------------------------------
   EXTRACTED, NOT INVENTED.
   Source of truth: /home/claudepulse.cloud/public_html/styles.css (the live
   Claude Pulse site on this VPS), read during Phase 0 on 2026-09-14.

   Decision 1-A (approved 2026-09-14): match the live site exactly.
     · Dark everywhere, including the marketing pages.
     · Violet #7c6aff is the accent. NOT the indigo #6366F1 in the original
       brief — the live web site never used indigo.
     · NO CYAN. The brief asked for #22D3EE as a data highlight; the live site
       has no cyan at all, so data emphasis uses the violet family instead.
     · NO ORANGE, ever.

   /root/projects/_templates/PORTFOLIO-DESIGN-SYSTEM.md describes the Android
   and Windows APPS (#6366F1 indigo, #0F172A, flat 1px-border cards). It is not
   a web document and it loses to the live site per the house rule.

   HARD RULE: this file is the ONLY place a colour literal may appear.
   Every other stylesheet consumes var(--...). Zero hex outside this file.
   =========================================================================== */

:root {
  /* --- Surfaces (live site, verbatim) ----------------------------------- */
  --bg-base:        #09090e;
  --bg-card:        #111118;
  --bg-elevated:    #1c1c27;
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);

  /* --- Accent (live site, verbatim) ------------------------------------- */
  --accent:         #7c6aff;
  --accent-soft:    rgba(124, 106, 255, 0.12);
  --accent-glow:    rgba(124, 106, 255, 0.30);
  --accent-light:   #a78bfa;   /* derived: lighter step for a 2nd data series */

  /* --- Semantic (live site, verbatim) ----------------------------------- */
  --green:          #22c55e;
  --yellow:         #eab308;
  --red:            #ef4444;

  /* --- Text (live site, verbatim) --------------------------------------- */
  --text-primary:   #f1f0ff;
  --text-secondary: #9896b0;
  --text-muted:     #55546a;
  --text-on-accent: #ffffff;

  /* --- Radii (live site, verbatim) -------------------------------------- */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --radius-xl:      24px;

  /* --- Shadow (live site, verbatim) ------------------------------------- */
  --shadow:         0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-soft:    0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-accent:  0 6px 24px var(--accent-glow);

  /* --- Type (live site, verbatim) --------------------------------------- */
  --font:           'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --fs-body:        16px;
  --lh-body:        1.7;
  --fs-h1:          56px;  --fw-h1: 700;  --ls-h1: -1.5px;  --lh-h1: 1.1;
  --fs-h2:          36px;  --fw-h2: 700;  --ls-h2: -0.5px;  --lh-h2: 1.2;
  --fs-h3:          20px;  --fw-h3: 600;                    --lh-h3: 1.3;
  --fs-small:       13px;
  --fs-label:       12px;  --ls-label: 2px;

  /* --- Layout (live site, verbatim) ------------------------------------- */
  --container:      1120px;
  --gutter:         24px;
  --section-y:      96px;

  /* --- Spacing scale (4px base) ----------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  /* --- Motion (live site: 200ms ease) ----------------------------------- */
  --t-fast:   120ms ease-out;
  --t-base:   200ms ease;
  --t-slow:   200ms ease;

  /* --- Controls --------------------------------------------------------- */
  --control-h:   44px;          /* touch-target minimum */
  --focus-ring:  0 0 0 3px var(--accent-glow);

  /* =======================================================================
     DATA VISUALISATION
     The four token buckets are the product's core insight, so each one gets a
     fixed colour that never changes meaning between charts.
     ======================================================================= */
  --series-input:       var(--accent);         /* violet   — normal input   */
  --series-output:      var(--accent-light);   /* lilac    — output         */
  --series-cache-write: var(--yellow);         /* yellow   — cache write    */
  --series-cache-read:  var(--green);          /* green    — cache read     */

  /* Categorical series for project / server / model breakdowns. No cyan,
     no orange, and no two neighbours that read the same when desaturated. */
  --series-1: #7c6aff;
  --series-2: #22c55e;
  --series-3: #eab308;
  --series-4: #f472b6;
  --series-5: #6ea8fe;
  --series-6: #a78bfa;
  --series-7: #ef4444;
  --series-8: #55546a;

  /* An ESTIMATE is never drawn like a billed figure. Hatched fill + muted
     stroke, applied wherever is_estimate = 1. */
  --estimate-stroke: var(--text-muted);
  --estimate-fill:   rgba(255, 255, 255, 0.06);

  --grid-line:  rgba(255, 255, 255, 0.06);
  --axis-text:  var(--text-muted);
}

/* The live site is dark-only and so is this one. The block below exists so a
   light-preference viewer still gets a deliberate, legible result rather than
   the browser's own inverted guess. */
@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Marketing pages breathe less on small screens; the live site steps its
   display sizes down at 768px. */
@media (max-width: 768px) {
  :root {
    --fs-h1: 36px;  --ls-h1: -1px;
    --fs-h2: 28px;
    --section-y: 64px;
    --gutter: 16px;
  }
}