/* =============================================================
   PlanurHome — Design Tokens v3
   The Home Factory Sdn. Bhd. (202501047493)
   planurhome.com · WHERE HOMES ARE PERFECTED
   ============================================================= */

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

:root {
  /* ---------- Color primitives ---------- */
  /* ── COLOR PSYCHOLOGY v3 ──────────────────────────────────────
     Source hues: THF logo navy (h≈240) + sky (h≈210)
     Ink    = inky slate-navy   — premium fountain-pen feel
     Accent = steel-teal        — trust, precision, judgement
     Gold   = amber-bronze      — warm authority, craftsmanship
     Paper  = engineering-paper — cool stone, high-end technical
  ─────────────────────────────────────────────────────────── */

  --ink:          oklch(16% 0.04 240);
  --ink-80:       oklch(16% 0.04 240 / 0.80);
  --ink-60:       oklch(16% 0.04 240 / 0.60);
  --ink-45:       oklch(16% 0.04 240 / 0.45);
  --ink-25:       oklch(16% 0.04 240 / 0.25);
  --ink-12:       oklch(16% 0.04 240 / 0.12);
  --ink-07:       oklch(16% 0.04 240 / 0.07);

  --paper:        oklch(97% 0.005 220);
  --paper-dim:    oklch(93% 0.007 220);
  --cream:        oklch(99% 0.003 220);
  --paper-80:     oklch(97% 0.005 220 / 0.80);
  --paper-60:     oklch(97% 0.005 220 / 0.60);

  --accent:       oklch(52% 0.10 220);
  --accent-lt:    oklch(64% 0.09 220);
  --accent-dk:    oklch(40% 0.10 220);
  --accent-dkk:   oklch(30% 0.08 220);
  --gold:         oklch(62% 0.09 55);
  --gold-dk:      oklch(50% 0.09 55);

  --muted:        oklch(54% 0.03 230);
  --border:       oklch(16% 0.04 240 / 0.12);
  --border-lt:    oklch(16% 0.04 240 / 0.07);
  --border-dk:    oklch(16% 0.04 240 / 0.22);
  --rule:         oklch(16% 0.04 240);

  /* Inverse borders on dark surfaces */
  --paper-border:    oklch(97% 0.005 220 / 0.16);
  --paper-border-lt: oklch(97% 0.005 220 / 0.08);

  /* ---------- Semantic roles ---------- */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-dim);
  --bg-raised:    var(--cream);
  --bg-inverse:   var(--ink);

  --fg:           var(--ink);
  --fg-2:         var(--muted);
  --fg-3:         var(--ink-45);
  --fg-inverse:   var(--paper);
  --fg-inverse-2: oklch(97% 0.005 220 / 0.64);

  --link:         var(--accent);
  --link-hover:   var(--accent-dk);

  /* ---------- Typography ---------- */
  --f-display:    'Playfair Display', 'Noto Serif SC', Georgia, 'Songti SC', serif;
  --f-body:       'DM Sans', 'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', sans-serif;
  --f-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-xs:        0.72rem;
  --fs-sm:        0.8125rem;
  --fs-base:      0.9375rem;
  --fs-md:        1.0625rem;
  --fs-lg:        1.25rem;
  --fs-xl:        1.625rem;
  --fs-2xl:       2.125rem;
  --fs-3xl:       2.75rem;
  --fs-4xl:       3.625rem;
  --fs-5xl:       4.75rem;

  --lh-tight:     1.08;
  --lh-snug:      1.22;
  --lh-body:      1.58;
  --lh-loose:     1.72;

  --ls-label:     0.16em;
  --ls-caps:      0.06em;
  --ls-display:   -0.012em;
  --ls-body:      0;

  /* ---------- Spacing (4px base) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Radii (max 4px) ---------- */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  3px;
  --r-3:  4px;

  /* ---------- Borders ---------- */
  --bw-hair:   1px;
  --bw-rule:   1px;
  --bw-heavy:  2px;

  /* ---------- Elevation (restrained) ---------- */
  --shadow-none:   none;
  --shadow-edge:   inset 0 0 0 1px var(--border);
  --shadow-well:   inset 0 1px 0 0 var(--border-lt);

  /* ---------- Layout ---------- */
  --max-w:       1200px;
  --max-w-prose: 68ch;
  --gap:         clamp(1.5rem, 4vw, 3rem);
  --gutter:      clamp(1rem, 3vw, 2rem);

  /* ---------- Site-specific ---------- */
  --nav-h:  64px;
  --ease:   cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* =============================================================
   Standard Components — Nav + Footer
   ============================================================= */

/* ── Standard dark fixed nav ─────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h); background: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  border-bottom: 1px solid oklch(97% 0.005 220 / 0.08);
}
.nav-logo { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--paper); text-decoration: none; }
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(97% 0.005 220 / 0.55); transition: color 140ms; text-decoration: none; }
.nav-links a:hover { color: var(--paper); }
.nav-cta { font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; color: var(--paper); background: var(--accent); padding: 9px 18px; border-radius: var(--r-2); transition: background 140ms; text-decoration: none; }
.nav-cta:hover { background: var(--accent-dk); }
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-direction: column; gap: 5px; }
.nav-hamburger span { display: block; width: 20px; height: 1.5px; background: var(--paper); transition: transform 220ms var(--ease), opacity 140ms; transform-origin: center; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-drawer { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--ink); z-index: 190; padding: 28px 28px 36px; transform: translateY(-100%); transition: transform 280ms var(--ease); border-bottom: 1px solid oklch(97% 0.005 220 / 0.1); }
.mobile-drawer.open { transform: translateY(0); }
.mobile-drawer a { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(97% 0.005 220 / 0.7); padding: 13px 0; border-bottom: 1px solid oklch(97% 0.005 220 / 0.08); transition: color 140ms; text-decoration: none; }
.mobile-drawer a:last-child { border-bottom: none; }
.mobile-drawer .drawer-cta { display: block; margin-top: 20px; background: var(--accent); color: var(--paper); font-size: 12px; font-weight: 500; padding: 13px 20px; border-radius: var(--r-2); text-align: center; transition: background 140ms; }
.mobile-drawer .drawer-cta:hover { background: var(--accent-dk); }
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-drawer { display: block; }
}

/* ── Standard footer ─────────────────────────────────────── */
.site-footer { background: var(--ink); border-top: 1px solid oklch(97% 0.005 220 / 0.1); padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem) 1.75rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid oklch(97% 0.005 220 / 0.1); justify-content: center; max-width: 1100px; margin-inline: auto; }
.footer-links a { font-size: 12.5px; color: oklch(97% 0.005 220 / 0.48); transition: color 140ms; text-decoration: none; }
.footer-links a:hover { color: var(--paper); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: center; justify-content: center; max-width: 1100px; margin-inline: auto; }
.footer-legal { font-size: 11.5px; color: oklch(97% 0.005 220 / 0.45); }
.footer-disclaimer { width: 100%; font-size: 11px; color: oklch(97% 0.005 220 / 0.32); margin-top: 0.25rem; text-align: center; }