/* ===================================================================
   Ocean Sun Custom Theme — Design Tokens
   Source: Brand Guidelines (Section 2 + 3)
   ===================================================================

   IMPORTANT: These tokens are for the public website theme ONLY.
   The OSAC plugin uses its own design system (assets/css/v2/).
   Do NOT mix these tokens with --osb-* variables.

   Prefix: --os-* (Ocean Sun)
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

:root {

  /* ── Typography ── */
  --os-font-display: 'Fraunces', Georgia, serif;
  --os-font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Display weights */
  --os-font-display-normal:   500;
  --os-font-display-semibold: 600;
  --os-font-display-bold:     700;

  /* Body weights */
  --os-font-body-normal:   400;
  --os-font-body-medium:   500;
  --os-font-body-semibold: 600;

  /* ── Brand Colors ── */
  --os-primary:     #1C2E3F;   /* Navy — headlines, nav, dark sections */
  --os-secondary:   #C9A96E;   /* Sand — accents, highlights, premium feel */
  --os-cta:         #B8856C;   /* Terracotta — general CTAs (Stay, Restaurant, Contact) */
  --os-dive:        #14b8a6;   /* Teal — dive/course/booking CTAs */
  --os-dive-dark:   #0d9488;   /* Teal dark — dive CTA hover */

  /* ── Backgrounds ── */
  --os-bg:          #FDFCF9;   /* White warm */
  --os-bg-cream:    #F7F4EF;   /* Cream */
  --os-bg-warm:     #F2ECE3;   /* Cream warm */
  --os-bg-white:    #FFFFFF;   /* Cards, overlays */

  /* ── Text ── */
  --os-text:        #1C2E3F;   /* Headlines (= Primary Navy) */
  --os-text-body:   #4A5568;   /* Body text */
  --os-text-muted:  #7C8694;   /* Secondary text, captions */
  --os-text-white:  #FFFFFF;   /* On dark backgrounds */

  /* ── Borders ── */
  --os-border:       #E2DDD3;
  --os-border-light: color-mix(in srgb, var(--os-border) 60%, transparent);

  /* ── Status Colors ── */
  --os-success:      #10B981;
  --os-error:        #EF4444;
  --os-warning:      #F59E0B;
  --os-success-light: color-mix(in srgb, var(--os-success) 10%, white);
  --os-error-light:   color-mix(in srgb, var(--os-error) 10%, white);

  /* ── Derived Colors ── */
  --os-primary-light:    color-mix(in srgb, var(--os-primary) 8%, white);
  --os-primary-dark:     color-mix(in srgb, var(--os-primary) 85%, black);
  --os-cta-hover:        color-mix(in srgb, var(--os-cta) 85%, black);
  --os-cta-light:        color-mix(in srgb, var(--os-cta) 10%, white);
  --os-secondary-light:  color-mix(in srgb, var(--os-secondary) 15%, white);
  --os-secondary-dark:   color-mix(in srgb, var(--os-secondary) 80%, black);
  --os-dive-light:       color-mix(in srgb, var(--os-dive) 8%, white);
  --os-dive-deep:        #132a3e;  /* Deep navy — dive page dark sections */

  /* ── Typography Scale ── */
  --os-text-xs:   0.75rem;    /* 12px */
  --os-text-sm:   0.875rem;   /* 14px */
  --os-text-base: 1rem;       /* 16px */
  --os-text-lg:   1.125rem;   /* 18px */
  --os-text-xl:   1.25rem;    /* 20px */
  --os-text-2xl:  1.5rem;     /* 24px */
  --os-text-3xl:  1.875rem;   /* 30px */
  --os-text-4xl:  2.5rem;     /* 40px */
  --os-text-5xl:  3.25rem;    /* 52px */

  /* ── Line Heights ── */
  --os-leading-tight:   1.2;
  --os-leading-snug:    1.3;
  --os-leading-normal:  1.55;
  --os-leading-relaxed: 1.65;

  /* ── Spacing Scale ── */
  --os-space-1:  0.25rem;   /* 4px */
  --os-space-2:  0.5rem;    /* 8px */
  --os-space-3:  0.75rem;   /* 12px */
  --os-space-4:  1rem;      /* 16px */
  --os-space-5:  1.25rem;   /* 20px */
  --os-space-6:  1.5rem;    /* 24px */
  --os-space-8:  2rem;      /* 32px */
  --os-space-10: 2.5rem;    /* 40px */
  --os-space-12: 3rem;      /* 48px */
  --os-space-16: 4rem;      /* 64px */
  --os-space-20: 5rem;      /* 80px */
  --os-space-24: 6rem;      /* 96px */

  /* ── Border Radius ── */
  --os-radius-sm:   4px;
  --os-radius-md:   8px;
  --os-radius-lg:   12px;
  --os-radius-xl:   16px;
  --os-radius-2xl:  24px;
  --os-radius-full: 9999px;

  /* ── Overlays ── */
  --os-hero-overlay: rgba(28, 46, 63, 0.85);

  /* ── Shadows ── */
  --os-shadow-sm:    0 1px 2px rgba(28, 46, 63, 0.05);
  --os-shadow-md:    0 4px 8px rgba(28, 46, 63, 0.08);
  --os-shadow-lg:    0 12px 24px rgba(28, 46, 63, 0.12);
  --os-shadow-card:  0 4px 20px -4px rgba(28, 46, 63, 0.10);
  --os-shadow-hover: 0 12px 32px -8px rgba(28, 46, 63, 0.12);

  /* ── Transitions ── */
  --os-transition-fast:   0.15s ease;
  --os-transition-normal: 0.25s ease;
  --os-transition-slow:   0.35s ease;
}