/* ============================================================
   ALMARA DESIGN — CSS Variables (Design Tokens)
   Edit this file → changes apply across ALL pages
   ============================================================ */
:root {
  /* Brand Colors */
  --color-bg:            #F7F5F1;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EFECE6;
  --color-border:        #E0DBD3;

  --color-text-primary:  #1C1A17;
  --color-text-secondary:#5C5650;
  --color-text-muted:    #9A948D;

  --color-accent:        #B8956A;
  --color-accent-dark:   #8C6D47;
  --color-accent-light:  #D4B896;

  --color-overlay:       rgba(26,24,20,0.55);
  --color-glass:         rgba(247,245,241,0.88);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

  --text-xs:   0.72rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-hero: clamp(3.5rem, 8vw, 7rem);

  --leading-tight:  1.1;
  --leading-normal: 1.55;
  --leading-loose:  1.85;

  --tracking-tight: -0.03em;
  --tracking-wide:  0.1em;
  --tracking-wider: 0.18em;

  /* Spacing */
  --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;

  --section-padding: clamp(5rem, 9vw, 9rem);
  --container-max:   1340px;
  --container-pad:   clamp(1.5rem, 5vw, 5rem);

  /* Radius & Shadows */
  --radius-sm:   4px;  --radius-md: 10px;
  --radius-lg:   20px; --radius-full: 9999px;

  --shadow-sm: 0 1px 4px rgba(26,24,20,0.06);
  --shadow-md: 0 6px 20px rgba(26,24,20,0.09);
  --shadow-lg: 0 20px 56px rgba(26,24,20,0.13);
  --shadow-xl: 0 36px 88px rgba(26,24,20,0.17);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.32s ease;
  --transition-slow:   0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Z-index */
  --z-below: -1; --z-base: 0; --z-raised: 10;
  --z-overlay: 100; --z-nav: 200; --z-modal: 300; --z-toast: 400;

  --nav-height: 82px;
}

/* ── DARK MODE ─────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:            #0E0D0B;
  --color-surface:       #181612;
  --color-surface-alt:   #201E19;
  --color-border:        #2C2920;

  --color-text-primary:  #EDE9E2;
  --color-text-secondary:#A09890;
  --color-text-muted:    #635D56;

  --color-accent:        #C9A87A;
  --color-accent-dark:   #D4B896;
  --color-accent-light:  #8C6D47;

  --color-glass:         rgba(20,18,14,0.90);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 56px rgba(0,0,0,0.55);
  --shadow-xl: 0 36px 88px rgba(0,0,0,0.65);
}