/*
 * design-tokens.css — White-Label Foundation
 * ============================================
 * Import this FIRST in index.html and worker/index.html.
 *
 * Three-tier token hierarchy:
 *
 *   Tier 1 — Primitives    : raw colour palette. Never used in components directly.
 *   Tier 2 — Brand tokens  : 4 values a client customises. Swap these to rebrand.
 *   Tier 3 — Semantic tokens: meaningful names consumed by component CSS.
 *
 * White-label usage — create a /themes/client.css that overrides only Tier 2:
 *
 *   :root {
 *     --brand-primary:     #7c3626;
 *     --brand-primary-alt: #c4622d;
 *     --brand-login-dark:  #1a0d08;
 *   }
 *
 * Import that file LAST in index.html and everything — login, sidebar, buttons,
 * badges, charts — updates automatically. No page JS files touched.
 */

/* ── Tier 1: Primitives ─────────────────────────────────────────────────────
   Raw palette values. Do NOT reference these inside component CSS.
   Components reference Tier 3 semantic tokens only.                          */
:root {
  --prim-navy-950: #0f0c29;
  --prim-navy-800: #1a1660;
  --prim-navy-700: #252184;
  --prim-blue-500: #1177C8;
  --prim-blue-300: #3ea0f0;
  --prim-gray-50:  #f9fafb;
  --prim-gray-100: #f3f4f6;
  --prim-gray-200: #e5e7eb;
  --prim-gray-400: #9ca3af;
  --prim-gray-500: #6b7280;
  --prim-gray-700: #374151;
  --prim-gray-900: #111827;
}

/* ── Tier 2: Brand tokens ───────────────────────────────────────────────────
   THE ONLY 4 VALUES A CLIENT NEEDS TO CUSTOMISE.
   Swap these 4 to fully rebrand the platform.                                */
:root {
  --brand-primary:     var(--prim-navy-700);   /* Buttons, sidebar, accents  */
  --brand-primary-alt: var(--prim-blue-500);   /* Gradient partner colour    */
  --brand-login-dark:  var(--prim-navy-950);   /* Dark end of login gradient */
  --brand-logo-emoji:  "🏗️";                   /* Swappable with <img>       */
}

/* ── Tier 3: Semantic tokens ────────────────────────────────────────────────
   These are what component CSS uses. Named by purpose, not appearance.       */
:root {
  /* Gradients */
  --color-brand-gradient:  linear-gradient(135deg, var(--brand-primary), var(--brand-primary-alt));
  --color-login-bg:        linear-gradient(145deg, var(--brand-login-dark) 0%, var(--prim-navy-800) 45%, var(--brand-primary) 100%);
  --color-accent-stripe:   linear-gradient(90deg, var(--brand-primary), var(--brand-primary-alt), var(--brand-primary));

  /* Buttons */
  --btn-primary-bg:        var(--color-brand-gradient);
  --btn-primary-shadow:    rgba(17, 119, 200, 0.35);

  /* Inputs */
  --input-focus-border:    var(--brand-primary-alt);
  --input-focus-ring:      rgba(17, 119, 200, 0.12);

  /* Logo */
  --logo-bg:               var(--color-brand-gradient);
  --logo-shadow:           rgba(37, 33, 132, 0.32);
}

/* ── Dark-mode Tier 3 overrides ─────────────────────────────────────────────
   Semantic tokens that shift in dark mode. Primitives and brand tokens
   remain unchanged — dark mode is a presentation concern only.               */
[data-theme='dark'] {
  --btn-primary-shadow:    rgba(17, 119, 200, 0.20);
  --input-focus-ring:      rgba(17, 119, 200, 0.18);
}