/* ==========================================================================
   VISAMAT — DESIGN SYSTEM VARIABLES
   Warm Ivory, Editorial Serif & Tactile Mediterranean Palette
   ========================================================================== */

:root {
  /* Warm Mediterranean Palette from Approved Creative Direction */
  --bg-primary: #F5F1EA;          /* Warm ivory / off-white (#F4F0E9 / #F6F2EC) */
  --bg-surface: #FFFFFF;          /* Pure crisp surface */
  --bg-secondary: #EAE1D5;        /* Soft sand / Warm stone */
  --bg-tertiary: #DED2C4;         /* Tactile calcària / Clay tint */
  --bg-warm-stone: #E5DDD1;       /* Warm residential stone */
  --bg-linen: #EFE9DE;            /* Natural linen */

  /* Black as Accent / Dark Contrast (CTA, typography, lines, footer) */
  --bg-contrast: #171512;         /* Very dark charcoal */
  --bg-contrast-surface: #221F1B; /* Soft dark surface */

  /* Typography Colors */
  --text-primary: #171512;        /* Very dark charcoal */
  --text-secondary: #6F6A63;      /* Warm grey */
  --text-muted: #8E887F;          /* Sand stone grey */
  --text-dim: #BFB8AC;            /* Delicate architectural note */
  
  /* Inverted Colors (for dark buttons & footer) */
  --text-inverse: #F5F1EA;
  --text-inverse-secondary: #C8C1B5;
  --text-inverse-muted: #8E887F;

  /* Natural Warm Material Accents */
  --accent-terracotta: #B07158;   /* Clay / Terracotta (#B07158) */
  --accent-clay: #B07158;         /* Warm clay accent */
  --accent-sand: #C6A98E;         /* Natural linen / Sandstone */
  --accent-warm-light: #F2ECE4;

  /* Borders & Dividers — Delicate & Whisper-Thin */
  --border-subtle: rgba(23, 21, 18, 0.08);
  --border-medium: rgba(23, 21, 18, 0.14);
  --border-strong: rgba(23, 21, 18, 0.8);
  --border-inverse-subtle: rgba(245, 241, 234, 0.12);
  --border-inverse-medium: rgba(245, 241, 234, 0.22);

  /* Typography Families: Editorial Serif for Emotion, Sans for Info */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-handwritten: 'Caveat', cursive, sans-serif;
  --font-mono: 'SF Mono', 'Roboto Mono', Menlo, Monaco, Consolas, monospace;

  /* Fluid Editorial Spacing Scale */
  --space-3xs: clamp(0.2rem, 0.2vw + 0.15rem, 0.35rem);
  --space-2xs: clamp(0.4rem, 0.3vw + 0.3rem, 0.6rem);
  --space-xs: clamp(0.65rem, 0.5vw + 0.5rem, 0.85rem);
  --space-sm: clamp(0.85rem, 0.7vw + 0.7rem, 1.25rem);
  --space-md: clamp(1.25rem, 1.2vw + 0.8rem, 1.85rem);
  --space-lg: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  --space-xl: clamp(2.5rem, 3vw + 1.25rem, 4.25rem);
  --space-2xl: clamp(3.5rem, 4.5vw + 1.75rem, 6rem);
  --space-3xl: clamp(4.5rem, 6.5vw + 2rem, 8.5rem);

  /* Layout Containers */
  --container-max: 1540px;
  --container-editorial: 1220px;
  --container-narrow: 860px;
  --container-pad: clamp(1.25rem, 3.5vw, 3.5rem);

  /* Architectural Radii — Crisp & Refined */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;

  /* Transitions & Easing */
  --ease-architectural: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-calm: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 0.2s var(--ease-calm);
  --transition-normal: 0.35s var(--ease-architectural);
  --transition-slow: 0.75s var(--ease-architectural);

  /* Elevation */
  --shadow-subtle: 0 4px 16px rgba(23, 21, 18, 0.04);
  --shadow-warm: 0 12px 36px rgba(176, 113, 88, 0.07);
  --shadow-card: 0 8px 28px rgba(23, 21, 18, 0.08);
  --shadow-drawer: 0 20px 50px rgba(23, 21, 18, 0.12);
  --shadow-dropdown: 0 16px 40px rgba(23, 21, 18, 0.07);

  /* Header Height */
  --header-height: 76px;
}