/* ============================================================
   Dream Home Designer — design tokens
   Ported verbatim from design_handoff_dream_home/styles.css
   (variable names are intentionally identical for 1:1 mapping
    with the prototype). Component classes live in styles.css.
   ============================================================ */

/* Self-hosted display + UI + mono fonts.
   Drop the .woff2 files into ../webfonts/ before going to production.
   For now we keep a Google Fonts fallback URL so the prototype renders
   immediately; remove the @import once webfonts are placed. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* Surfaces */
  --cream-50:  #fbf7f1;
  --cream-100: #f6efe4;
  --cream-150: #efe6d6;
  --cream-200: #e7dcc8;
  --cream-300: #d8c9af;
  --cream-400: #b9a787;
  --ink-900:   #1f1a14;
  --ink-800:   #2c241b;
  --ink-700:   #3d3327;
  --ink-600:   #5a4d3c;
  --ink-500:   #7d6e58;
  --ink-400:   #a99a82;
  --ink-300:   #cabaa0;

  /* Brand */
  --clay-700: #8a3a1f;
  --clay-600: #b04a26;
  --clay-500: #c75a32;
  --clay-400: #d97956;
  --clay-300: #e9a48a;
  --clay-200: #f3c8b4;
  --clay-100: #fae0d3;
  --clay-50:  #fdf1e8;

  /* Bright green ramp — retains the legacy ``--olive-*`` token names so
     every existing ``var(--olive-*)`` reference keeps working without a
     migration, but the actual values now hit the same vivid green that
     the design-selection picker uses for its "selected" frame. Workspace
     pages call these from ~50 places (status pills, free-template
     prices, "verified" markers, queue dots, recommended option eyebrow,
     ledger credit deltas, etc.) — retinting at the source means every
     green-coded UI element across home_design lines up. Decorative SVG
     fills inside templates use raw hex (#3f5126, #5a6b3a, #2d2014) and
     are intentionally NOT tied to these tokens, so the cartoon-house
     illustrations on dashboard / workspace stay forest-green.
     ─ ``--olive-600`` is the prominent bright green (#22c55e), used for
       solid backgrounds (Search button, "Continue" CTA, selected pill,
       free-template badge) where high-contrast white text sits on top.
     ─ ``--olive-500`` is the slightly darker complement (#16a34a) used
       for fills (progress dots, gauges, queue indicators) where the
       lighter green would clash against neighbouring tokens.
     ─ ``--olive-100`` is the airy tint (#dcfce7) for pill backgrounds.
  */
  --olive-600: #22c55e;
  --olive-500: #16a34a;
  --olive-100: #dcfce7;

  --gold-500: #c8923a;
  --gold-100: #f3e6c8;

  --rose-500: #b04a55;
  --rose-100: #f4d8db;

  /* Semantic */
  --bg:           var(--cream-50);
  --bg-elev:      #ffffff;
  --bg-sunken:    var(--cream-100);
  --border:       var(--cream-200);
  --border-strong:var(--cream-300);
  --text:         var(--ink-900);
  --text-muted:   var(--ink-600);
  --text-subtle:  var(--ink-500);
  --primary:      var(--clay-500);
  --primary-hover:var(--clay-600);
  --primary-soft: var(--clay-100);

  /* Type */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Geist', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Radius */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(31, 26, 20, 0.04), 0 1px 1px rgba(31, 26, 20, 0.03);
  --shadow-md: 0 2px 4px rgba(31, 26, 20, 0.04), 0 4px 12px rgba(31, 26, 20, 0.06);
  --shadow-lg: 0 8px 24px rgba(31, 26, 20, 0.08), 0 16px 48px rgba(31, 26, 20, 0.06);
  --shadow-clay: 0 4px 16px rgba(199, 90, 50, 0.18);

  --density: 1;
}