/* Self-contained build for Netlify deploy — generated from styles.css + tokens/ + fonts/.
   Source of truth lives at the project root; re-run the deploy build after token/font changes. */

/* ===== fonts/fonts.css ===== */
/* ============================================================
   MARKSHOMELIVING — WEBFONTS
   Archivo (sans display/body) + Cormorant Garamond (serif accents)
   Served from Google Fonts CDN. No local binaries provided yet —
   substitute with brand-licensed fonts if available.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   MARKSHOMELIVING — COLOR TOKENS
   Deep navy + luxury gold + accent red on warm white.
   ============================================================ */
:root {
  /* ---- Base palette ---- */
  --navy-950: #060F22;
  --navy-900: #081A3A;
  --navy-800: #0C2350;
  --navy-700: #0F2B5B;   /* brand navy */
  --navy-600: #1A3A72;
  --navy-500: #2A4D8C;
  --navy-100: #E4E9F2;

  --gold-600: #B8962C;
  --gold-500: #D4AF37;   /* luxury gold */
  --gold-400: #E2C56A;
  --gold-200: #F2E4B8;
  --gold-100: #FAF4DF;

  --red-600: #9C2C2C;
  --red-500: #B93737;    /* accent red */
  --red-100: #F6E4E4;

  --white-warm: #FAFAF8;
  --gray-soft: #F2F3F5;
  --gray-line: #E5E6E9;
  --gray-mid: #9AA0A8;
  --ink-600: #4A5160;
  --charcoal: #111111;

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--white-warm);
  --surface-raised: #FFFFFF;
  --surface-soft: var(--gray-soft);
  --surface-dark: var(--navy-900);
  --surface-cinematic: var(--navy-950);
  --surface-charcoal: var(--charcoal);

  /* ---- Semantic: text ---- */
  --text-display: var(--charcoal);
  --text-body: var(--ink-600);
  --text-muted: var(--gray-mid);
  --text-inverse: var(--white-warm);
  --text-inverse-muted: rgba(250, 250, 248, 0.56);
  --text-navy: var(--navy-700);

  /* ---- Semantic: accents ---- */
  --accent-gold: var(--gold-500);
  --accent-gold-deep: var(--gold-600);
  --accent-red: var(--red-500);
  --accent-navy: var(--navy-700);

  /* ---- Lines & borders ---- */
  --line-subtle: var(--gray-line);
  --line-on-dark: rgba(250, 250, 248, 0.12);
  --line-gold: rgba(212, 175, 55, 0.45);

  /* ---- Glass (light + dark contexts) ---- */
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-bg-dark: rgba(8, 26, 58, 0.55);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-border-dark: rgba(250, 250, 248, 0.14);

  /* ---- Overlays / protection ---- */
  --scrim-photo: linear-gradient(180deg, rgba(6, 15, 34, 0.20) 0%, rgba(6, 15, 34, 0.05) 40%, rgba(6, 15, 34, 0.72) 100%); /* @kind other */
  --scrim-bottom: linear-gradient(180deg, transparent 40%, rgba(6, 15, 34, 0.85) 100%); /* @kind other */
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   MARKSHOMELIVING — TYPOGRAPHY TOKENS
   Archivo (bold modern sans) + Cormorant Garamond (serif accents)
   Oversized editorial scale, tight tracking on display sizes.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* ---- Display scale (editorial, oversized) ---- */
  --type-display-hero: clamp(64px, 11vw, 176px);   /* MARK-scale wordmarks */
  --type-display-xl: clamp(48px, 7.5vw, 112px);    /* section heroes */
  --type-display-lg: clamp(36px, 5vw, 72px);       /* section titles */
  --type-display-md: clamp(28px, 3.2vw, 44px);     /* sub-sections */
  --type-stat: clamp(48px, 6vw, 96px);             /* oversized numerals */

  /* ---- Text scale ---- */
  --type-lead: 22px;
  --type-body: 17px;
  --type-small: 15px;
  --type-caption: 13px;
  --type-eyebrow: 12px;

  /* ---- Weights ---- */
  --weight-display: 700;
  --weight-display-heavy: 800;
  --weight-medium: 500;
  --weight-body: 400;

  /* ---- Tracking ---- */
  --tracking-display: -0.035em;  /* tight, luxury-fashion */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.22em;    /* uppercase labels */
  --tracking-wide: 0.12em;

  /* ---- Leading ---- */
  --leading-display: 0.94;
  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-body: 1.65;

  /* ---- Serif accent (italic emphasis inside headlines) ---- */
  --serif-accent-style: italic; /* @kind font */
  --serif-accent-weight: 500; /* @kind font */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   MARKSHOMELIVING — SPACING, RADII & LAYOUT TOKENS
   Immense white space; rounded corners 24–40px.
   ============================================================ */
:root {
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---- Section rhythm (immense white space) ---- */
  --section-pad-y: clamp(96px, 12vw, 180px);
  --section-pad-x: clamp(24px, 6vw, 96px);
  --content-max: 1320px;
  --content-narrow: 760px;

  /* ---- Radii (24–40px system) ---- */
  --radius-card: 28px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --radius-media: 24px;
  --radius-control: 16px;
  --radius-pill: 999px;

  /* ---- Z layers ---- */
  --z-nav: 100; /* @kind other */
  --z-float: 50; /* @kind other */
  --z-overlay: 200; /* @kind other */
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   MARKSHOMELIVING — EFFECTS TOKENS
   Premium layered shadows, soft glass, luxe easing.
   ============================================================ */
:root {
  /* ---- Shadows (soft, expensive, never harsh) ---- */
  --shadow-soft:
    0 1px 2px rgba(8, 26, 58, 0.04),
    0 8px 24px rgba(8, 26, 58, 0.06);
  --shadow-card:
    0 2px 4px rgba(8, 26, 58, 0.05),
    0 16px 48px rgba(8, 26, 58, 0.10);
  --shadow-float:
    0 4px 12px rgba(8, 26, 58, 0.08),
    0 32px 80px rgba(8, 26, 58, 0.18);
  --shadow-dark:
    0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-gold-glow:
    0 0 0 1px var(--line-gold),
    0 12px 40px rgba(212, 175, 55, 0.18);

  /* ---- Glassmorphism ---- */
  --glass-blur: blur(20px) saturate(1.4); /* @kind other */
  --glass-blur-heavy: blur(32px) saturate(1.5); /* @kind other */

  /* ---- Motion ---- */
  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 0.25s; /* @kind other */
  --dur-base: 0.5s; /* @kind other */
  --dur-slow: 0.9s; /* @kind other */
  --dur-reveal: 1.2s; /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   MARKSHOMELIVING — BASE STYLES
   Resets + global element styling on top of tokens.
   ============================================================ */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-display);
  font-family: var(--font-sans);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

::selection {
  background: var(--gold-200);
  color: var(--charcoal);
}

/* Serif accent — italic emphasis inside display headlines */
.serif-accent, em.luxe {
  font-family: var(--font-serif);
  font-style: var(--serif-accent-style);
  font-weight: var(--serif-accent-weight);
  letter-spacing: -0.01em;
}

/* Eyebrow — uppercase micro-label that opens every section */
.eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}