/* ============================================================
   Santirma Property Solutions — Colors & Type
   Source: Official Santirma Brand Guidelines (Nov 2025)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

/* Montserrat — self-hosted variable fonts (user-supplied) */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('./fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('./fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLOR PALETTE ---------- */
  --color-midnight-navy: #0D1321;   /* Primary dark / headers / footer */
  --color-prestige-gold: #D4AF37;   /* Accent / icons / hover states */
  --color-warm-taupe:    #B8A98C;   /* Supporting neutral surfaces */
  --color-stone:         #E6E2DB;   /* Light UI backgrounds */
  --color-cloud-white:   #F7F7F7;   /* Main whitespace / canvas */

  /* Tonal extensions (derived; use sparingly) */
  --color-navy-soft:   #111827;     /* Slightly lifted navy — used in gradients */
  --color-navy-line:   #1F2940;     /* Dividers / hairlines on navy */
  --color-gold-light:  #F0D87A;     /* Premium gradient terminus */
  --color-gold-deep:   #B89028;     /* Pressed gold state */
  --color-taupe-soft:  #D8CDB6;     /* Lifted taupe surface */
  --color-stone-deep:  #CFC9BE;     /* Stone border / divider */
  --color-ink:         #0D1321;     /* Body text on light */
  --color-ink-muted:   #4A5365;     /* Secondary text on light */
  --color-ink-soft:    #707888;     /* Captions on light */
  --color-cloud-soft:  #FFFFFF;     /* True white for contrast moments */

  /* Semantic foreground / background tokens (light mode default) */
  --bg-page:        var(--color-cloud-white);
  --bg-surface:     var(--color-cloud-soft);
  --bg-elevated:    var(--color-cloud-soft);
  --bg-muted:       var(--color-stone);
  --bg-inverse:     var(--color-midnight-navy);

  --fg-default:     var(--color-midnight-navy);
  --fg-muted:       var(--color-ink-muted);
  --fg-soft:        var(--color-ink-soft);
  --fg-inverse:     var(--color-cloud-white);
  --fg-accent:      var(--color-prestige-gold);

  --border-default: var(--color-stone-deep);
  --border-strong:  var(--color-midnight-navy);
  --border-accent:  var(--color-prestige-gold);

  /* Semantic state colors (derived to fit the navy/gold palette) */
  --color-success:  #2F7D5B;
  --color-warning:  #C28A1B;
  --color-danger:   #B23A3A;
  --color-info:     #2C4A7A;

  /* ---------- GRADIENTS ---------- */
  --gradient-premium-dark: linear-gradient(135deg, #0D1321 0%, #111827 100%);
  --gradient-luxury-gold:  linear-gradient(135deg, #D4AF37 0%, #F0D87A 100%);
  --gradient-stone-fade:   linear-gradient(180deg, #F7F7F7 0%, #E6E2DB 100%);
  --gradient-dark-overlay: linear-gradient(180deg, rgba(13,19,33,0) 0%, rgba(13,19,33,0.75) 100%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — desktop */
  --fs-hero:      72px;
  --fs-h1:        56px;
  --fs-h2:        42px;
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-caption:   13px;
  --fs-button:    15px;
  --fs-overline:  12px;

  /* Line heights */
  --lh-hero:    1.1;
  --lh-h1:      1.15;
  --lh-h2:      1.2;
  --lh-h3:      1.3;
  --lh-body:    1.6;
  --lh-body-lg: 1.7;
  --lh-caption: 1.5;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Letter spacing — Montserrat caps use generous tracking (per brand image) */
  --tracking-tight:    -0.01em;
  --tracking-normal:   0em;
  --tracking-loose:    0.08em;   /* Overlines, small caps */
  --tracking-luxury:   0.22em;   /* "PROPERTY SOLUTIONS" descriptor */

  /* ---------- SPACING (8pt rhythm) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;  /* desktop section padding */

  /* ---------- LAYOUT ---------- */
  --layout-max:     1440px;
  --layout-content: 1280px;
  --layout-gutter:  24px;
  --layout-pad-d:   120px;  /* desktop */
  --layout-pad-t:   80px;   /* tablet */
  --layout-pad-m:   56px;   /* mobile */

  /* ---------- RADII ---------- */
  --radius-xs:     6px;
  --radius-sm:     10px;   /* inputs */
  --radius-md:     12px;   /* buttons */
  --radius-lg:     20px;   /* cards */
  --radius-xl:     24px;   /* modals, image containers */
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---------- SHADOWS ---------- */
  --shadow-soft:     0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 20px 60px rgba(13, 19, 33, 0.12);
  --shadow-hover:    0 24px 64px rgba(13, 19, 33, 0.18);
  --shadow-inset:    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-focus:    0 0 0 3px rgba(212, 175, 55, 0.35);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-luxury:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   180ms;
  --dur-base:   240ms;
  --dur-slow:   320ms;
  --dur-luxury: 480ms;
}

/* ---------- DARK MODE ---------- */
[data-theme="dark"], .theme-dark {
  --bg-page:     var(--color-midnight-navy);
  --bg-surface:  #131A2B;
  --bg-elevated: #1A2238;
  --bg-muted:    #1F2940;
  --bg-inverse:  var(--color-cloud-white);

  --fg-default:  var(--color-cloud-white);
  --fg-muted:    #C7CCD8;
  --fg-soft:     #8E96A8;
  --fg-inverse:  var(--color-midnight-navy);

  --border-default: #283354;
  --border-strong:  var(--color-prestige-gold);

  --shadow-soft:     0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.santirma-base, body.santirma {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.s-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}
.s-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-tight);
}
.s-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.s-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.s-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h3);
}
.s-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}
.s-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.s-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-soft);
}
.s-overline {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-luxury);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.s-button-text {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
}
.s-descriptor {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-luxury);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Mobile sizes */
@media (max-width: 767px) {
  :root {
    --fs-hero: 42px;
    --fs-h1:   36px;
    --fs-h2:   30px;
    --fs-h3:   24px;
    --fs-h4:   20px;
    --fs-body-lg: 16px;
    --fs-body: 15px;
    --fs-caption: 12px;
  }
}