/* ============================================================================
   site-theme.css — Brand tokens for Setia Awan.

   ╔══════════════════════════════════════════════════════════════════════════╗
   ║                       HOW TO RE-THEME FOR NEW CI                         ║
   ║                                                                          ║
   ║  When the rebrand lands, edit ONLY the "LAYER 1 — Brand primitives"      ║
   ║  block below. Replace the --sa-brand-* ramp hexes with the new CI's      ║
   ║  primary ramp (and add a secondary ramp if needed). Everything else      ║
   ║  re-themes automatically.                                                ║
   ║                                                                          ║
   ║  DO NOT edit Layer 2 (semantic tokens) unless the brand introduces a     ║
   ║  whole new semantic role (e.g. a "luxury gold" tier). Layer 2 is the     ║
   ║  contract that the rest of the codebase reads from.                      ║
   ║                                                                          ║
   ║  DO NOT add hex literals to site-design.css or the migration's element   ║
   ║  styles. Use class hooks + var(--token) ONLY.                            ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Placeholder palette (until new CI is final): the red ramp is built off
   the existing setiaawan.com primary #EB2222. Lift this file straight into
   the new CI by swapping the hexes; site visually re-themes on next reload.
   ============================================================================ */

:root {

    /* ════════════════════════════════════════════════════════════════════════
       LAYER 1 — Brand primitives.
       Just the raw hexes of the brand. Edit THIS block (and only this block)
       when the new CI lands.
       ════════════════════════════════════════════════════════════════════════ */

    /* Primary brand ramp — current site red (placeholder). */
    --sa-brand-50:   #FFF1F0;
    --sa-brand-100:  #FFDAD6;
    --sa-brand-200:  #F8B0AA;
    --sa-brand-300:  #F19191;
    --sa-brand-400:  #ED5C50;
    --sa-brand-500:  #EB2222;   /* canonical primary — from setiaawan.com */
    --sa-brand-600:  #C71818;
    --sa-brand-700:  #8E1810;
    --sa-brand-800:  #6B100B;
    --sa-brand-900:  #4A0A05;

    /* Neutral ink ramp — modern warm-grey scale; barely changes between brands. */
    --sa-ink-50:   #F7F8FA;
    --sa-ink-100:  #EEF1F5;
    --sa-ink-200:  #DDE2E9;
    --sa-ink-300:  #B5BCC7;
    --sa-ink-400:  #8A93A0;
    --sa-ink-500:  #6B7280;
    --sa-ink-600:  #4D5462;
    --sa-ink-700:  #2C3340;
    --sa-ink-800:  #1A1F2A;
    --sa-ink-900:  #0F1419;

    /* Warm off-white — paper/section background. */
    --sa-cream:    #FAF8F4;

    /* Functional fixed colours (never re-themed — purely semantic). */
    --sa-ok:       #10B981;
    --sa-warn:     #F59E0B;
    --sa-danger:   #DC2626;

    /* ════════════════════════════════════════════════════════════════════════
       LAYER 2 — Semantic tokens.
       Everything else in the codebase references THESE, never Layer 1.
       Components stay stable; brand swap doesn't touch this layer.
       ════════════════════════════════════════════════════════════════════════ */

    /* Brand */
    --brand-primary:        var(--sa-brand-500);
    --brand-primary-hover:  var(--sa-brand-700);
    --brand-primary-dark:   var(--sa-brand-700);   /* alias kept for back-compat with skeleton */
    --brand-primary-light:  var(--sa-brand-50);
    --brand-primary-tint:   var(--sa-brand-50);
    --brand-on-primary:     #ffffff;

    --brand-accent:         var(--sa-ink-900);     /* secondary action: stays dark ink, not red */
    --brand-accent-hover:   var(--sa-ink-700);
    --brand-accent-dark:    var(--sa-ink-900);     /* alias kept for back-compat */

    /* Ink / text */
    --ink:        var(--sa-ink-900);
    --ink-soft:   var(--sa-ink-700);
    --mut:        var(--sa-ink-500);
    --line:       var(--sa-ink-100);
    --line-soft:  var(--sa-ink-50);

    /* Backgrounds */
    --bg:         #ffffff;
    --bg-2:       var(--sa-ink-50);                /* alternating-section tint */
    --bg-warm:    var(--sa-cream);
    --bg-tint:    var(--sa-ink-50);
    --bg-dark:    var(--sa-ink-900);
    --bg-darker:  #050810;

    /* Project status badges — semantic, retheme automatically with brand. */
    --status-now-selling:  var(--brand-primary);
    --status-coming-soon:  var(--sa-ink-700);
    --status-completed:    var(--sa-ok);
    --status-sold-out:     var(--sa-ink-400);

    /* Layout */
    --max:                  1200px;
    --max-wide:             1440px;
    --max-narrow:           880px;
    --section-py-desktop:   96px;
    --section-py-mobile:    64px;
    --gutter:               24px;

    /* Typography
       Three faces to give us range:
       - Fraunces (serif, variable) — body display + editorial moments
       - Space Grotesk (sans, geometric) — punchy display + buttons + UI
       - Inter (sans) — body copy + microtype
       All free via Google Fonts; falling back gracefully if blocked. */
    --font-sans:            'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display:         'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-serif:           'Fraunces', 'Recoleta', Georgia, 'Times New Roman', serif;
    --font-mono:            'JetBrains Mono', Monaco, monospace;

    /* Type scale (clamped for fluid responsiveness). */
    --text-eyebrow:   clamp(11px, 0.78vw, 13px);
    --text-body:      clamp(15px, 1.05vw, 17px);
    --text-lead:      clamp(17px, 1.3vw, 20px);
    --text-h4:        clamp(20px, 1.5vw, 24px);
    --text-h3:        clamp(24px, 2vw, 32px);
    --text-h2:        clamp(32px, 3.2vw, 48px);
    --text-h1:        clamp(40px, 5vw, 72px);
    --text-display:   clamp(48px, 6.5vw, 96px);

    /* Radii + shadows */
    --radius-sm:     6px;
    --radius-md:     12px;
    --radius-lg:     18px;
    --radius-xl:     28px;
    --radius-pill:   999px;

    --shadow-sm:     0 1px 2px rgba(15, 20, 25, .05);
    --shadow-md:     0 6px 16px rgba(15, 20, 25, .07);
    --shadow-lg:     0 18px 40px rgba(15, 20, 25, .10);
    --shadow-xl:     0 30px 64px rgba(15, 20, 25, .14);

    /* Motion */
    --ease-out:      cubic-bezier(.2, .6, .2, 1);
    --ease-in-out:   cubic-bezier(.65, .05, .35, 1);
    --dur-fast:      180ms;
    --dur-med:       320ms;
    --dur-slow:      640ms;
}

/* ─── Optional preview theme (for the CI decision meeting) ──────────────────
   Toggle by adding data-theme="proposed" on <html>. Edit the values inside
   to preview a candidate palette side-by-side with the current red. */
:root[data-theme="proposed"] {
    /* Example — uncomment + edit when previewing a candidate CI.
    --sa-brand-50:  #EAF4FF;
    --sa-brand-500: #1E3A8A;
    --sa-brand-700: #142354;
    */
}

/* ─── Base reset + body type ───────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--brand-primary); color: var(--brand-on-primary); }

/* ─── Web fonts (Fraunces + Space Grotesk + Inter via Google Fonts CDN) ─── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');