/**
 * Ching Palace 2.01 – Design system (Figma-aligned)
 * Single source of truth for colors, typography, spacing.
 * Button and link tokens from Figma component selection.
 */

:root {
  /* Brand / semantic colors (Figma selection) */
  --color-brand: #701a18;
  --color-brand-hover: #8B1A1A;
  --color-brand-light: #8a201e;
  --color-surface: #f8edd8;
  --color-surface-alt: #efe6d0;
  --color-on-surface: #1a1a1a;
  --color-on-surface-muted: #4a4a4a;
  --color-on-brand: #fff;
  --color-accent-gold: #FDD580;
  --color-accent-gold-dark: #B88118;

  /* Primary button: default = transparent + gold; hover = maroon + gold text */
  --color-btn-primary-bg: transparent;
  --color-btn-primary-border: var(--color-btn-hero-border);
  --color-btn-primary-text: var(--color-btn-hero-text);
  --color-btn-primary-hover-bg: var(--color-brand-hover);
  --color-btn-primary-hover-border: var(--color-brand-hover);
  --color-btn-primary-hover-text: var(--color-accent-gold);

  /* Secondary button: solid red (default) / slightly brighter red (hover) */
  --color-btn-secondary-bg: var(--color-brand);
  --color-btn-secondary-border: var(--color-brand);
  --color-btn-secondary-text: var(--color-on-brand);
  --color-btn-secondary-hover-bg: var(--color-brand-hover);
  --color-btn-secondary-hover-border: var(--color-brand-hover);
  --color-btn-secondary-hover-text: var(--color-accent-gold);

  /* Hero overlay buttons (Figma selected: default) */
  --color-btn-hero-bg: #7F7F7F;
  --color-btn-hero-border: #E0B440;
  --color-btn-hero-text: #E0B440;

  /* Text link on dark (e.g. nav: default / hover) */
  --color-link-on-dark: #fff;
  --color-link-on-dark-hover: var(--color-accent-gold);

  /* Legacy aliases (used by styles.css) */
  --color-cream: var(--color-surface);
  --color-cream-dark: var(--color-surface-alt);
  --color-red: var(--color-brand);
  --color-red-light: var(--color-brand-light);
  --color-red-hover: var(--color-brand-hover);
  --color-text: var(--color-on-surface);
  --color-text-muted: var(--color-on-surface-muted);
  --color-white: var(--color-on-brand);
  --color-gold: var(--color-accent-gold);

  /* Typography – families */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, sans-serif;

  /* Typography – scale (Figma-aligned) */
  --text-hero-title: clamp(3rem, 10vw, 5.5rem);
  --text-hero-subtitle: clamp(0.9rem, 2.5vw, 1.1rem);
  --text-section-title: clamp(1.75rem, 4vw, 2.25rem);
  --text-about-title: clamp(1.35rem, 3vw, 1.65rem);
  --text-body: 1.05rem;
  --text-body-sm: 0.95rem;
  --text-caption: 0.85rem;
  --text-nav: 0.9rem;
  --text-logo: 1.5rem;
  --text-price: 1.75rem;
  --text-price-desc: 0.9rem;
  --text-footer-cta: 1.1rem;
  --text-footer-col: 0.95rem;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Layout */
  --max-width: 1100px;
  --spacing: 1.5rem;
  --radius: 8px;
  --radius-btn: 4px;

  /* Divider – vector (divider2.svg) */
  --color-divider-vector: #5F0000;
  --divider-vector-icon-size: 29px;
}