/* ============================================================
   ELYSIAN FALSE CEILING — DESIGN TOKENS
   All CSS custom properties from CLAUDE.md Section D
   ============================================================ */

:root {

  /* ──────────────────────────────────────────
     COLOUR PALETTE (Section D.2)
  ────────────────────────────────────────── */

  /* Backgrounds */
  --color-primary:        #1A1714;   /* deep warm charcoal — hero, dark backgrounds */
  --color-secondary:      #FFFFFF;   /* pure white — content section backgrounds */
  --color-surface:        #F7F5F2;   /* warm off-white — alternating sections */
  --color-surface-dark:   #111111;   /* near-black — card surfaces on dark sections */

  /* Brand Accent */
  --color-accent:         #C9A84C;   /* warm gold — CTAs, underlines, highlights */
  --color-accent-hover:   #B8952F;   /* deeper gold — hover states */
  --color-accent-light:   #D4B96A;   /* lighter gold — subtle highlights */
  --color-accent-glow:    rgba(201, 168, 76, 0.25); /* gold glow for shadows */

  /* Text */
  --color-text-primary:   #1A1A1A;   /* near-black — body text on white sections */
  --color-text-secondary: #6B6B6B;   /* medium grey — supporting body copy */
  --color-text-light:     #FFFFFF;   /* white — text on dark sections */
  --color-text-muted:     #9A9A9A;   /* light grey — captions, metadata */

  /* Utility */
  --color-border:         #E0E0DC;   /* subtle warm border */
  --color-border-dark:    #2A2A2A;   /* border on dark backgrounds */
  --color-success:        #5B8C5A;   /* muted green — warranty badges, trust signals */
  --color-whatsapp:       #25D366;   /* WhatsApp brand green */
  --color-overlay:        rgba(0, 0, 0, 0.55); /* hero image overlay */


  /* ──────────────────────────────────────────
     TYPOGRAPHY (Section D.3)
  ────────────────────────────────────────── */

  /* Font Families */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type Scale — Desktop */
  --text-display: 72px;   /* line-height: 1.1  | Cormorant Garamond 600 */
  --text-h1:      56px;   /* line-height: 1.15 | Cormorant Garamond 600 */
  --text-h2:      42px;   /* line-height: 1.2  | Cormorant Garamond 500 */
  --text-h3:      32px;   /* line-height: 1.3  | Cormorant Garamond 500 */
  --text-h4:      24px;   /* line-height: 1.4  | DM Sans 500 */
  --text-h5:      20px;   /* line-height: 1.4  | DM Sans 500 */
  --text-h6:      18px;   /* line-height: 1.5  | DM Sans 500 */
  --text-body-lg: 18px;   /* line-height: 1.7  | DM Sans 400 */
  --text-body:    16px;   /* line-height: 1.7  | DM Sans 400 */
  --text-body-sm: 14px;   /* line-height: 1.6  | DM Sans 400 */
  --text-caption: 12px;   /* line-height: 1.5  | DM Sans 400 | uppercase | letter-spacing: 0.1em */


  /* ──────────────────────────────────────────
     SPACING SCALE — 4px base (Section D.4)
  ────────────────────────────────────────── */

  --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-30:  120px;
  --space-40:  160px;


  /* ──────────────────────────────────────────
     BORDER RADIUS (Section D.5)
  ────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;   /* pill buttons, badges */


  /* ──────────────────────────────────────────
     SHADOWS (Section D.6)
  ────────────────────────────────────────── */

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-dark: 0 8px 40px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 4px 20px var(--color-accent-glow);


  /* ──────────────────────────────────────────
     BREAKPOINTS (reference only — use in media queries)
     Section D.7
     --bp-mobile:  375px
     --bp-tablet:  768px
     --bp-desktop: 1024px
     --bp-wide:    1280px
     --bp-ultra:   1440px
  ────────────────────────────────────────── */


  /* ──────────────────────────────────────────
     Z-INDEX SCALE
  ────────────────────────────────────────── */

  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    500;
  --z-modal:      1000;
  --z-toast:      2000;
  --z-whatsapp:   9999;


  /* ──────────────────────────────────────────
     TRANSITION DEFAULTS
  ────────────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-reveal: 600ms ease;


  /* ──────────────────────────────────────────
     LAYOUT
  ────────────────────────────────────────── */

  --container-max:     1280px;
  --container-padding: var(--space-6);   /* 24px */
  --section-pad-v:     var(--space-24);  /* 96px desktop */
  --navbar-height:     88px;
}


/* ──────────────────────────────────────────
   MOBILE TYPE SCALE OVERRIDES (Section D.3)
────────────────────────────────────────── */

@media (max-width: 767px) {
  :root {
    --text-display: 44px;
    --text-h1:      36px;
    --text-h2:      30px;
    --text-h3:      24px;
    --text-h4:      20px;
    --text-h5:      18px;
    --text-h6:      16px;

    --section-pad-v:     var(--space-16);  /* 64px mobile */
    --container-padding: var(--space-5);   /* 20px mobile */
    --navbar-height:     72px;
  }
}