/* ============================================================
   Imperial Coast Spa & Casino Resort — imperialcoastguide.com
   Direction: Organic Gradient Resort Editorial (2026)
   Warm cream ground, terracotta accent, sea-glass green.
   Cormorant Garamond display + Source Serif 4 / Inter body.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light;

  /* Surfaces — warm cream & paper */
  --bg:           #FFF8EF;  /* warm cream ground */
  --bg-soft:      #FBEFE0;
  --surface:       #FFFFFF;  /* paper card */
  --surface-2:     #FBF3E8;
  --surface-sunk:  #F3E6D4;  /* recessed cream */
  --surface-raise: #FFFFFF;

  /* Ink / text — deep coastal ink (AA-checked on cream) */
  --ink:           #26312B;  /* deep coastal ink, headings */
  --text:          #2F3A33;  /* body text */
  --text-muted:    #5A645C;  /* AA on cream */
  --text-faint:    #8A8F84;  /* large/caption/meta only */
  --on-accent:     #FFFFFF;  /* text on terracotta fills */
  --on-accent-ink: #3A1A0E;  /* text on light terracotta tints */

  /* Lines — low-alpha ink */
  --border:        rgba(38, 49, 43, 0.12);
  --border-strong: rgba(38, 49, 43, 0.22);
  --rule:          rgba(38, 49, 43, 0.10);

  /* Brand accent — terracotta */
  --accent:        #C66A3D;  /* terracotta, fills/borders/large display */
  --accent-soft:   #E0936A;
  --accent-tint:   rgba(198, 106, 61, 0.12);
  --accent-ink:    #A8491F;  /* AA terracotta text on cream */
  --accent-bright: #D9804F;
  --accent-line:   rgba(198, 106, 61, 0.40);

  /* Secondary accent — sea-glass green */
  --sea:           #7BAE9D;  /* sea-glass green */
  --sea-soft:      #A6C9BE;
  --sea-tint:      rgba(123, 174, 157, 0.16);
  --sea-ink:       #4F7E6E;  /* AA sea-glass text on cream */
  --sea-line:      rgba(123, 174, 157, 0.45);

  /* Gradient stops (organic washes) */
  --grad-warm:     linear-gradient(135deg, #FBEFE0 0%, #FFF8EF 45%, #E9F1EC 100%);
  --grad-sunset:   linear-gradient(160deg, #F5D9BE 0%, #F7C9A6 38%, #E7A98A 100%);
  --grad-sea:      linear-gradient(160deg, #D7E7DF 0%, #BBD8CB 60%, #9CC3B2 100%);
  --grad-soft:     radial-gradient(120% 90% at 50% 0%, #FBEFE0 0%, #FFF8EF 55%, transparent 100%);

  /* Status (AA on cream) */
  --good:    #4F7E6E;
  --good-tint: rgba(79, 126, 110, 0.14);
  --warn:    #B5572E;
  --warn-tint: rgba(181, 87, 46, 0.14);

  /* Type */
  --font-display: "Cormorant Garamond", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --fs-h1: clamp(2.3rem, 1.6vw + 1.6rem, 4.2rem);
  --fs-h2: clamp(1.7rem, 1.0vw + 1.3rem, 2.8rem);
  --fs-h3: clamp(1.25rem, 0.5vw + 1.05rem, 1.7rem);
  --fs-body: 1.125rem;
  --fs-sm: 0.95rem;
  --fs-cap: 0.75rem;

  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-body: 1.7;

  --track-tight: -0.015em;
  --track-cap: 0.16em;

  /* Spacing (8px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Layout */
  --maxw: min(1280px, 92vw);
  --maxw-narrow: min(860px, 92vw);
  --grid-cols: 12;
  --gap: 24px;
  --gap-tight: 16px;

  /* Radii — organic: soft, slightly larger, asymmetric blobs available */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;
  --r-blob: 42% 58% 56% 44% / 48% 52% 48% 52%;

  /* Shadows — soft, natural, paper */
  --shadow-1: 0 1px 2px rgba(60, 50, 40, 0.05), 0 10px 28px rgba(60, 50, 40, 0.10);
  --shadow-2: 0 18px 48px rgba(60, 50, 40, 0.16), 0 0 0 1px rgba(38, 49, 43, 0.05);
  --shadow-warm: 0 14px 40px rgba(198, 106, 61, 0.14);
  --shadow-sea:  0 14px 40px rgba(123, 174, 157, 0.18);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* Motion */
  --ease: cubic-bezier(0.4, 0.2, 0.2, 1);
  --ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
  --dur: 280ms;
  --drift: 24s;

  /* Focus */
  --focus: 2px solid var(--accent);
  --focus-offset: 3px;
}