/* Cloud Yummy — tokens aligned with cloudyummy.com (Square Online): black primary, mint/teal accent #22dec5, warm sand #f1efe4, DM Sans.
 * Load DM Sans via <link> in HTML (preconnect + stylesheet); do not @import here (blocks render). */

:root {
  --color-primary: #000000;
  --color-primary-muted: #1a1a1a;
  --color-accent: #22dec5;
  --color-accent-hover: #1bc4ad;
  --color-accent-soft: #35e6b4;
  --color-warm-sand: #f1efe4;
  --color-coral: #f15858;

  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: var(--color-warm-sand);
  --color-header-bg: #ffffff;
  /* Subtle header wash (Square / cloudyummy.com — not flat white) */
  --color-header-gradient-top: #ebe8e2;
  --color-header-gradient-mid: #f5f3ef;
  --color-header-gradient-bottom: #ffffff;
  /* Logo + header bar — match cloudyummy.com (large Square header logo) */
  --brand-logo-h: clamp(4rem, 12vw, 7.75rem);
  /* Sticky nav offset for mobile menu = logo + vertical padding */
  --header-height: calc(var(--brand-logo-h) + 1.5rem);
  --color-border: #e8e6e0;

  --color-text: #000000;
  --color-text-muted: #4a4a4a;
  --color-text-inverse: #ffffff;
  --color-text-strong: #1a1a1a;
  --color-text-subtle: #333333;
  --color-text-secondary: #5c5c5c;
  --color-text-soft: #767676;

  --color-link: #0066cc;
  --color-link-hover: #004499;
  --color-yelp: #d32323;
  --color-facebook: #1877f2;
  --color-hero-ink: #111111;

  /* Translucent overlays (hero, carousel, header chrome) */
  --color-white-88: rgba(255, 255, 255, 0.88);
  --color-white-95: rgba(255, 255, 255, 0.95);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-92: rgba(255, 255, 255, 0.92);
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-white-75: rgba(255, 255, 255, 0.75);
  --color-white-65: rgba(255, 255, 255, 0.65);
  --color-white-55: rgba(255, 255, 255, 0.55);
  --color-white-28: rgba(255, 255, 255, 0.28);
  --color-white-22: rgba(255, 255, 255, 0.22);
  --color-white-12: rgba(255, 255, 255, 0.12);

  --color-black-05: rgba(0, 0, 0, 0.05);
  --color-black-06: rgba(0, 0, 0, 0.06);
  --color-black-07: rgba(0, 0, 0, 0.07);
  --color-black-08: rgba(0, 0, 0, 0.08);
  --color-black-12: rgba(0, 0, 0, 0.12);
  --color-overlay-hero-1: rgba(0, 0, 0, 0.78);
  --color-overlay-hero-2: rgba(0, 0, 0, 0.42);
  --color-overlay-hero-3: rgba(0, 0, 0, 0.5);
  --color-overlay-carousel-1: rgba(0, 0, 0, 0.72);
  --color-overlay-carousel-2: rgba(0, 0, 0, 0.45);
  --color-overlay-carousel-3: rgba(0, 0, 0, 0.55);

  --color-gallery-page-bg: #fdf6f5;
  --color-gallery-cell-bg: #e8e4e2;
  --color-yelp-snapshot-bg: #f7f7f7;

  /* Documentary: use literal 880px in @media rules (var() in media queries has poor support). */
  --breakpoint-nav: 880px;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 4vw, 2.25rem);
  --text-4xl: clamp(2rem, 5vw, 3rem);

  --leading-tight: 1.15;
  --leading-normal: 1.6;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);

  --ease-default: 0.2s ease;
  /* Motion — prefer transform/opacity; use with prefers-reduced-motion overrides in animations.css */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-hero-stagger: 0.55s;
  --motion-nav-sheet: 0.32s;
  --motion-reveal: 0.5s;
  --site-max: 1000px;

  --z-sticky: 100;
  --z-overlay: 1000;
}