/* Nirmal Homes — bundled design tokens (flattened for standalone hosting).
 * Combines fonts + colors + typography + spacing + radius + elevation.
 * Do not add "../" paths here — this file must work sitting flat with the HTML. */

/* Nirmal Homes — Fonts.
 * Cormorant Garamond (display serif) + Montserrat (body sans). Google Fonts.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Nirmal Homes — Color tokens
 * Luxury real-estate advisory palette: warm cream canvas, deep charcoal ink,
 * a single restrained gold accent. Photography-forward; near-black overlays.
 */
:root {
  /* ---- Brand (teal accent) ---- */
  --gold: #00b4c4;            /* primary accent: rules, CTAs, eyebrows, hover */
  --gold-deep: #008796;       /* pressed / text-on-light for AA contrast */
  --gold-soft: #5fd2de;       /* light accent for dark-surface use */
  --gold-wash: #d8f2f5;       /* faint accent tint panel */

  /* ---- Ink (text) ---- */
  --ink: #1c1c1c;             /* charcoal: headlines + body on light */
  --ink-80: #3a3a3a;          /* softer body */
  --ink-55: #6f6a62;          /* muted captions, meta, fine print */
  --ink-35: #a39d93;          /* placeholders, disabled */
  --on-dark: #ffffff;         /* text on dark surfaces */
  --on-dark-muted: #c9cccd;   /* secondary copy on dark — grey/silver */
  --on-gold: #ffffff;         /* text on accent fills */

  /* ---- Surfaces ---- */
  --cream: #ffffff;           /* page canvas (was beige) */
  --cream-deep: #f2f6fb;      /* alternating section, input fills */
  --white: #ffffff;           /* cards, raised surfaces */
  --charcoal: #00b4c4;        /* dark sections, footer (teal) */
  --charcoal-2: #06a3b2;      /* micro-step deeper teal tile */
  --black: #000000;           /* photo overlays */

  /* ---- Lines ---- */
  --hairline: #e6eaf1;        /* card / divider 1px border */
  --hairline-strong: #d3dae6; /* input border, stronger divider */
  --hairline-dark: rgba(255, 255, 255, 0.18); /* divider on dark */
  --hairline-gold: rgba(0, 180, 196, 0.4);  /* accent tinted hairline */

  /* ---- Overlays (over photography) ---- */
  --overlay-hero: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.12) 38%, rgba(0,0,0,0.62) 100%);  /* @kind other */
  --overlay-cta: linear-gradient(180deg, rgba(10,9,8,0.78) 0%, rgba(10,9,8,0.86) 100%);  /* @kind other */
  --overlay-card: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.74) 100%);  /* @kind other */

  /* ---- Semantic aliases ---- */
  --color-accent: var(--gold);
  --color-accent-pressed: var(--gold-deep);

  --text-heading: var(--ink);
  --text-body: var(--ink-80);
  --text-muted: var(--ink-55);
  --text-on-dark: var(--on-dark);
  --text-eyebrow: var(--gold-deep);
  --text-link: var(--ink);

  --surface-page: var(--cream);
  --surface-alt: var(--cream-deep);
  --surface-card: var(--white);
  --surface-dark: var(--charcoal);

  --border-card: var(--hairline);
  --border-input: var(--hairline-strong);
  --border-focus: var(--gold);

  /* ---- Status ---- */
  --status-available: #4f7a4a;
  --status-pending: #b08a3a;
  --status-sold: #a6524a;
}

/* Nirmal Homes — Typography tokens
 * Display = Cormorant Garamond (luxury editorial serif, light/regular weights, airy).
 * Body / UI = Montserrat (clean geometric sans, generous tracking on labels).
 */
:root {
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Weight ladder */
  --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 */

  /* ---- Display scale (Cormorant Garamond) ---- */
  --t-hero-size: 92px;        --t-hero-ls: -0.5px;   --t-hero-fw: 400;   /* @kind font */
  --t-hero-lh: 1.02;          /* @kind font */
  --t-display-xl-size: 64px;  --t-display-xl-ls: -0.4px; --t-display-xl-fw: 400;   /* @kind font */
  --t-display-xl-lh: 1.06;    /* @kind font */
  --t-display-lg-size: 48px;  --t-display-lg-ls: -0.2px; --t-display-lg-fw: 400;   /* @kind font */
  --t-display-lg-lh: 1.1;     /* @kind font */
  --t-display-md-size: 36px;  --t-display-md-ls: 0px;    --t-display-md-fw: 500;   /* @kind font */
  --t-display-md-lh: 1.18;    /* @kind font */
  --t-display-sm-size: 27px;  --t-display-sm-ls: 0px;    --t-display-sm-fw: 500;   /* @kind font */
  --t-display-sm-lh: 1.25;    /* @kind font */
  --t-lead-size: 22px;        --t-lead-ls: 0px;       --t-lead-fw: 300;   /* @kind font */
  --t-lead-lh: 1.6;           /* @kind font */

  /* ---- Body scale (Montserrat) ---- */
  --t-body-lg-size: 18px;     --t-body-lg-ls: 0px;     --t-body-lg-fw: 400;   /* @kind font */
  --t-body-lg-lh: 1.75;       /* @kind font */
  --t-body-size: 16px;        --t-body-ls: 0px;        --t-body-fw: 400;   /* @kind font */
  --t-body-lh: 1.75;          /* @kind font */
  --t-body-sm-size: 14px;     --t-body-sm-ls: 0px;     --t-body-sm-fw: 400;   /* @kind font */
  --t-body-sm-lh: 1.7;        /* @kind font */
  --t-caption-size: 13px;     --t-caption-ls: 0.2px;   --t-caption-fw: 400;   /* @kind font */
  --t-caption-lh: 1.5;        /* @kind font */

  /* ---- Component-level aliases (used by JSX primitives) ---- */
  --t-tagline-size: 24px;     --t-tagline-ls: 0px;    --t-tagline-fw: 500;   /* @kind font */
  --t-tagline-lh: 1.25;       /* @kind font */
  --t-body-strong-size: 16px; --t-body-strong-ls: 0px; --t-body-strong-fw: 600;   /* @kind font */
  --t-body-strong-lh: 1.5;    /* @kind font */
  --t-caption-strong-size: 13px; --t-caption-strong-ls: 0.2px; --t-caption-strong-fw: 600;   /* @kind font */
  --t-caption-strong-lh: 1.5; /* @kind font */
  --t-micro-size: 11px;       --t-micro-ls: 0.4px;    --t-micro-fw: 500;   /* @kind font */
  --t-micro-lh: 1.4;          /* @kind font */

  /* ---- Utility / labels (Montserrat, tracked uppercase) ---- */
  --t-eyebrow-size: 12px;     --t-eyebrow-ls: 3px;     --t-eyebrow-fw: 500;   /* @kind font */
  --t-eyebrow-lh: 1.4;        /* @kind font */
  --t-nav-size: 13px;         --t-nav-ls: 1.5px;       --t-nav-fw: 500;   /* @kind font */
  --t-nav-lh: 1;              /* @kind font */
  --t-button-size: 13px;      --t-button-ls: 1.8px;    --t-button-fw: 500;   /* @kind font */
  --t-button-lh: 1;           /* @kind font */
  --t-fine-size: 12px;        --t-fine-ls: 0.4px;      --t-fine-fw: 400;   /* @kind font */
  --t-fine-lh: 1.5;           /* @kind font */
}

/* Nirmal Homes — Spacing tokens. Base unit 8px; generous luxury rhythm. */
:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-section: 120px;   /* vertical padding inside a full section */

  /* Layout containers */
  --container: 1280px;       /* default content width */
  --container-text: 760px;   /* prose / editorial column */
  --container-wide: 1480px;  /* full galleries */
  --gutter: 32px;            /* grid gutter */
  --page-pad: 48px;          /* horizontal page padding (desktop) */
  --nav-height: 92px;
  --subnav-height: 56px;
}

/* Nirmal Homes — Radius tokens. Mostly square/minimal for editorial luxury;
 * small radius on inputs/cards, pill reserved for nothing (buttons are square). */
:root {
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 9999px;
}

/* Nirmal Homes — Elevation & motion tokens.
 * Restraint above all: shadows are barely-there, warm-toned. Depth comes from
 * whitespace and photography, not drop shadows. Motion is slow, eased, calm.
 */
:root {
  --shadow-none: none;
  --shadow-card: 0 18px 40px -24px rgba(28, 24, 18, 0.22);       /* resting card */
  --shadow-card-hover: 0 30px 60px -28px rgba(28, 24, 18, 0.30); /* hovered card */
  --shadow-photo: 0 40px 80px -40px rgba(28, 24, 18, 0.45);      /* hero imagery */
  --ring-focus: 0 0 0 2px var(--cream), 0 0 0 4px var(--gold);    /* focus ring */

  /* Motion — slow & elegant */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast: 200ms;   /* @kind other */
  --dur-base: 420ms;   /* @kind other */
  --dur-slow: 720ms;   /* @kind other */
  --dur-reveal: 900ms;   /* @kind other */ /* scroll-reveal entrance */
}