/* =============================================================
   myproperty.now — Design Tokens
   Dark UI · Violet accent · Sans + Monospace
   Drop into any project and reference via CSS variables.
   ============================================================= */

:root {
  /* ---------- Color: surfaces ---------- */
  --bg-void:        #07080a;   /* page background, outside chrome */
  --bg-base:        #0b0e10;   /* main app background */
  --bg-raised:      #0f1316;   /* cards, panels, sidebar */
  --bg-elev:        #131820;   /* hovered card / nested panel */
  --bg-hi:          #1a2030;   /* highest elevation, modals, popovers */
  --bg-inset:       #060809;   /* inset wells, code blocks */

  /* ---------- Color: lines ---------- */
  --line:           #1c2129;   /* default border, hairline */
  --line-soft:      #141820;   /* very subtle internal divider */
  --line-strong:    #2a3140;   /* prominent border, focus ring base */

  /* ---------- Color: text ---------- */
  --text-hi:        #e7eaf0;   /* primary text */
  --text-mid:       #9aa3b2;   /* secondary text, labels */
  --text-lo:        #5a6473;   /* tertiary, hints, disabled */
  --text-faint:     #3a424f;   /* watermarks, decorative */
  --text-on-accent: #0a0512;   /* text on violet pills/buttons */

  /* ---------- Color: accent (violet) ---------- */
  --accent:         #a78bfa;   /* primary accent */
  --accent-hi:      #c4b5fd;   /* hover */
  --accent-lo:      #7c66d9;   /* pressed */
  --accent-glow:    rgba(167,139,250,.18);
  --accent-wash:    rgba(167,139,250,.08);
  --accent-line:    rgba(167,139,250,.35);

  /* ---------- Color: semantic ---------- */
  --ok:             #34d399;
  --ok-wash:        rgba(52,211,153,.10);
  --warn:           #f5b042;
  --warn-wash:      rgba(245,176,66,.10);
  --bad:            #f87171;
  --bad-wash:       rgba(248,113,113,.10);
  --info:           #60a5fa;
  --info-wash:      rgba(96,165,250,.10);

  /* ---------- Property-status colors ---------- */
  --st-active:      #34d399;
  --st-pending:     #f5b042;
  --st-sold:        #f87171;
  --st-draft:       #9aa3b2;
  --st-reserved:    #a78bfa;

  /* ---------- Typography ---------- */
  --font-sans:  "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-display: "Inter", -apple-system, system-ui, sans-serif; /* used with letter-spacing tweaks */

  /* font sizes */
  --fs-3xs:   10px;
  --fs-2xs:   11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-md:    14px;
  --fs-lg:    16px;
  --fs-xl:    18px;
  --fs-2xl:   22px;
  --fs-3xl:   28px;
  --fs-4xl:   38px;
  --fs-5xl:   56px;
  --fs-6xl:   84px;

  /* line-height */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-base:   1.45;
  --lh-loose:  1.6;

  /* tracking */
  --tr-tight:  -0.02em;
  --tr-base:    0em;
  --tr-wide:    0.04em;
  --tr-mono:    0.06em;     /* uppercase mono labels */

  /* ---------- Spacing (4px base) ---------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   56px;
  --s-10:  72px;
  --s-11:  96px;
  --s-12:  128px;

  /* ---------- Radius ---------- */
  --r-xs:  3px;
  --r-sm:  5px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* ---------- Shadows / glows ---------- */
  --sh-1: 0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 0 rgba(255,255,255,.03) inset, 0 4px 16px rgba(0,0,0,.5);
  --sh-3: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px rgba(0,0,0,.6);
  --sh-glow: 0 0 0 1px var(--accent-line), 0 0 24px var(--accent-glow);

  /* ---------- Sizing primitives ---------- */
  --sidebar-w: 220px;
  --topbar-h:  56px;
  --statusbar-h: 28px;
  --maxw: 1440px;

  /* ---------- Motion ---------- */
  --ease:   cubic-bezier(.2,.7,.2,1);
  --dur-1:  120ms;
  --dur-2:  220ms;
  --dur-3:  360ms;

  /* ---------- Grid backdrop ---------- */
  --grid-dot: rgba(167,139,250,.05);

  /* ---------- Brand: Foundery Group ---------- */
  --fnd-amber:    #f5b042;     /* foundry / forge */
  --fnd-violet:   #a78bfa;     /* tech, AI */
  --fnd-cyan:     #67e8f9;     /* cool, scale */
  --fnd-rose:     #fb7185;     /* loves */
  --fnd-lime:     #86efac;     /* growth, lands */
  --fnd-glow-amber: rgba(245,176,66,.22);
  --fnd-glow-cyan:  rgba(103,232,249,.22);
}

/* =============================================================
   LIGHT GREY THEME — cool grey surfaces, violet accent unchanged
   ============================================================= */
:root[data-theme="light"] {
  /* surfaces — no pure white: cool grey scale */
  --bg-void:       #f5f5f7;   /* page canvas — lightest */
  --bg-base:       #f0f0f2;   /* main app background */
  --bg-raised:     #e8e8eb;   /* cards, panels, sidebar */
  --bg-elev:       #e2e2e6;   /* hovered card / nested panel */
  --bg-hi:         #d8d8dd;   /* modals, popovers */
  --bg-inset:      #eaeaed;   /* inset wells, code blocks */

  --line:          rgba(0,0,0,.10);
  --line-soft:     rgba(0,0,0,.06);
  --line-strong:   rgba(0,0,0,.18);

  --text-hi:       #0a0a0f;
  --text-mid:      #3a3a4a;
  --text-lo:       #6b6b80;
  --text-faint:    #a0a0b0;
  --text-on-accent:#ffffff;

  /* violet accent — UNCHANGED */
  --accent:        #7c3aed;
  --accent-hi:     #6d28d9;
  --accent-lo:     #a78bfa;
  --accent-glow:   rgba(124,58,237,.25);
  --accent-wash:   rgba(124,58,237,.08);
  --accent-line:   rgba(124,58,237,.30);

  --ok:            #15803d;
  --warn:          #b45309;
  --bad:           #b91c1c;
  --info:          #1d4ed8;
  --ok-wash:       rgba(21,128,61,.10);
  --warn-wash:     rgba(180,83,9,.10);
  --bad-wash:      rgba(185,28,28,.10);
  --info-wash:     rgba(29,78,216,.08);

  --st-active:     #15803d;
  --st-pending:    #b45309;
  --st-sold:       #b91c1c;
  --st-draft:      #6b6b80;
  --st-reserved:   #7c3aed;

  --grid-dot:      rgba(124,58,237,.06);

  --sh-1: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 3px rgba(0,0,0,.08);
  --sh-2: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 14px rgba(0,0,0,.10);
  --sh-3: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 32px rgba(0,0,0,.12);
  --sh-glow: 0 0 0 1px var(--accent-line), 0 0 24px var(--accent-glow);

  color-scheme: light;
}
:root[data-theme="light"] body { background: var(--bg-void); color: var(--text-hi); }

/* Global reset & defaults */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: var(--bg-void);
  color: var(--text-hi);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","cv11","tnum";
}
::selection { background: var(--accent-glow); color: var(--text-hi); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid var(--bg-base); }
*::-webkit-scrollbar-thumb:hover { background: #3a4458; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Utility: monospace label */
.mono { font-family: var(--font-mono); }
.up   { text-transform: uppercase; letter-spacing: var(--tr-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Multi-Brand Theme Overrides (Phase 3, 2026-05-07) ──────────────────── */
/* region.properties: cyan accent (international/cross-border) */
:root[data-brand="region"] {
  --accent:         #67e8f9;
  --accent-hi:      #a5f3fc;
  --accent-lo:      #22d3ee;
  --accent-glow:    rgba(103,232,249,.18);
  --accent-wash:    rgba(103,232,249,.08);
  --accent-line:    rgba(103,232,249,.35);
}
:root[data-brand="region"][data-theme="light"] {
  --accent:        #0891b2;
  --accent-hi:     #0e7490;
  --accent-lo:     #67e8f9;
  --accent-glow:   rgba(8,145,178,.25);
  --accent-wash:   rgba(8,145,178,.08);
  --accent-line:   rgba(8,145,178,.30);
}
/* myproperty.now: gold accent (premium-only ≥€2M) */
:root[data-brand="myproperty"] {
  --accent:         #d4af37;
  --accent-hi:      #f5d676;
  --accent-lo:      #b8960f;
  --accent-glow:    rgba(212,175,55,.18);
  --accent-wash:    rgba(212,175,55,.08);
  --accent-line:    rgba(212,175,55,.35);
}
:root[data-brand="myproperty"][data-theme="light"] {
  --accent:        #b8960f;
  --accent-hi:     #8a6f0a;
  --accent-lo:     #d4af37;
  --accent-glow:   rgba(184,150,15,.25);
  --accent-wash:   rgba(184,150,15,.08);
  --accent-line:   rgba(184,150,15,.30);
}