/*
 * Design tokens — single source of truth for color, radius, shadow and spacing.
 *
 * Loaded from base.html and base2.html BEFORE main.css / main2.css, so every
 * page can reference these regardless of which base template it extends.
 *
 * main.css already consumed `var(--primary-color, #2d3a8c)` and
 * `var(--primary-dark, #1e2a6e)` with inline fallbacks, but nothing ever
 * defined them — the fallback was always what rendered. Defining them here
 * makes those existing references resolve to a real token without changing
 * any rendered value.
 *
 * When adding a color, check whether an existing token already covers it
 * before introducing a new hex value.
 */

:root {
  /* ---- Brand ----------------------------------------------------------
   * NOTE: the site currently renders two different "primary" blues:
   *   - #2d3a8c  on base.html pages (homepage, pricing) via main.css
   *   - #525F99  on base2.html pages (landing, utilities, security) and in
   *              the browser extension, desktop app, and Figma plugin
   * --sapling-blue is the cross-product brand value. To unify the site on
   * it, change --primary-color below to var(--sapling-blue); that is the
   * only edit required. Left split for now so this file is a pure refactor
   * with no visual change.
   */
  --sapling-blue: #525F99;
  --sapling-blue-dark: #313d66;

  --primary-color: #2d3a8c;
  --primary-dark: #1e2a6e;
  --primary-light: #4a5bc7;
  /* Emphasized call-to-action buttons on landing pages. */
  --cta-color: #3f51b5;
  --secondary-color: #0ea5e9;
  --accent-color: #10b981;
  --premium-color: #f2b742;

  /* ---- Text ---- */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-light: #94a3b8;
  --text-muted: #666;

  /* ---- Surfaces ---- */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-dark: #0f172a;
  --bg-card: #ffffff;
  --bg-container-dark: #161A30;
  --bg-container-gray: #F6F7FA;

  /* ---- Borders & elevation ----
   * A tight radius and restrained shadows read as a product UI rather than a
   * 2016 Bootstrap template. --shadow-control replaces the 3-layer Material
   * elevation shadow that was copy-pasted into five separate stylesheets.
   */
  --border-color: #e2e8f0;
  --border-radius: 4px;
  --border-radius-lg: 8px;
  --border-radius-pill: 100px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-control: 0 1px 2px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}