/* EdificeX design tokens — the ONLY file in this app that spells a colour.
   ------------------------------------------------------------------------
   The brand, surface, text, status, shadow and radius tokens are copied verbatim from Portico
   (edificex-portico/src/assets/styles/index.scss) so model.edificex.ai renders as the same product
   as edificex.ai. Keep them in step; tests/edificex/test_portico_design.py checks the values.
   Everything else — stylesheets, templates, chart scripts — reads these variables. Chart scripts
   resolve them at runtime through CHART in js/colors.js. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;

  /* --- Portico: background layers --- */
  --bg-0: #ffffff;
  --bg-1: #f8f8f8;
  --bg-2: #f2f2f2;
  --bg-3: #e8e8e8;
  --bg-4: #dddddd;

  /* --- Portico: surfaces & borders --- */
  --surface: #ffffff;
  --surface-strong: #f5f5f5;
  --surface-glass: rgba(255, 255, 255, 0.9);
  --border: #e0e0e0;
  --border-strong: rgba(200, 200, 200, 0.85);
  --border-accent: rgba(153, 0, 76, 0.35);

  /* --- Portico: text --- */
  --text: #1a1a1a;
  --text-2: #333333;
  --text-muted: #333333;
  --text-dim: #444444;
  --text-faint: #555555;
  --text-on-brand: #ffffff;

  /* --- Portico: brand (logo-X maroon family) --- */
  --brand: #99004c;
  --brand-soft: #b8336e;
  --brand-deep: #7a003d;
  --grad-brand: linear-gradient(135deg, #99004c 0%, #7a003d 100%);
  --grad-fintech: linear-gradient(135deg, #99004c 0%, #7a003d 100%);
  --grad-glow: radial-gradient(circle at 50% 0%, rgba(153, 0, 76, 0.15), transparent 60%);

  /* Headline figures — Portico's accent-text treatment with enough range to read as a gradient */
  --grad-accent-text: linear-gradient(120deg, #7a003d 0%, #99004c 45%, #c2407a 100%);
  --grad-accent-bar: linear-gradient(90deg, #7a003d 0%, #99004c 50%, #c2407a 100%);
  --glow-panel: radial-gradient(120% 160% at 0% 0%, rgba(153, 0, 76, 0.09), transparent 55%);

  /* Brand tints, as Portico uses them inline (pills, Book a Call, focus rings) */
  --brand-tint-1: rgba(153, 0, 76, 0.04);
  --brand-tint-2: rgba(153, 0, 76, 0.08);
  --brand-tint-3: rgba(153, 0, 76, 0.14);
  --brand-line: rgba(153, 0, 76, 0.25);
  --brand-line-strong: rgba(153, 0, 76, 0.55);
  --brand-shadow: 0 8px 22px rgba(153, 0, 76, 0.32);
  --brand-shadow-hover: 0 12px 28px rgba(153, 0, 76, 0.42);
  --focus-ring: 0 0 0 3px rgba(153, 0, 76, 0.18);

  /* --- Portico: status --- */
  --success: #2f9e44;
  --warn: #e67700;
  --danger: #c92a2a;
  --success-tint: rgba(47, 158, 68, 0.1);
  --warn-tint: rgba(230, 119, 0, 0.1);
  --danger-tint: rgba(201, 42, 42, 0.08);
  --success-line: rgba(47, 158, 68, 0.3);
  --warn-line: rgba(230, 119, 0, 0.35);
  --danger-line: rgba(201, 42, 42, 0.3);

  /* --- Portico: shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 0 1px rgba(153, 0, 76, 0.18), 0 8px 32px rgba(153, 0, 76, 0.14);
  --shadow-stat: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(153, 0, 76, 0.08);
  --ink-6: rgba(0, 0, 0, 0.06);
  --ink-12: rgba(0, 0, 0, 0.12);
  --scrim: rgba(0, 0, 0, 0.45);
  --white-sheen: rgba(255, 255, 255, 0.18);

  /* --- Portico: radii --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* --- Charts (validated categorical order on white; see docs/specs/model-site-portico-design.md) ---
     Assign in this order, never cycled. Series identity also carries a legend, so no chart relies
     on colour alone. */
  --chart-1: #99004c; /* maroon  — the EdificeX series */
  --chart-2: #2a78d6; /* blue */
  --chart-3: #eb6834; /* orange */
  --chart-4: #1baf7a; /* aqua */
  --chart-5: #c98500; /* amber */
  --chart-6: #4a3aa7; /* violet */
  --chart-neutral: #6b7280; /* reference lines: break-even, baselines */
  --chart-grid: rgba(0, 0, 0, 0.06);
  --chart-zero: rgba(0, 0, 0, 0.14);
  --chart-seq-low: #f7e6ee; /* sequential scale: one hue, light → dark */
  --chart-seq-high: #7a003d;
}