/* ══════════════════════════════════════════════════
   PropClean — Design Tokens v3 "Luxury Clean"
   ══════════════════════════════════════════════════ */
:root {
  /* ── Brand Palette ── */
  --green-900: #062318;
  --green-800: #0b3d2e;   /* PRIMARY */
  --green-700: #0d4a38;
  --green-600: #1a6b50;
  --green-500: #259067;
  --green-400: #34c789;
  --green-200: #a7f0d0;
  --green-100: #d4faea;
  --green-50:  #f0fdf7;

  --gold-600: #a8883a;
  --gold-500: #c9a84c;    /* ACCENT */
  --gold-400: #ddb96a;
  --gold-100: rgba(201,168,76,.15);
  --gold-50:  rgba(201,168,76,.07);

  /* ── Semantic ── */
  --primary:       var(--green-800);
  --primary-hover: var(--green-700);
  --accent:        var(--gold-500);

  --red:    #e53e3e;
  --red-l:  rgba(229,62,62,.1);
  --amber:  #d97706;
  --amb-l:  rgba(217,119,6,.1);
  --blue:   #2563eb;
  --blue-l: rgba(37,99,235,.1);

  /* ── Light Mode Surfaces ── */
  --bg:       #f4f5f0;
  --surface:  #ffffff;
  --surface2: #f9f9f6;
  --surface3: #f0f0eb;
  --cream:    #fafaf6;

  /* ── Text ── */
  --tx:  #111827;
  --t900: #111827;
  --t700: #1f2937;
  --t600: #374151;
  --t400: #6b7280;
  --t200: #d1d5db;
  --t100: #f3f4f6;

  /* ── Borders ── */
  --bd:  rgba(0,0,0,.07);
  --bd2: rgba(0,0,0,.12);
  --bdr: rgba(0,0,0,.07);
  --bdr2: rgba(0,0,0,.12);

  /* ── Shadows (warm green tint) ── */
  --sh:    0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(11,61,46,.06);
  --sh-md: 0 4px 16px rgba(11,61,46,.10);
  --sh-lg: 0 8px 32px rgba(11,61,46,.14);
  --sh-xl: 0 20px 60px rgba(0,0,0,.18);
  --shd:    var(--sh);
  --shd-sm: 0 1px 4px rgba(0,0,0,.06);
  --shd-lg: var(--sh-lg);
  --shd-xl: var(--sh-xl);

  /* ── Nav & Layout ── */
  --nav-bg:     #ffffff;
  --nav-active: var(--green-800);
  --header-bg:  #ffffff;
  --header-h:   58px;
  --nav-h:      64px;
  --sidebar-w:  240px;

  /* ── Radius ── */
  --r4: 4px; --r8: 8px; --r12: 12px;
  --r18: 16px; --r24: 20px; --r99: 999px;

  /* ── Fonts ── */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Legacy aliases */
  --b700: var(--green-800);
  --b500: var(--green-500);
  --b200: var(--green-200);
  --b100: var(--green-100);
  --b50:  var(--green-50);
  --b900: var(--green-900);
  --b800: var(--green-800);
  --b600: var(--green-600);
  --b400: var(--green-400);
  --g700: var(--green-700);
  --g500: var(--green-400);
  --g200: var(--green-200);
  --g100: var(--green-100);
  --g50:  var(--green-50);
  --g900: var(--green-900);
  --g800: var(--green-800);
  --gold: var(--gold-500);
  --gold-l: var(--gold-100);
  --primary-light: var(--green-50);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --bg:       #0f1510;
  --surface:  #182018;
  --surface2: #1e2a1e;
  --surface3: #243024;
  --cream:    #182018;

  --t900: #f0f5f0;
  --t700: #c8d8c8;
  --t600: #8fa88f;
  --t400: #5a7060;
  --t200: #2e3e2e;
  --t100: #1e2a1e;

  --bd:  rgba(255,255,255,.07);
  --bd2: rgba(255,255,255,.12);
  --bdr: rgba(255,255,255,.07);
  --bdr2: rgba(255,255,255,.12);

  --sh:    0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
  --sh-md: 0 4px 16px rgba(0,0,0,.35);
  --sh-lg: 0 8px 32px rgba(0,0,0,.4);
  --shd:    var(--sh);
  --shd-sm: 0 1px 4px rgba(0,0,0,.3);
  --shd-lg: var(--sh-lg);

  --nav-bg:    #182018;
  --header-bg: #182018;
  --red-l:   rgba(229,62,62,.15);
  --amb-l:   rgba(217,119,6,.15);
  --blue-l:  rgba(37,99,235,.15);
  --gold-100: rgba(201,168,76,.18);
  --gold-50:  rgba(201,168,76,.08);
  --green-50: rgba(37,199,137,.06);
  --green-100: rgba(37,199,137,.12);
  --primary-light: rgba(13,74,56,.4);
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--t900);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background .3s, color .3s;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(24px, 6vw, 38px); }
h2 { font-size: clamp(19px, 4vw, 26px); }
h3 { font-size: 17px; }
p { line-height: 1.65; color: var(--t600); }
a { color: var(--green-600); text-decoration: none; }
small { font-size: 12px; }
strong { font-weight: 600; }

/* ── Utilities ── */
.serif { font-family: var(--font-serif); }
.text-xs  { font-size: 11px; } .text-sm { font-size: 13px; }
.text-base { font-size: 15px; } .text-lg { font-size: 18px; }
.text-muted { color: var(--t400); } .text-mid { color: var(--t600); }
.text-dark  { color: var(--t900); }
.text-green { color: var(--green-600); } .text-red { color: var(--red); }
.text-amber { color: var(--amber); } .text-white { color: #fff; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.ta-center { text-align: center; } .ta-right { text-align: right; }
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.mt20{margin-top:20px}.mt24{margin-top:24px}
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}
.p12{padding:12px}.p16{padding:16px}.p20{padding:20px}
.flex{display:flex}.flex-col{flex-direction:column}
.aic{align-items:center}.jcc{justify-content:center}.jcsb{justify-content:space-between}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}
.hidden{display:none!important}.block{display:block}.w-full{width:100%}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.no-scroll{scrollbar-width:none}
.no-scroll::-webkit-scrollbar{display:none}

/* ── Animations ── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes slideUp  { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes shimmer  { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.anim-fade-up { animation: fadeUp .25s ease both; }
.anim-fade-in { animation: fadeIn .2s ease both; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--t200); border-radius: 2px; }