/* ============================================================
   OM HOMES REALTY — Colors & Type
   Single source of truth for brand tokens.
   ============================================================ */

/* ---- FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ============ BRAND CORE ============ */
  /* The signature triad: Black, White, Brand Red. Used in this order of dominance. */
  --om-black:        #0A0A0A;   /* Primary brand surface (logo background) */
  --om-white:        #FFFFFF;   /* Primary content surface */
  --om-red:          #EC1D24;   /* Signature accent — the red of the wordmark + bindu */

  /* ============ EXTENDED RED SCALE ============ */
  --om-red-50:       #FFF1F1;   /* Wash — for tags, soft backgrounds */
  --om-red-100:      #FFDBDC;
  --om-red-200:      #FFB3B6;
  --om-red-300:      #FF8388;
  --om-red-400:      #F84B53;
  --om-red-500:      #EC1D24;   /* === Brand red === */
  --om-red-600:      #C9151B;   /* Hover */
  --om-red-700:      #A11014;   /* Pressed */
  --om-red-800:      #7A0B0F;
  --om-red-900:      #5A080B;

  /* ============ NEUTRAL / INK SCALE ============ */
  /* Warm-cool neutral. Slightly warm on the lights to play well with red + cream interiors. */
  --om-ink-950:      #0A0A0A;   /* Same as om-black */
  --om-ink-900:      #141414;
  --om-ink-800:      #1F1F1F;
  --om-ink-700:      #2E2E2E;
  --om-ink-600:      #4A4A4A;
  --om-ink-500:      #6B6B6B;   /* Body text on white */
  --om-ink-400:      #8E8E8E;   /* Secondary text */
  --om-ink-300:      #B5B5B5;   /* Disabled / hairlines on dark */
  --om-ink-200:      #DCDCDC;   /* Hairlines */
  --om-ink-150:      #E8E8E8;
  --om-ink-100:      #F2F2F2;   /* Subtle fills */
  --om-ink-50:       #F8F8F8;   /* Page tints */

  /* ============ WARM PAPER ============ */
  /* Editorial cream tones — for premium long-form layouts (agent bios, listing detail, print). */
  --om-cream-50:     #FBF8F3;   /* Page surface alt */
  --om-cream-100:    #F5F0E6;   /* Card surface */
  --om-cream-200:    #EBE3D2;
  --om-cream-300:    #D9CCB0;
  --om-cream-700:    #6B5B3E;   /* Text on cream */

  /* ============ STATUS / SEMANTIC ============ */
  /* Used for listing states + form validation. Pulled close to brand red where possible. */
  --om-success:      #1E8E5A;   /* "Available", positive numbers */
  --om-success-bg:   #E5F3EC;
  --om-warning:      #C57A00;   /* "Pending", "Coming soon" */
  --om-warning-bg:   #FBF1DE;
  --om-danger:       #EC1D24;   /* "Sold", critical errors — uses brand red */
  --om-danger-bg:    #FFF1F1;
  --om-info:         #1E5FAE;
  --om-info-bg:      #E6EEF8;

  /* ============ SEMANTIC SURFACES ============ */
  --bg-page:         var(--om-white);
  --bg-page-alt:     var(--om-cream-50);
  --bg-elevated:     var(--om-white);
  --bg-inverse:      var(--om-black);
  --bg-subtle:       var(--om-ink-50);
  --bg-muted:        var(--om-ink-100);

  --fg-primary:      var(--om-ink-950);     /* Default text */
  --fg-secondary:    var(--om-ink-500);
  --fg-tertiary:     var(--om-ink-400);
  --fg-on-dark:      var(--om-white);
  --fg-on-red:       var(--om-white);
  --fg-accent:       var(--om-red-500);

  --border-default:  var(--om-ink-200);
  --border-strong:   var(--om-ink-300);
  --border-on-dark:  rgba(255,255,255,0.14);
  --hairline:        var(--om-ink-150);

  /* ============ TYPOGRAPHY ============ */
  /* Display = Montserrat — chosen because it matches the heavy geometric proportions of the
     OM | HOMES | REALTY wordmark exactly. Use 800/900 weights for headlines.
     Body = Manrope — modern, generous x-height, reads well in long listing copy. */
  --font-display:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:       'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — modular, loosely 1.25 ratio with custom display sizes */
  --fs-eyebrow:      0.6875rem;  /* 11px — uppercase tags */
  --fs-caption:      0.75rem;    /* 12px */
  --fs-small:        0.875rem;   /* 14px */
  --fs-body:         1rem;       /* 16px */
  --fs-body-lg:      1.125rem;   /* 18px — listing descriptions */
  --fs-h6:           1.125rem;   /* 18px */
  --fs-h5:           1.25rem;    /* 20px */
  --fs-h4:           1.5rem;     /* 24px */
  --fs-h3:           2rem;       /* 32px */
  --fs-h2:           2.75rem;    /* 44px */
  --fs-h1:           4rem;       /* 64px */
  --fs-display:      6rem;       /* 96px — hero only */

  /* Weights */
  --fw-light:        300;        /* @kind font */
  --fw-regular:      400;        /* @kind font */
  --fw-medium:       500;        /* @kind font */
  --fw-semibold:     600;        /* @kind font */
  --fw-bold:         700;        /* @kind font */
  --fw-extrabold:    800;        /* @kind font */
  --fw-black:        900;        /* @kind font */ /* Wordmark weight — use sparingly for impact */

  /* Line heights */
  --lh-tight:        1.05;       /* @kind font */ /* Display */
  --lh-snug:         1.2;        /* @kind font */ /* Headings */
  --lh-normal:       1.5;        /* @kind font */ /* Body */
  --lh-relaxed:      1.65;       /* @kind font */ /* Long form */

  /* Letter spacing — display uses tracked-tight to match the wordmark */
  --ls-tighter:      -0.02em;    /* @kind font */
  --ls-tight:        -0.01em;    /* @kind font */
  --ls-normal:       0;          /* @kind font */
  --ls-wide:         0.05em;     /* @kind font */
  --ls-wider:        0.12em;     /* @kind font */ /* Eyebrow / uppercase labels */
  --ls-widest:       0.18em;     /* @kind font */

  /* ============ SPACING ============ */
  --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-32:        128px;

  /* ============ RADII ============ */
  /* Real estate brand: restrained corners. The logo's house is sharp; buttons echo that. */
  --radius-none:     0;
  --radius-xs:       2px;
  --radius-sm:       4px;
  --radius-md:       6px;        /* Default for buttons + inputs */
  --radius-lg:       10px;
  --radius-xl:       16px;       /* Cards */
  --radius-2xl:      24px;
  --radius-pill:     999px;

  /* ============ SHADOWS ============ */
  /* Soft, slightly warm. Real-estate photography looks better against gentle elevation. */
  --shadow-xs:       0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-sm:       0 2px 6px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10,10,10,0.04);
  --shadow-md:       0 6px 16px rgba(10, 10, 10, 0.08), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-lg:       0 16px 32px rgba(10, 10, 10, 0.10), 0 4px 8px rgba(10,10,10,0.04);
  --shadow-xl:       0 28px 56px rgba(10, 10, 10, 0.14), 0 8px 16px rgba(10,10,10,0.06);
  --shadow-red:      0 12px 32px rgba(236, 29, 36, 0.28); /* For CTAs that need to pop */
  --shadow-inset:    inset 0 1px 2px rgba(10, 10, 10, 0.06);

  /* ============ MOTION ============ */
  --ease-standard:   cubic-bezier(0.2, 0.6, 0.2, 1);    /* @kind other */
  --ease-emphasis:   cubic-bezier(0.16, 0.84, 0.24, 1); /* @kind other */ /* For hero, CTAs */
  --ease-entrance:   cubic-bezier(0.0, 0.0, 0.2, 1);    /* @kind other */
  --ease-exit:       cubic-bezier(0.4, 0.0, 1.0, 1.0);  /* @kind other */
  --dur-instant:     100ms;     /* @kind other */
  --dur-fast:        180ms;     /* @kind other */ /* Hover, press */
  --dur-normal:      280ms;     /* @kind other */ /* Default UI transitions */
  --dur-slow:        500ms;     /* @kind other */ /* Modals, page elements */
  --dur-cinematic:   900ms;     /* @kind other */ /* Hero reveals */

  /* ============ LAYOUT ============ */
  --container-narrow: 720px;    /* @kind spacing */
  --container-default: 1200px;  /* @kind spacing */
  --container-wide:   1440px;   /* @kind spacing */
  --container-bleed:  1680px;   /* @kind spacing */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Drop-in defaults for raw HTML when no class is set.
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-primary); background: var(--bg-page); }
body { font-size: var(--fs-body); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-primary);
  margin: 0;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tighter); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-semibold); }

p { margin: 0 0 1em; line-height: var(--lh-relaxed); color: var(--fg-secondary); }
strong, b { font-weight: var(--fw-semibold); color: var(--fg-primary); }
small { font-size: var(--fs-small); color: var(--fg-secondary); }

a { color: var(--om-red-500); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--om-red-600); text-decoration: underline; text-underline-offset: 3px; }

/* Eyebrow / kicker — heavily used in real-estate marketing */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--om-red-500);
}

/* Display — for hero headlines that should feel architectural */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  text-transform: uppercase;
}

/* Numerals for prices — tabular alignment */
.price, .stat {
  font-family: var(--font-display);
  font-feature-settings: "tnum", "lnum";
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
}

code, pre { font-family: var(--font-mono); font-size: 0.9em; }