/*
  theme-base.css — NEUTRAL WHITELABEL TOKEN CONTRACT
  ===================================================
  Zero identity. This file defines every CSS custom property the four
  calculator tools (and index.html) read for color, type, and brand
  identity slots. It carries NO Sefirot and NO Industry City values —
  it exists so the contract is documented in one place and so a tool
  page never breaks if a skin file is missing (every var() call in the
  tool pages also carries an inline fallback matching these values).

  Load order in every tool page's <head>:
    1. theme-base.css        (this file — the contract + safe defaults)
    2. theme-<skin>.css      (data-theme-slot — overrides the tokens below)

  To add a new whitelabel partner skin: copy theme-ic.css, rename it,
  fill in that partner's real palette/logo/wordmark, and point the
  <link data-theme-slot> at it. Never edit the four tool HTML files to
  reskin — that defeats the whole point of this layer.
*/

:root {
  /* ================= SURFACE BACKGROUND ================= *
   * 3-stop vertical gradient used as the page background on
   * every tool. A flat theme can set all three stops equal.  */
  --bg-top: #2c2c2c;
  --bg-mid: #4a4a4a;
  --bg-bot: #6e6e6e;

  /* ================= TEXT ================= */
  --text-primary: #ffffff;     /* headline / value text */
  --text-secondary: rgba(255,255,255,0.70);
  --text-tertiary: rgba(255,255,255,0.60);
  --text-faint: rgba(255,255,255,0.50);
  --text-faint-2: rgba(255,255,255,0.45);
  --text-faint-3: rgba(255,255,255,0.40);

  /* ================= ACCENT ================= *
   * Primary brand color: headings, active states, key figures. *
   * -rgb companion lets rules build translucent tints without   *
   * hardcoding a second color literal.                          */
  --accent: #F5A623;
  --accent-rgb: 245, 166, 35;

  /* ================= SEMANTIC STATUS COLORS ================= *
   * Used for margin/positive/negative/informational figures.
   * These are functional (profit vs loss, historic vs theoretical),
   * not decorative — a skin may retint them but should keep the
   * positive/negative/info relationship legible.                */
  --color-positive: #7ed957;
  --color-positive-rgb: 126, 217, 87;
  --color-negative: #ff6b6b;
  --color-negative-rgb: 255, 107, 107;
  --color-info: #6ec5ff;
  --color-info-rgb: 110, 197, 255;
  --color-theoretical: #c4a861;

  /* ================= PANEL / CARD SURFACES ================= */
  --panel-bg-1: rgba(0,0,0,0.35);   /* primary panel background */
  --panel-bg-2: rgba(0,0,0,0.30);
  --panel-bg-3: rgba(0,0,0,0.25);
  --panel-bg-4: rgba(0,0,0,0.20);
  --surface-tint-1: rgba(255,255,255,0.03);
  --surface-tint-2: rgba(255,255,255,0.04);
  --surface-tint-3: rgba(255,255,255,0.05);
  --surface-tint-4: rgba(255,255,255,0.08);
  --surface-tint-5: rgba(255,255,255,0.10);
  --surface-tint-6: rgba(255,255,255,0.15);

  /* ================= HAIRLINES / BORDERS ================= */
  --hairline-1: rgba(255,255,255,0.05);
  --hairline-2: rgba(255,255,255,0.08);
  --hairline-3: rgba(255,255,255,0.10);
  --hairline-4: rgba(255,255,255,0.15);
  --hairline-5: rgba(255,255,255,0.20);
  --accent-border: rgba(var(--accent-rgb), 0.25);
  --accent-border-soft: rgba(var(--accent-rgb), 0.30);

  /* ================= ACCENT TINTS (hover/active/selected) ================= */
  --accent-tint-1: rgba(var(--accent-rgb), 0.08);
  --accent-tint-2: rgba(var(--accent-rgb), 0.15);
  --accent-tint-3: rgba(var(--accent-rgb), 0.18);
  --accent-tint-4: rgba(var(--accent-rgb), 0.20);

  /* ================= INPUTS / CONTROLS ================= */
  --input-bg: rgba(255,255,255,0.10);
  --input-border: rgba(255,255,255,0.15);
  --input-border-2: rgba(255,255,255,0.20);
  --input-text: var(--text-primary);
  --input-focus-border: var(--accent);
  --input-focus-bg: var(--accent-tint-1);

  /* ================= TYPOGRAPHY ================= */
  --font-display: 'Oswald', system-ui, -apple-system, sans-serif;
  --font-body: 'Oswald', system-ui, -apple-system, sans-serif;
  --font-mono: 'Courier New', monospace;
  --font-weight-base: 400;
  --font-weight-heavy: 700;

  /* ================= SHADOWS ================= */
  --shadow-soft: 0 4px 12px rgba(0,0,0,0.30);
  --shadow-hover: 0 6px 18px rgba(0,0,0,0.50);
  --shadow-panel: 0 20px 40px rgba(0,0,0,0.50);

  /* ================= BRAND IDENTITY SLOTS =================
   * A neutral base declares NO identity. Every skin (sefirot,
   * ic, future-partner) MUST set these five tokens. The tool
   * pages render them via `content: var(--token)` on ::before
   * pseudo-elements, or as a background-image for the logo —
   * no tool page ever hardcodes a name, mark, or footer string. */
  --logo-url: none;              /* url('...') in a skin, or 'none' */
  --logo-width: 0px;
  --logo-height: 0px;
  --wordmark-text: "";           /* e.g. "Sefirot Consulting LLC" */
  --wordmark-display: none;      /* 'inline' / 'block' once a skin sets a wordmark */
  --attribution-text: "";        /* small-caps line under the wordmark */
  --footer-brand-text: "";       /* footer attribution line */

  /* ================= TABLE-SERVICE-MAP SPECIFIC ================= *
   * table-service-map.html renders literal table/booth shapes on a  *
   * canvas-like stage; these follow the same token pattern.         */
  --table-fill: rgba(255,255,255,0.95);
  --table-border: rgba(255,255,255,0.85);
  --table-text: #1a1a1a;
  --booth-fill: rgba(var(--accent-rgb), 0.95);
  --booth-text: #1a1a1a;

  /* Decorative overlay toggle (table-service-map's legacy "cloud" element).
     Off by default; a skin may set 'block' if its brand wants the decor. */
  --decor-display: none;
}