/* =============================================================
   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 THEME — keeps violet+amber accents, inverts surfaces
   ============================================================= */
:root[data-theme="light"] {
  --bg-void:       #f6f5f2;
  --bg-base:       #faf9f6;
  --bg-raised:     #ffffff;
  --bg-elev:       #f4f2ec;
  --bg-hi:         #ebe8df;
  --bg-inset:      #efece4;

  --line:          #e2dfd4;
  --line-soft:     #ecead0;
  --line-strong:   #c8c3b1;

  --text-hi:       #16151a;
  --text-mid:      #51505a;
  --text-lo:       #807f87;
  --text-faint:    #b6b4ad;
  --text-on-accent:#0a0512;

  --accent:        #6d4ed8;
  --accent-hi:     #5436c8;
  --accent-lo:     #a78bfa;
  --accent-glow:   rgba(109,78,216,.16);
  --accent-wash:   rgba(109,78,216,.06);
  --accent-line:   rgba(109,78,216,.30);

  --ok:            #15a06b;
  --warn:          #c98612;
  --bad:           #d83a3a;
  --info:          #2563eb;
  --ok-wash:       rgba(21,160,107,.10);
  --warn-wash:     rgba(201,134,18,.10);
  --bad-wash:      rgba(216,58,58,.10);
  --info-wash:     rgba(37,99,235,.08);

  --st-active:     #15a06b;
  --st-pending:    #c98612;
  --st-sold:       #d83a3a;
  --st-draft:      #807f87;
  --st-reserved:   #6d4ed8;

  --grid-dot:      rgba(109,78,216,.06);

  --sh-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(40,30,80,.06);
  --sh-2: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(40,30,80,.08);
  --sh-3: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px rgba(40,30,80,.10);
  --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; }