/* ==========================================================================
   PumaDoc design tokens
   --------------------------------------------------------------------------
   Brand palette:
     · vibrant modern green  — the mark, primary CTAs, "go" states
     · Porsche Frozen Blue   — data, links, cold precision, the Inception grid
     · clean white           — the ground everything sits on
   The page commits to one light world. The only dark surfaces are instruments:
   the hero console and the closing CTA. Every colour is declared here so no
   component ever reaches for a literal.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Ground — cool neutrals biased toward the frozen blue, never flat grey */
  --bg:          #ffffff;
  --bg-2:        #f4f8fb;
  --surface:     #ffffff;
  --surface-2:   #f4f8fb;
  --surface-3:   #e8f0f5;
  --line:        #e1eaf0;
  --line-strong: #c3d4de;

  /* Text — all four pass WCAG AA on white at their intended sizes */
  --ink:    #0a1216;   /* 18.5:1 */
  --ink-2:  #3c4b53;   /*  9.3:1 */
  --ink-3:  #55666f;   /*  6.0:1 */
  --ink-4:  #62747d;   /*  4.9:1 on white, 4.6:1 on --bg-2 — smallest labels clear AA */

  /* Brand green — a fill colour. Text on it is always --ink. */
  --brand:      #b8f13f;
  --brand-soft: #cbf76e;
  --brand-deep: #8fc70e;
  --brand-ink:  #3d6206;   /* 7.3:1 — the green that may be used as text */
  /* Text that sits ON the green fill. Never rescoped by a dark block, or a
     button inside one inherits white and becomes unreadable. */
  --on-brand:   #0a1216;
  --brand-glow: rgba(184, 241, 63, 0.45);
  --brand-wash: rgba(184, 241, 63, 0.14);

  /* Frozen blue */
  --frost:      #9ec1d6;
  --frost-soft: #d6e6ef;
  --frost-pale: #eef5f9;
  --frost-deep: #2e6483;   /* 6.4:1 — the blue that may be used as text */

  /* Instruments — the two deliberately dark surfaces */
  --night:      #0a1216;
  --night-2:    #121d22;
  --night-3:    #1b282e;
  --night-line: rgba(158, 193, 214, 0.20);
  --night-ink:  #e7eff3;
  --night-ink-2:#9fb2bc;
  --night-ink-3:#71858f;

  /* Document surfaces — artifact cards, the Knowledge Site mock */
  --paper:       #ffffff;
  --paper-2:     #f4f8fb;
  --paper-line:  #e1eaf0;
  --paper-ink:   #0a1216;
  --paper-muted: #55666f;

  /* Live-data pulses. Dark on light surfaces, bright inside instruments. */
  --signal:       #2e6483;
  --signal-bright:#b8f13f;

  /* Entity accents — Market and GTM are the brand colours, so the five-entity
     language and the brand read as one system (PRD §12.3, retuned for white). */
  --e-customer: #ea6a0a;
  --e-market:   #2e6483;
  --e-product:  #7c4de0;
  --e-gtm:      #6ba50a;
  --e-business: #d91e48;

  /* Semantic — separate from the brand accent */
  --good: #247640;   /* 5.6:1 — used on small text, so it has to clear AA */
  --warn: #b26a00;
  --bad:  #c42a3c;

  /* Elevation — a white page needs real shadows to build hierarchy */
  --shadow-sm: 0 1px 2px rgba(10, 18, 22, 0.05);
  --shadow-md: 0 6px 18px -8px rgba(10, 18, 22, 0.16), 0 1px 3px rgba(10, 18, 22, 0.05);
  --shadow-lg: 0 28px 60px -32px rgba(10, 18, 22, 0.30), 0 2px 10px rgba(10, 18, 22, 0.05);

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --step-2:  clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4:  clamp(2.25rem, 1.8rem + 2.25vw, 3.5rem);
  --step-5:  clamp(2.75rem, 2rem + 3.75vw, 4.75rem);

  /* Space — 8px scale */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --shell: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;

  --header-h: 68px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-fold: cubic-bezier(0.65, 0, 0.2, 1);
}

/* One rule serves all five entities everywhere they appear. */
[data-accent='customer'] { --accent: var(--e-customer); }
[data-accent='market']   { --accent: var(--e-market); }
[data-accent='product']  { --accent: var(--e-product); }
[data-accent='gtm']      { --accent: var(--e-gtm); }
[data-accent='business'] { --accent: var(--e-business); }