/* Design Tokens — Casa Penyes */

:root {
  /* Colors */
  --color-sand: #F5F0E8;
  --color-terracotta: #C4663A;
  --color-terracotta-dark: #A3522D;
  --color-deep-blue: #1B3A4B;
  --color-deep-blue-light: #264E65;
  --color-olive: #5C6B4F;
  --color-olive-light: #7A8B6A;
  --color-warm-white: #FDFBF7;
  --color-charcoal: #2C2C2C;
  --color-gold: #D4A853;
  --color-gold-light: #E4C47A;
  --color-border: rgba(27, 58, 75, 0.1);
  --color-overlay: rgba(27, 58, 75, 0.55);

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Outfit', system-ui, sans-serif;

  /* Fluid type scale */
  --fs-hero: clamp(3rem, 8vw, 6rem);
  --fs-h1: clamp(2.25rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-body-lg: clamp(1.1rem, 1.3vw, 1.25rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Font weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;
  --space-3xl: 12rem;

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --header-height: 80px;
  --header-height-scrolled: 60px;

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 200ms var(--ease-out);
  --transition-base: 400ms var(--ease-out);
  --transition-slow: 800ms var(--ease-out);

  /* Z-index scale */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Dark section theme */
[data-theme="dark"] {
  --section-bg: var(--color-deep-blue);
  --section-text: var(--color-warm-white);
  --section-text-muted: rgba(253, 251, 247, 0.65);
  --section-accent: var(--color-gold);
  --section-border: rgba(253, 251, 247, 0.15);
}

/* Light section theme (default) */
[data-theme="light"],
:root {
  --section-bg: var(--color-warm-white);
  --section-text: var(--color-charcoal);
  --section-text-muted: rgba(44, 44, 44, 0.6);
  --section-accent: var(--color-terracotta);
  --section-border: var(--color-border);
}

/* Sand section theme */
[data-theme="sand"] {
  --section-bg: var(--color-sand);
  --section-text: var(--color-charcoal);
  --section-text-muted: rgba(44, 44, 44, 0.6);
  --section-accent: var(--color-terracotta);
  --section-border: rgba(27, 58, 75, 0.08);
}

/* Accent section theme */
[data-theme="accent"] {
  --section-bg: var(--color-terracotta);
  --section-text: var(--color-warm-white);
  --section-text-muted: rgba(253, 251, 247, 0.75);
  --section-accent: var(--color-gold);
  --section-border: rgba(253, 251, 247, 0.2);
}