/* =========================================================
   DESIGN TOKENS
   /src/css/core/tokens.css
   ========================================================= */

:root {
  /* =========================================================
     CORE BRAND COLORS
     ========================================================= */
  --lime-green: #8DC143;               /* Primary brand color */
  --lime-green-hover: #92d36f;         /* Hover variant */
  --lime-green-dark: #7fb438;          /* Darker tone */
  --lime-green-light: #a4d65e;         /* Lighter tint */

  --primary: var(--lime-green);
  --primary-hover: var(--lime-green-hover);
  --primary-dark: var(--lime-green-dark);
  --primary-tint: #F2F9EC;             /* Pale green background */
  --primary-tint-hover: #E6F4DA;       /* Slightly darker tint */

  /* =========================================================
     SECONDARY / ACCENT COLORS
     ========================================================= */
  --accent: #181818;                   /* Black for strong text/emphasis */
  --secondary: #10b981;                /* Teal green complement */
  --red: #ef4444;
  --yellow: #f59e0b;
  --green: #16a34a;
  --blue: #3b82f6;

  /* =========================================================
     NEUTRALS & TEXT COLORS
     ========================================================= */
  --black: #181818;
  --text-color: #181818;
  --text-dark: #1f2937;
  --text-gray: #6b7280;
  --text-light: #9ca3af;
  --grey: #a9b0c0;
  --grey-hover: #c0c6d2;
  --white: #ffffff;
  --white-hover: #f5f5f5;

  /* =========================================================
     BACKGROUNDS & BORDERS
     ========================================================= */
  --border-color: #e5e7eb;
  --bg-light: #f9fafb;
  --bg-light-gray: #f8f9fa;
  --bg-hero: linear-gradient(135deg, #f7f9fc 0%, #ffffff 100%);

  /* Sidebar + Navigation Hover Surface */
  --surface-hover: #e5e5e5;

  /* =========================================================
     GRADIENTS
     ========================================================= */
  --gray-black-gradient: linear-gradient(45deg, #a9b0c0 0%, #181818 100%);
  --green-gradient: linear-gradient(135deg, #8DC143 0%, #92d36f 100%);

  /* =========================================================
     TYPOGRAPHY
     Two brand faces:
       --font-product   → product / app surfaces (home, pricing, in-app).
                          x.ai-style neutral grotesque. Swap THIS line to
                          change the product face (e.g. "Manrope", "Hanken Grotesk").
       --font-editorial → editorial surfaces (methodology, platform, glossary,
                          markets). Keep Geist here.
     --font-sans is the global default = product. Editorial pages opt in to
     --font-editorial in typography.css.
     ========================================================= */
  --font-product: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-editorial: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  --font-sans: var(--font-product);
  --font-display: var(--font-sans);
  --font-script: 'Pacifico', cursive;
  --font-mono: "Fira Code", monospace;

  /* =========================================================
     SHADOWS
     ========================================================= */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-search: 0 1px 6px rgba(32, 33, 36, 0.28);
  --shadow-search-focus: 0 1px 10px rgba(32, 33, 36, 0.4);

   /* =========================================================
   SCORE LABEL PALETTE
   Good → Very Good → Excellent ramps light → rich green; all high-contrast.
   ========================================================= */
--score-poor-bg:      #fdeaea;  --score-poor-text:      #b3261e;
--score-fair-bg:      #fcecc9;  --score-fair-text:      #9a5b00;
--score-good-bg:      #e3f1cd;  --score-good-text:      #4a7c20;
--score-very-good-bg: #c2e39a;  --score-very-good-text: #356616;
--score-excellent-bg: #9ed16a;  --score-excellent-text: #234e0c;

  /* =========================================================
     META BAND COLORS (Report Chapters)
     ========================================================= */
  --band-snapshot: #8dc143;            /* Price + Scores overview */
  --band-engine: #4a90e2;              /* Market/ROI engine */
  --band-context: #8e44ad;             /* Location context */
  --band-assumptions: #f5a623;         /* Input assumptions transparency */

  --error: #D32F2F;
}

/* =========================================================
   GLOBAL THEME BRIDGE
   Public pages read legacy tokens and semantic --color-* tokens.
   App pages still get app-specific overrides from web/base.css.
   ========================================================= */

:root {
  color-scheme: light;

  --color-background: #f1f3f5;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: rgba(17, 24, 39, 0.10);
  --color-border-strong: rgba(17, 24, 39, 0.16);
  --color-text-primary: #181818;
  --color-text-secondary: #4b5563;
  --color-text-muted: #5f6673;
  --color-brand: #8dc143;
  --color-accent: #7fb438;
  --color-focus-ring: #8dc143;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-background: #020409;
  --color-surface: #0b1118;
  --color-surface-raised: #111a24;
  --color-border: rgba(226, 232, 240, 0.12);
  --color-border-strong: rgba(226, 232, 240, 0.2);
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-brand: #8dc143;
  --color-accent: #a4d65e;
  --color-focus-ring: #8dc143;

  --black: var(--color-text-primary);
  --text-color: var(--color-text-primary);
  --text-dark: var(--color-text-primary);
  --text-gray: var(--color-text-secondary);
  --text-light: var(--color-text-muted);
  --grey: var(--color-text-muted);

  --white: var(--color-surface);
  --white-hover: rgba(255, 255, 255, 0.08);
  --bg-light: rgba(255, 255, 255, 0.05);
  --bg-light-gray: var(--color-background);
  --bg-primary: var(--color-surface);
  --border-color: var(--color-border);

  --primary-tint: rgba(141, 193, 67, 0.16);
  --primary-tint-hover: rgba(141, 193, 67, 0.22);
  --lime-green-dark: var(--color-accent);
}