/* =============================================================
   Rentora Design System — Foundations
   Colors + Type tokens for a mobile-first Indian landlord ledger.
   ============================================================= */

/* ---------- FONTS ---------- */
/* Default pairing: Plus Jakarta Sans + Instrument Serif (Rentora design system).  */
/* Alternate pairings exposed via the "Font pairing" tweak swap --font-sans /        */
/* --font-serif at runtime; this @import preloads every candidate face once.        */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&family=Tiro+Devanagari+Hindi:ital@0;1&display=swap');

:root {
  /* =========================================================
     COLOR — Raw palette
     ========================================================= */

  /* Paper / Ink — warm neutrals (ledger paper aesthetic) */
  --paper-50:  #FBF8F3;  /* app background — warm cream  */
  --paper-100: #F4EEE4;  /* surface lift                 */
  --paper-200: #EAE1D1;  /* divider / hairline           */
  --paper-300: #D8CBB3;
  --paper-400: #B6A486;
  --paper-500: #8A7859;
  --paper-600: #5E5039;
  --paper-700: #3D3322;
  --paper-800: #251E10;
  --paper-900: #141008;  /* deepest ink                  */

  /* Cyan — primary brand accent (#00A6C8) */
  --rust-50:  #F0FBFD;
  --rust-100: #D4F3F8;
  --rust-200: #A8E5EF;
  --rust-300: #6FD1E2;
  --rust-400: #30BCD5;
  --rust-500: #00A6C8;  /* BRAND PRIMARY                */
  --rust-600: #0088A6;
  --rust-700: #006B83;
  --rust-800: #004F61;
  --rust-900: #00333F;

  /* Mint — positive money (collected / paid / confirmed) */
  --mint-50:  #EEF7EE;
  --mint-100: #D3EBD4;
  --mint-200: #A6D6A8;
  --mint-300: #6FBC75;
  --mint-400: #3E9D4C;
  --mint-500: #267A33;   /* primary success */
  --mint-600: #1C5E27;
  --mint-700: #14421C;

  /* Amber — warning / overdue / pending verification */
  --amber-50:  #FDF4DF;
  --amber-100: #F9E5AE;
  --amber-200: #F3CF73;
  --amber-300: #E8B23C;
  --amber-400: #CE931A;   /* primary warning */
  --amber-500: #A4720E;
  --amber-600: #755008;

  /* Maroon — errors / overdue-severe / rejected */
  --maroon-50:  #FCEDEB;
  --maroon-100: #F5C9C3;
  --maroon-200: #E89A8F;
  --maroon-300: #D66557;
  --maroon-400: #B33A2C;   /* primary danger */
  --maroon-500: #8A2619;
  --maroon-600: #5F180F;

  /* Indigo — info / links / neutral-action secondary accent */
  --indigo-50:  #ECEEFB;
  --indigo-100: #C9CDF3;
  --indigo-200: #8F96E3;
  --indigo-300: #5A63CE;
  --indigo-400: #3B44B0;
  --indigo-500: #272F88;

  /* Mustard — accent highlight, tags, subtle callouts */
  --mustard-100: #F6E8B5;
  --mustard-300: #D9B13A;
  --mustard-500: #9B7C19;

  /* =========================================================
     COLOR — Semantic tokens
     ========================================================= */

  /* Surfaces */
  --bg:            var(--paper-50);         /* app background */
  --bg-raised:    #FFFFFF;                  /* card on paper */
  --bg-sunken:     var(--paper-100);        /* inset fields, code blocks */
  --bg-inverse:    var(--paper-900);        /* dark sections, modals */

  /* Foreground (ink) */
  --fg-1: var(--paper-900);   /* headings, primary numbers */
  --fg-2: var(--paper-700);   /* body, labels             */
  --fg-3: var(--paper-500);   /* meta, captions           */
  --fg-4: var(--paper-400);   /* placeholder              */
  --fg-on-brand:   #FFFFFF;
  --fg-on-inverse: var(--paper-100);

  /* Lines */
  --line:         var(--paper-200);
  --line-strong:  var(--paper-300);
  --line-ink:     var(--paper-900);  /* hand-drawn ledger line */

  /* Brand */
  --brand:         var(--rust-500);
  --brand-hover:   var(--rust-600);
  --brand-press:   var(--rust-700);
  --brand-soft:    var(--rust-100);
  --brand-ink:     var(--rust-800);

  /* Money semantics */
  --money-in:      var(--mint-500);   /* rent collected, confirmed     */
  --money-in-soft: var(--mint-100);
  --money-out:     var(--maroon-400); /* refund, outgoing cash         */
  --money-out-soft:var(--maroon-100);
  --money-due:     var(--amber-400);  /* pending / overdue             */
  --money-due-soft:var(--amber-100);
  --money-neutral: var(--paper-700);  /* generic numeric / totals      */

  /* Status dots */
  --status-active:   var(--mint-500);
  --status-notice:   var(--amber-400);
  --status-vacant:   var(--paper-400);
  --status-overdue:  var(--maroon-400);
  --status-pending:  var(--indigo-400);

  /* =========================================================
     TYPE — Families
     ========================================================= */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-deva:    'Tiro Devanagari Hindi', 'Noto Sans Devanagari', serif;
  --font-num:     'Plus Jakarta Sans', system-ui, sans-serif; /* tabular nums enabled via font-variant */

  /* Display serif weight — some serifs need 500–600 to read well at hero scale, others ship best at 400. */
  --serif-display-weight: 400;
}

/* ---------- FONT PAIRING THEMES ---------- */
/* Toggled by the "Font pairing" tweak via [data-font-pairing] on <html>. */
[data-font-pairing="rentora"] {
  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-num:   'Plus Jakarta Sans', system-ui, sans-serif;
  --serif-display-weight: 400;
}
[data-font-pairing="editorial"] {
  --font-sans:  'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-num:   'Inter Tight', system-ui, sans-serif;
  --serif-display-weight: 500;
}
[data-font-pairing="classic"] {
  --font-sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-num:   'Manrope', system-ui, sans-serif;
  --serif-display-weight: 600;
}
[data-font-pairing="institutional"] {
  --font-sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-num:   'DM Sans', system-ui, sans-serif;
  --serif-display-weight: 500;
}
[data-font-pairing="luxe"] {
  --font-sans:  'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-num:   'Inter Tight', system-ui, sans-serif;
  --serif-display-weight: 500;
}
[data-font-pairing="heritage"] {
  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Libre Caslon Text', 'Iowan Old Style', Georgia, serif;
  --font-num:   'Plus Jakarta Sans', system-ui, sans-serif;
  --serif-display-weight: 400;
}

:root {
  /* =========================================================
     TYPE — Scale (mobile-first, 16px base)
     ========================================================= */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-md:   15px;   /* body default — slightly smaller than web for mobile density */
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  52px;
  --text-6xl:  72px;   /* hero numbers (₹) */

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-allcaps: 0.08em;

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;   /* default card padding on mobile */
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;

  /* =========================================================
     RADIUS
     ========================================================= */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;    /* default card radius */
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* =========================================================
     SHADOWS — soft, paper-like, not glassy
     ========================================================= */
  --shadow-xs: 0 1px 0 rgba(37, 30, 16, 0.04), 0 1px 2px rgba(37, 30, 16, 0.04);
  --shadow-sm: 0 1px 0 rgba(37, 30, 16, 0.03), 0 2px 6px rgba(37, 30, 16, 0.05);
  --shadow-md: 0 2px 4px rgba(37, 30, 16, 0.04), 0 8px 18px -6px rgba(37, 30, 16, 0.10);
  --shadow-lg: 0 8px 16px -8px rgba(37, 30, 16, 0.10), 0 24px 40px -16px rgba(37, 30, 16, 0.16);
  --shadow-focus: 0 0 0 3px rgba(201, 88, 36, 0.22);
  --shadow-inset: inset 0 1px 2px rgba(37, 30, 16, 0.08);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   ============================================================= */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

.h-display {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--serif-display-weight, 400);
  color: var(--fg-1);
}
.h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.body {
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: 400;
}
.body-lg {
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.body-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.meta {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-allcaps);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Numeric — always tabular, works for ₹ amounts and ledger lines */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: var(--tracking-tight);
}
.num-display {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  font-size: var(--text-4xl);
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.num-hero {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 800;
  font-size: var(--text-6xl);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg-1);
}
.code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* Devanagari helper — same size but adjusted line height */
.deva {
  font-family: var(--font-deva);
  line-height: 1.5;
}

/* Utility colors */
.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.fg-brand { color: var(--brand); }
.fg-in { color: var(--money-in); }
.fg-out { color: var(--money-out); }
.fg-due { color: var(--money-due); }