/*
  Casa M'xuma — Design Tokens
  Reconciled with the live coming-soon page (existing-assets/coming-soon.html)
  on 2026-05-07. Hex values, fonts, and atmospheric variables match the
  production landing's :root declarations.
*/

:root {
  /* --- Brand surfaces (sourced from coming-soon.html) --- */
  --color-char:  #0d0b09;                 /* deep charcoal, near-black warm */
  --color-ember: #c47a2b;                 /* primary ember accent */
  --color-ember-hover: #d48f3a;           /* hover lift on ember */
  --color-ash:   #f5efe6;                 /* warm paper, primary text */
  --color-cream: #ede5d8;                 /* slightly warmer paper, headings */
  --color-stone: #3a3028;                 /* muted stone surface */
  --color-smoke: rgba(180, 160, 130, 0.08);

  /* --- Extended luxury palette ---
     Added 2026-05-07 alongside the brand-direction integration to
     support a richer cinematic vocabulary without abandoning the
     established ember-and-amber identity. Use sparingly and only
     where the existing tokens would feel flat. */
  --color-bronze:      #8a5a2b;          /* deeper warm metal, hovers/borders */
  --color-aged-gold:   #b78b4a;          /* aged-gold accent for hairlines and rules */
  --color-espresso:    #1a1109;          /* deep espresso for layered surfaces */
  --color-sand:        #d8c4a3;          /* warm sand, secondary text/quotes — brightened 2026-05-10 for dim-screen legibility */
  --color-agave:       #7a8a5e;          /* agave green — sparing accent only */

  /* Aliases mapped to common semantic names */
  --color-bg-deep:        var(--color-char);
  --color-bg-surface:     #14110d;
  --color-bg-elevated:    #1a1611;
  --color-text-primary:   var(--color-ash);
  --color-text-heading:   var(--color-cream);
  --color-text-muted:     rgba(245, 239, 230, 0.72);
  --color-text-faint:     rgba(245, 239, 230, 0.48);
  --color-text-sand:      var(--color-sand);
  --color-text-inverse:   var(--color-char);

  --color-border:         rgba(196, 122, 43, 0.20);
  --color-border-strong:  rgba(196, 122, 43, 0.35);
  --color-border-faint:   rgba(245, 239, 230, 0.08);
  --color-border-gold:    rgba(183, 139, 74, 0.35);

  /* Atmospheric tones used by overlays */
  --color-glow-warm:      #3d1f0a;        /* radial-glow center color */
  --color-glow-pinpoint:  #2a1200;        /* used in interior pages (terms.html) */

  /* Luxury depth layering */
  --shadow-luxury:        0 30px 80px -30px rgba(0, 0, 0, 0.7);
  --shadow-product:       0 60px 120px -30px rgba(0, 0, 0, 0.8);
  --glass-panel-bg:       rgba(20, 17, 13, 0.45);
  --glass-panel-blur:     blur(14px) saturate(140%);

  /* Functional */
  --color-warning:        #b85b3a;

  /* --- Typography --- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-label:   'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* Body weight bumped from 300 → 400 (2026-05-10) for legibility on
     dim screens. Cormorant display + Cinzel labels stay at their lighter
     weights so the editorial tone is preserved; only the running prose
     and UI body text picks up the heavier weight. */
  --font-weight-body:    400;
  --font-weight-body-thin: 300;
  --font-weight-display: 300;

  /* Type scale — Cormorant carries the display moments, Jost the prose.
     Smallest tiers bumped 2026-05-11 (~1px each) for legibility — micro
     was hitting illegibility on dim screens at 9px. */
  --font-size-micro:  0.625rem;    /* 10px — Cinzel labels */
  --font-size-xs:     0.75rem;     /* 12px — small body */
  --font-size-sm:     0.875rem;    /* 14px — secondary body */
  --font-size-base:   1rem;        /* 16px — body */
  --font-size-md:     1.125rem;    /* 18px — lede */
  --font-size-lg:     1.5rem;      /* 24px — small display */
  --font-size-xl:     2rem;        /* 32px — section heading */
  --font-size-2xl:    2.75rem;     /* 44px — page heading */
  --font-size-3xl:    4rem;        /* 64px — display */
  --font-size-4xl:    5.25rem;     /* 84px — hero */
  --font-size-5xl:    7rem;        /* 112px — oversized luxury display */
  --font-size-6xl:    9rem;        /* 144px — section statements */

  --line-height-tight: 1.05;
  --line-height-display: 1.2;
  --line-height-body: 1.8;
  --line-height-prose: 1.9;

  --letter-spacing-label: 0.32em;   /* Cinzel micro labels */
  --letter-spacing-eyebrow: 0.4em;  /* very wide spacing on micro eyebrows */
  --letter-spacing-display: -0.01em;

  /* --- Spacing scale --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-48: 12rem;

  /* --- Layout --- */
  --max-content-width: 1180px;
  --max-prose-width: 65ch;

  /* --- Motion --- */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fade-up:  ease;
  --duration-fast: 250ms;
  --duration-base: 400ms;
  --duration-reveal: 800ms;

  /* --- Atmospheric overlays --- */
  --grain-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  --grain-opacity: 0.045;
  --radial-glow-bottom: radial-gradient(ellipse 70% 60% at 50% 80%, var(--color-glow-warm) 0%, transparent 70%);
  --radial-glow-top:    radial-gradient(ellipse 60% 40% at 50% 0%,  var(--color-glow-pinpoint) 0%, transparent 70%);
}