/* ============================================================
   Magic Home Renovation — Design Tokens
   Dark, cinematic, premium. Ferrari-grade restraint.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* --- Core palette ----------------------------------------- */
  --bg-primary:    #0A0A0A;   /* page / canvas */
  --bg-secondary:  #1C1C1E;   /* cards, panels */
  --bg-elevated:   #242427;   /* elevated surfaces, hovers */
  --bg-line:       #2A2A2C;   /* hairline dividers */

  --gold:          #C9A84C;   /* signature accent */
  --gold-bright:   #E0BC5C;   /* hover state */
  --gold-deep:     #8E7530;   /* pressed / muted gold */
  --gold-12:       rgba(201, 168, 76, 0.12);
  --gold-24:       rgba(201, 168, 76, 0.24);
  --gold-40:       rgba(201, 168, 76, 0.40);

  --text:          #F5F5F0;   /* off-white, warm */
  --text-muted:    #8A8A8E;   /* secondary copy */
  --text-faint:    #56565A;   /* tertiary, disclaimers */
  --text-inverse:  #0A0A0A;   /* on gold fills */

  /* --- Semantic --------------------------------------------- */
  --color-bg:      var(--bg-primary);
  --color-surface: var(--bg-secondary);
  --color-fg:      var(--text);
  --color-fg-2:    var(--text-muted);
  --color-fg-3:    var(--text-faint);
  --color-accent:  var(--gold);
  --color-border:  rgba(245, 245, 240, 0.08);
  --color-border-strong: rgba(245, 245, 240, 0.16);
  --color-hairline: rgba(201, 168, 76, 0.20);

  --success:       #6FA77B;
  --warning:       #D4A24A;
  --danger:        #B5524A;

  /* --- Type scale ------------------------------------------- */
  --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  /* Display & headlines (serif) */
  --display-1: 700 clamp(56px, 7vw, 104px) / 1.02 var(--font-serif);
  --display-2: 600 clamp(44px, 5.5vw, 76px) / 1.05 var(--font-serif);
  --h1:        600 clamp(40px, 4.5vw, 60px) / 1.08 var(--font-serif);
  --h2:        500 clamp(32px, 3.4vw, 44px) / 1.15 var(--font-serif);
  --h3:        500 28px / 1.25 var(--font-serif);
  --h4:        600 22px / 1.3 var(--font-sans);

  /* UI & body (sans) */
  --eyebrow:     600 12px / 1.4 var(--font-sans);   /* + tracking */
  --body-lg:     400 19px / 1.6 var(--font-sans);
  --body:        400 16px / 1.65 var(--font-sans);
  --body-sm:     400 14px / 1.55 var(--font-sans);
  --caption:     400 12px / 1.45 var(--font-sans);
  --button:      500 14px / 1 var(--font-sans);

  --tracking-eyebrow: 0.22em;
  --tracking-button:  0.16em;
  --tracking-tight:   -0.02em;

  /* --- Spacing scale (4px base) ---------------------------- */
  --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 ----------------------------------------------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* --- Shadows / elevation -------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-3: 0 20px 60px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 0 1px var(--gold-24), 0 12px 40px rgba(201,168,76,0.18);
  --inset-hairline: inset 0 1px 0 rgba(255,255,255,0.04);

  /* --- Motion --------------------------------------------- */
  --ease-cinematic: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* --- Layout --------------------------------------------- */
  --container-narrow: 880px;
  --container:        1200px;
  --container-wide:   1440px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* ============================================================
   Element defaults
   ============================================================ */
html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--h1); letter-spacing: var(--tracking-tight); margin: 0; }
h2 { font: var(--h2); letter-spacing: var(--tracking-tight); margin: 0; }
h3 { font: var(--h3); margin: 0; }
h4 { font: var(--h4); margin: 0; }

p  { font: var(--body); color: var(--color-fg); margin: 0; }
small { font: var(--caption); color: var(--color-fg-2); }

.eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

.display-1 { font: var(--display-1); letter-spacing: var(--tracking-tight); }
.display-2 { font: var(--display-2); letter-spacing: var(--tracking-tight); }

/* Gold rule — used as a section opener */
.gold-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 0;
}

/* ============================================================
   Buttons — gold border, transparent, hover = gold fill
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  font: var(--button);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-cinematic),
              color var(--dur-base) var(--ease-cinematic),
              border-color var(--dur-base) var(--ease-cinematic),
              transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
  user-select: none;
}
.btn:hover {
  background: var(--gold);
  color: var(--text-inverse);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--gold);
}

.btn--solid {
  background: var(--gold);
  color: var(--text-inverse);
}
.btn--solid:hover {
  background: var(--gold-bright);
  color: var(--text-inverse);
}

.btn--ghost {
  border-color: var(--color-border-strong);
  color: var(--text);
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.btn--sm { height: 40px; padding: 0 18px; font-size: 12px; }
.btn--lg { height: 60px; padding: 0 36px; font-size: 15px; }