/* ============================================================
   TENANTO — DESIGN TOKENS
   Brand: rental & property management SaaS
   Mood: trustworthy · organized · calm · practical
   ============================================================ */

:root {
  /* ---------- BRAND: NAVY (primary / trust) ---------- */
  --navy-900: #14273f;
  --navy-800: #1b3454;
  --navy-700: #1f3a5f;   /* PRIMARY */
  --navy-600: #2a4d77;
  --navy-500: #36608f;
  --navy-400: #5b80a6;
  --navy-300: #93aac3;
  --navy-200: #c6d3e0;
  --navy-100: #e6ecf3;
  --navy-50:  #f1f5f9;

  /* ---------- BRAND: TEAL (active / paid / organized) ---------- */
  --teal-800: #0f5d46;
  --teal-700: #15795c;
  --teal-600: #1a8e6b;
  --teal-500: #1e9e7a;   /* ACCENT */
  --teal-400: #34b793;
  --teal-300: #7fd3bb;
  --teal-200: #b3e6d6;
  --teal-100: #d6f1e8;
  --teal-50:  #ecf8f3;

  /* ---------- AMBER (reminders / due soon) ---------- */
  --amber-700: #a9690f;
  --amber-600: #c47d1a;
  --amber-500: #e0972b;
  --amber-400: #f0b454;
  --amber-200: #f7dca6;
  --amber-100: #fbeccd;
  --amber-50:  #fdf6e8;

  /* ---------- RED (arrears / issues — restrained) ---------- */
  --red-700: #a83a31;
  --red-600: #c0453b;
  --red-500: #d2564b;
  --red-400: #e07a70;
  --red-200: #f1c4bf;
  --red-100: #f8dcd8;
  --red-50:  #fcefed;

  /* ---------- BLUE (information / communication) ---------- */
  --blue-700: #275f95;
  --blue-600: #2f6fad;
  --blue-500: #3b82c4;
  --blue-300: #94c0e6;
  --blue-100: #dbeafa;
  --blue-50:  #eef5fc;

  /* ---------- NEUTRALS (warm grey) ---------- */
  --n-0:   #ffffff;
  --n-25:  #faf9f6;
  --n-50:  #f5f4f0;
  --n-100: #eceae3;
  --n-200: #dddacf;
  --n-300: #c6c2b6;
  --n-400: #9b978b;
  --n-500: #6f6c62;
  --n-600: #524f47;
  --n-700: #3a3833;
  --n-800: #26241f;
  --n-900: #16140f;

  /* ---------- SEMANTIC ---------- */
  --primary:        var(--navy-700);
  --primary-hover:  var(--navy-800);
  --primary-soft:   var(--navy-100);
  --accent:         var(--teal-500);
  --accent-hover:   var(--teal-600);

  --bg:             #f8f7f4;   /* warm off-white page */
  --bg-alt:         #f2f1ec;   /* alternating section */
  --bg-navy:        var(--navy-800);
  --surface:        #ffffff;
  --surface-2:      #fbfaf7;

  --text-strong:    #16202b;
  --text:           #2d3a48;
  --text-muted:     #5e6b7a;
  --text-subtle:    #8794a3;
  --text-on-navy:   #eaf0f6;
  --text-on-navy-muted: #a9bdd2;

  --border:         #e8e5dd;
  --border-strong:  #d7d3c8;
  --border-navy:    rgba(255,255,255,0.12);

  /* ---------- STATUS: PAYMENTS ---------- */
  --pay-paid-bg:    var(--teal-50);   --pay-paid-fg:    var(--teal-700);  --pay-paid-dot:    var(--teal-500);
  --pay-due-bg:     var(--blue-50);   --pay-due-fg:     var(--blue-700);  --pay-due-dot:     var(--blue-500);
  --pay-late-bg:    var(--red-50);    --pay-late-fg:    var(--red-700);   --pay-late-dot:    var(--red-500);
  --pay-partial-bg: var(--amber-50);  --pay-partial-fg: var(--amber-700); --pay-partial-dot: var(--amber-500);
  --pay-void-bg:    var(--n-100);     --pay-void-fg:    var(--n-500);     --pay-void-dot:    var(--n-400);

  /* ---------- STATUS: UNITS ---------- */
  --unit-free-bg:   var(--blue-50);   --unit-free-fg:   var(--blue-700);
  --unit-rented-bg: var(--teal-50);   --unit-rented-fg: var(--teal-700);
  --unit-resv-bg:   var(--navy-100);  --unit-resv-fg:   var(--navy-700);
  --unit-renov-bg:  var(--amber-50);  --unit-renov-fg:  var(--amber-700);
  --unit-na-bg:     var(--n-100);     --unit-na-fg:     var(--n-500);

  /* ---------- STATUS: LEASES ---------- */
  --lease-active-bg: var(--teal-50);  --lease-active-fg: var(--teal-700);
  --lease-ending-bg: var(--amber-50); --lease-ending-fg: var(--amber-700);
  --lease-ended-bg:  var(--n-100);    --lease-ended-fg:  var(--n-500);
  --lease-sign-bg:   var(--blue-50);  --lease-sign-fg:   var(--blue-700);
  --lease-term-bg:   var(--red-50);   --lease-term-fg:   var(--red-700);

  /* ---------- STATUS: ISSUES ---------- */
  --issue-new-bg:    var(--blue-50);  --issue-new-fg:    var(--blue-700);
  --issue-acc-bg:    var(--navy-100); --issue-acc-fg:    var(--navy-700);
  --issue-prog-bg:   var(--amber-50); --issue-prog-fg:   var(--amber-700);
  --issue-wait-bg:   var(--n-100);    --issue-wait-fg:   var(--n-600);
  --issue-done-bg:   var(--teal-50);  --issue-done-fg:   var(--teal-700);

  /* ---------- CHART PALETTE ---------- */
  --chart-1: #1f3a5f;
  --chart-2: #1e9e7a;
  --chart-3: #e0972b;
  --chart-4: #3b82c4;
  --chart-5: #8a6bbf;
  --chart-6: #d2564b;

  /* ---------- TYPOGRAPHY ---------- */
  --font-head: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 1.6rem + 3.4vw, 4rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h4:      1.18rem;
  --fs-lg:      1.075rem;
  --fs-base:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-2xs:     0.72rem;

  --lh-tight:   1.12;
  --lh-snug:    1.28;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- RADIUS ---------- */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
  --r-xl: 22px; --r-2xl: 28px; --r-full: 999px;

  /* ---------- SHADOWS (soft, warm-tinted) ---------- */
  --sh-xs:  0 1px 2px rgba(31,58,95,0.06);
  --sh-sm:  0 1px 3px rgba(31,58,95,0.07), 0 1px 2px rgba(31,58,95,0.04);
  --sh-md:  0 4px 14px rgba(31,58,95,0.08), 0 2px 4px rgba(31,58,95,0.04);
  --sh-lg:  0 14px 34px rgba(31,58,95,0.12), 0 4px 10px rgba(31,58,95,0.05);
  --sh-xl:  0 30px 64px rgba(20,39,63,0.18), 0 10px 24px rgba(20,39,63,0.08);
  --sh-ring: 0 0 0 4px rgba(31,58,95,0.12);
  --sh-ring-teal: 0 0 0 4px rgba(30,158,122,0.16);

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 72px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}