/* ==========================================================================
   AAPRO — Design Tokens
   The Digital Atelier — palette, type scale, spacing, motion tokens.
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --color-burgundy: #45171B;
  --color-burgundy-light: #6b2a30;
  --color-burgundy-dark: #2e0f12;
  --color-olive: #292E1E;
  --color-olive-light: #3d4530;
  --color-sage: #AAAE8D;
  --color-sage-light: #c4c7ab;
  --color-sage-dark: #8b8f6f;
  --color-ivory: #FAF6EE;
  --color-ivory-deep: #F1EADA;
  --color-gold: #C9A050;
  --color-gold-soft: #DCC189;
  --color-charcoal: #201C18;
  --color-white: #FFFFFF;

  /* ---- Semantic surface / text tokens (light theme, default) ---- */
  --bg-primary: var(--color-ivory);
  --bg-secondary: var(--color-ivory-deep);
  --bg-inverse: var(--color-olive);
  --bg-accent: var(--color-burgundy);
  --surface-card: var(--color-ivory-deep);

  --text-primary: var(--color-charcoal);
  --text-secondary: #5a5349;
  --text-inverse: var(--color-ivory);
  --text-accent: var(--color-burgundy);
  --text-gold: var(--color-gold);

  --border-subtle: rgba(41, 46, 30, 0.12);
  --border-strong: rgba(41, 46, 30, 0.28);

  --overlay-scrim: rgba(20, 14, 12, 0.45);

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

  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* ---- Type scale (fluid) ---- */
  --fs-display: clamp(2.75rem, 5vw + 1rem, 5.5rem);
  --fs-h1: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.8rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.35rem, 1.4vw + 1rem, 1.85rem);
  --fs-h4: clamp(1.1rem, 0.8vw + 1rem, 1.35rem);
  --fs-body-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;
  --space-3xl: 11rem;

  --container-max: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ---- Radius ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-soft: 0 12px 40px rgba(41, 23, 21, 0.08);
  --shadow-lift: 0 24px 60px rgba(41, 23, 21, 0.14);
  --shadow-gold-glow: 0 0 0 1px rgba(201, 160, 80, 0.35);

  /* ---- Motion ---- */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 750ms;
  --dur-loader: 1600ms;

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-whatsapp: 90;
  --z-loader: 200;
  --z-modal: 150;
  --z-toast: 180;
}

/* ---- Dark theme overrides ---- */
[data-theme="dark"] {
  --bg-primary: #1B1712;
  --bg-secondary: #22201A;
  --bg-inverse: var(--color-ivory);
  --bg-accent: var(--color-burgundy-light);
  --surface-card: #26221C;

  --text-primary: var(--color-ivory);
  --text-secondary: #C9C3B4;
  --text-inverse: var(--color-charcoal);
  --text-accent: var(--color-sage-light);
  --text-gold: var(--color-gold-soft);

  --border-subtle: rgba(250, 246, 238, 0.12);
  --border-strong: rgba(250, 246, 238, 0.24);

  --overlay-scrim: rgba(0, 0, 0, 0.6);

  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.5);
}