/* ============================================================
   PLATINUM RETREATS — Vibrant Miami Design System
   ============================================================ */

:root,
[data-theme='light'] {
  /* Surfaces — warm cream / sand */
  --color-bg: #FFFBF3;
  --color-surface: #FFF7EB;
  --color-surface-2: #FFFDF9;
  --color-surface-offset: #FBF1E2;
  --color-surface-offset-2: #F6E8D4;
  --color-surface-dynamic: #F1E0C6;
  --color-divider: #EFDFCB;
  --color-border: #E7D4BB;

  /* Text — deep teal/ink for trust + readability */
  --color-text: #0E2E33;
  --color-text-muted: #5C6B6E;
  --color-text-faint: #9AA7A9;
  --color-text-inverse: #FFFDF9;

  /* Primary — Deep Teal (Miami water, trust) */
  --color-primary: #0E4B53;
  --color-primary-hover: #0A3A41;
  --color-primary-active: #082E34;
  --color-primary-highlight: #CDE6E6;

  /* Accent — Coral (Miami sunset, energy) */
  --color-coral: #F26A5C;
  --color-coral-hover: #D8524A;
  --color-coral-active: #B8413C;
  --color-coral-highlight: #FBE0DC;

  /* Secondary — Turquoise (Miami sea) */
  --color-turquoise: #1BA6B8;
  --color-turquoise-hover: #148A99;
  --color-turquoise-highlight: #D2EEF1;

  /* Highlight — Sunny Gold (Miami sun) */
  --color-gold: #F4A93C;
  --color-gold-hover: #D98F22;
  --color-gold-highlight: #FBE8C6;

  /* Magenta — tropical bloom, sparingly */
  --color-magenta: #D63384;

  /* Warning / Error / Success (semantic) */
  --color-warning: #C26A1E;
  --color-error: #C8395A;
  --color-success: #2E7D5B;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows — warm-toned */
  --shadow-sm: 0 1px 2px oklch(0.3 0.02 60 / 0.06);
  --shadow-md: 0 6px 20px oklch(0.3 0.04 50 / 0.10);
  --shadow-lg: 0 18px 48px oklch(0.3 0.05 50 / 0.16);
  --shadow-coral: 0 12px 32px oklch(0.65 0.18 30 / 0.28);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 1080px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* Fonts */
  --font-display: 'Clash Display', 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;

  /* Gradients */
  --gradient-miami: linear-gradient(120deg, var(--color-coral) 0%, var(--color-gold) 55%, var(--color-turquoise) 100%);
  --gradient-sunset: linear-gradient(180deg, #F4A93C 0%, #F26A5C 100%);
  --gradient-sea: linear-gradient(160deg, #1BA6B8 0%, #0E4B53 100%);
}

/* DARK MODE */
[data-theme='dark'] {
  --color-bg: #0C1B1E;
  --color-surface: #102428;
  --color-surface-2: #142C30;
  --color-surface-offset: #0F262A;
  --color-surface-offset-2: #163034;
  --color-surface-dynamic: #1C3A3F;
  --color-divider: #1E363A;
  --color-border: #274449;

  --color-text: #EAF2F1;
  --color-text-muted: #9DB0B0;
  --color-text-faint: #6B8082;
  --color-text-inverse: #0E2E33;

  --color-primary: #4FC4CE;
  --color-primary-hover: #3FB0BB;
  --color-primary-active: #319CA7;
  --color-primary-highlight: #143A3E;

  --color-coral: #FF7E6F;
  --color-coral-hover: #FF9588;
  --color-coral-active: #FFAC9F;
  --color-coral-highlight: #3A2422;

  --color-turquoise: #3CC1D2;
  --color-turquoise-hover: #56CDDC;
  --color-turquoise-highlight: #123033;

  --color-gold: #F5B85A;
  --color-gold-hover: #F8C576;
  --color-gold-highlight: #352B19;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 20px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 48px oklch(0 0 0 / 0.5);
  --shadow-coral: 0 12px 32px oklch(0.65 0.18 30 / 0.22);
}