/* @import MUST be first non-comment statement. Loading Fraunces here
   so every page that imports tokens.css gets the serif italic emphasis
   font without redeclaring it. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   tokens.css — Single source of truth for the EstateBuilder design system
   ═══════════════════════════════════════════════════════════════════

   Architecture:
     1. \:root  — dark theme tokens (default for marketing, umbrella, /pro)
     2. [data-theme="light"]  — light theme overrides (used by /gardensuite
        homeowner tool only)

   All other stylesheets (styles.css, gardensuite/css/shared.css,
   css/estatebuilder.css) reference these custom properties rather than
   redeclaring them. Page-specific CSS files contain layout + component
   styles only, not raw colour / font / spacing values.

   Adding a new colour: add it here once. Every page picks it up.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ─── Surface (dark theme, default) ─────────────────────────────── */
  --bg-base:          #0C0C0E;
  --bg-raised:        #131318;
  --bg-surface:       #1B1B22;
  --bg-elevated:      #22222A;
  --bg-hover:         rgba(245, 241, 236, 0.06);

  /* ─── Borders ────────────────────────────────────────────────────── */
  --border-subtle:    rgba(245, 241, 236, 0.06);
  --border-default:   rgba(245, 241, 236, 0.14);
  --border-strong:    rgba(245, 241, 236, 0.30);

  /* ─── Text ───────────────────────────────────────────────────────── */
  --text-primary:     #F5F1EC;
  --text-secondary:   #A0A0AA;
  --text-tertiary:    #6B7280;
  --text-muted:       #50505A;

  /* ─── Brand accent (primary) ────────────────────────────────────── */
  --gold:             #E8C87A;
  --gold-hover:       #F0D38A;
  --gold-soft:        rgba(232, 200, 122, 0.16);
  --gold-line:        rgba(232, 200, 122, 0.40);

  /* ─── Brand accent (serif emphasis) ─────────────────────────────── */
  --tan:              #C8A26A;

  /* ─── Semantic colours ──────────────────────────────────────────── */
  --green:            #66CCAA;
  --green-soft:       rgba(102, 204, 170, 0.14);
  --red:              #E05555;
  --red-soft:         rgba(224, 85, 85, 0.14);

  /* ─── Supporting accents ────────────────────────────────────────── */
  --coral:            #F08040;
  --periwinkle:       #6C8BC4;
  --violet:           #B69BD9;
  --teal:             #4ECDC4;

  /* ─── Card & elevation ──────────────────────────────────────────── */
  --card-bg:          rgba(245, 241, 236, 0.04);
  --card-border:      rgba(245, 241, 236, 0.10);
  --card-shadow:      0 18px 48px -20px rgba(0, 0, 0, 0.6);

  /* ─── Radii ─────────────────────────────────────────────────────── */
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-button:    9px;
  --radius-lg:        12px;
  --radius-card:      14px;

  /* ─── Shadows ───────────────────────────────────────────────────── */
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:        0 18px 48px -20px rgba(0, 0, 0, 0.60);

  /* ─── Typography ────────────────────────────────────────────────── */
  --font-display:     'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:        'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:       'Fraunces', 'Times New Roman', Georgia, serif;
  --font-mono:        'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ─── Legacy aliases (keep older code working) ──────────────────── */
  --text:             var(--text-primary);
  --text-dim:         var(--text-secondary);
  --line:             var(--border-subtle);
  --line-strong:      var(--border-default);
  --accent:           var(--text-primary);
  --orange:           var(--coral);
  --serif:            var(--font-serif);
  --sans:             var(--font-display);
  --body-font:        var(--font-body);
  --bg-card:          var(--bg-raised);
}

/* ─── LIGHT THEME — opt-in via data-theme="light" on <html> ───────── */
[data-theme="light"] {
  --bg-base:          #F8F3EA;
  --bg-raised:        #FFFFFF;
  --bg-surface:       #F2EBDC;
  --bg-elevated:      #FFFFFF;
  --bg-hover:         rgba(40, 30, 20, 0.04);

  --border-subtle:    rgba(42, 53, 82, 0.08);
  --border-default:   rgba(42, 53, 82, 0.16);
  --border-strong:    rgba(42, 53, 82, 0.32);

  --text-primary:     #1B2336;
  --text-secondary:   #475067;
  --text-tertiary:    #6E7689;
  --text-muted:       #9098A8;

  --gold:             #C8A26A;
  --gold-hover:       #B89058;
  --gold-soft:        rgba(200, 162, 106, 0.18);
  --gold-line:        rgba(200, 162, 106, 0.45);

  --tan:              #B89058;

  --card-bg:          rgba(255, 255, 255, 0.65);
  --card-border:      rgba(42, 53, 82, 0.10);
  --card-shadow:      0 12px 32px -16px rgba(28, 38, 56, 0.18);
}