/* ==========================================================================
   COSTA WEBSITE - DESIGN TOKENS (Single Source of Truth)
   Phase 7 - Design System v1.0

   Rules:
   - Additive only, loaded EARLY (before default.css / custom.css /
     global-premium.css / promo-visibility.css /
     product-validation.css) so it never overrides an existing rule - this
     file only introduces NEW --costa-* variables.
   - Existing --gp-* / --promo-* / --wc-* / --pv-* variables are left
     untouched in this phase. They are NOT aliased to --costa-* yet because
     several already load in unpredictable order relative to each other;
     forcing an alias here risks flipping computed values on live pages.
     See DESIGN_SYSTEM.md "Migration Priority" for the planned, page-by-page
     consolidation (Phase 7.x) once each page's cascade has been verified.
   - Canonical gold is #b8874f (matches --gp-gold / --wc-brand). The
     --promo-gold drift (#b8903f) and star-rating gold (#f5a623) are kept as
     distinct tokens below since they audit as intentionally different
     usages (promo badge vs. rating stars) until confirmed otherwise.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Color - Brand & Neutral
     --------------------------------------------------------------------- */
  --costa-gold: #b8874f;
  --costa-gold-soft: #d9b98c;
  --costa-gold-promo: #b8903f;
  --costa-gold-star: #f5a623;

  --costa-ink: #14151a;
  --costa-ink-soft: #565b66;
  --costa-ink-deep: #0f172a;     /* Phase 7.2 - deepest text (29 combined hits) */
  --costa-hairline: #e8e9ee;
  --costa-divider: #cbd5e1;      /* Phase 7.2 - stronger divider/border (23 combined hits) */
  --costa-cream: #faf8f4;
  --costa-paper: #ffffff;
  --costa-surface: #f8fafc;
  --costa-surface-mid: #f1f5f9;  /* Phase 7.2 - mid-light surface (22 combined hits) */

  /* ---------------------------------------------------------------------
     Color - Semantic
     --------------------------------------------------------------------- */
  --costa-primary: var(--costa-gold);
  --costa-primary-hover: #a3773f;
  --costa-primary-active: #8f6636;
  --costa-secondary: var(--costa-ink);
  --costa-success: #3f8a51;
  --costa-warning: #f2a900;
  --costa-danger: #e11d2e;
  --costa-info: #1d4ed8;

  /* ---------------------------------------------------------------------
     Color - Text / Link / Overlay
     --------------------------------------------------------------------- */
  --costa-text-primary: var(--costa-ink);
  --costa-text-secondary: var(--costa-ink-soft);
  --costa-text-disabled: #a3a6b0;
  --costa-link: #1d4ed8;
  --costa-overlay: rgba(15, 16, 20, 0.55);

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --costa-font-family: "DM Sans", "Plus Jakarta Sans", "Poppins", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --costa-text-display: 3rem;
  --costa-text-h1: 2.25rem;
  --costa-text-h2: 1.75rem;
  --costa-text-h3: 1.375rem;
  --costa-text-title: 1.125rem;
  --costa-text-subtitle: 1rem;
  --costa-text-body: 1rem;
  --costa-text-body-sm: 0.875rem;
  --costa-text-caption: 0.75rem;
  --costa-text-label: 0.8125rem;
  --costa-text-button: 0.9375rem;
  /* Phase 7.2 - Extended font-size scale (fills gaps found in audit) */
  --costa-text-base-lg: 1.05rem;   /* 16.8px - slightly expanded subtitle (15 hits) */
  --costa-text-base-sm: 0.9rem;    /* 14.4px - compact body text (22 combined hits) */
  --costa-text-sm: 0.82rem;        /* 13.12px - small secondary text */
  --costa-text-xs2: 0.78rem;       /* 12.48px - micro UI labels (40 combined hits) */
  --costa-text-xs: 0.72rem;        /* 11.52px - extra-small tags/badges (17 hits) */

  /* ---------------------------------------------------------------------
     Spacing scale (4px base)
     --------------------------------------------------------------------- */
  --costa-space-1: 4px;
  --costa-space-2: 8px;
  --costa-space-3: 12px;
  --costa-space-4: 16px;
  --costa-space-5: 24px;
  --costa-space-6: 32px;
  --costa-space-7: 48px;
  --costa-space-8: 64px;
  /* Phase 7.2 - T-shirt supplement (fills frequent gaps between numbered steps) */
  --costa-space-xs: 6px;     /* micro gap (96 combined hits) */
  --costa-space-sm: 10px;    /* small inset (193 combined hits - largest gap) */
  --costa-space-md: 14px;    /* medium inset (104 combined hits) */
  --costa-space-lg: 20px;    /* large gap (97 hits - fills web scale gap between 16/24) */
  --costa-space-xl: 28px;    /* xlarge gap (45 hits - fills web scale gap between 24/32) */
  --costa-space-2xl: 40px;   /* section spacing (47 combined hits) */
  --costa-space-3xl: 60px;   /* wide section spacing (26 combined hits) */

  /* ---------------------------------------------------------------------
     Radius
     --------------------------------------------------------------------- */
  --costa-radius-xs: 6px;     /* Phase 7.2 - tight-radius chips/tags (8 combined hits) */
  --costa-radius-sm: 10px;
  --costa-radius-md: 14px;
  --costa-radius-lg: 20px;
  --costa-radius-xl: 28px;
  --costa-radius-round: 999px;
  --costa-radius-circle: 50%; /* Phase 7.2 - circular avatars/icons (35 combined hits) */

  /* ---------------------------------------------------------------------
     Border
     --------------------------------------------------------------------- */
  --costa-border-width: 1px;
  --costa-border-width-lg: 2px;
  --costa-border-color: var(--costa-hairline);
  --costa-border-color-strong: var(--costa-ink-soft);

  /* ---------------------------------------------------------------------
     Shadow
     --------------------------------------------------------------------- */
  --costa-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --costa-shadow-sm: 0 2px 6px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.05);
  --costa-shadow-md: 0 10px 24px rgba(16, 24, 40, 0.09), 0 2px 6px rgba(16, 24, 40, 0.06);
  --costa-shadow-lg: 0 24px 48px rgba(16, 24, 40, 0.14), 0 8px 16px rgba(16, 24, 40, 0.08);
  --costa-shadow-dropdown: 0 12px 30px -8px rgba(0, 0, 0, 0.35);
  --costa-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.25);

  /* ---------------------------------------------------------------------
     Opacity
     --------------------------------------------------------------------- */
  --costa-opacity-disabled: 0.5;
  --costa-opacity-hover: 0.08;
  --costa-opacity-overlay: 0.55;

  /* ---------------------------------------------------------------------
     Motion / Transition
     --------------------------------------------------------------------- */
  --costa-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --costa-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --costa-dur-fast: 200ms;
  --costa-dur: 280ms;
  --costa-dur-slow: 400ms;
  --costa-transition-base: all var(--costa-dur) var(--costa-ease);

  /* ---------------------------------------------------------------------
     Elevation
     --------------------------------------------------------------------- */
  --costa-elevation-card: 1;
  --costa-elevation-dropdown: 2;
  --costa-elevation-header: 3;
  --costa-elevation-modal: 4;
  --costa-elevation-toast: 5;

  /* ---------------------------------------------------------------------
     Breakpoints - documentation constants (Bootstrap-aligned, matches
     existing responsive.css assumptions). Not usable directly inside
     @media (custom properties aren't supported there); kept for reference
     and JS matchMedia usage.
     --------------------------------------------------------------------- */
  --costa-bp-xs: 0px;
  --costa-bp-sm: 576px;
  --costa-bp-md: 768px;
  --costa-bp-lg: 992px;
  --costa-bp-xl: 1200px;

  /* ---------------------------------------------------------------------
     Z-index - reference scale for first-party overlays. Third-party
     widgets (SweetAlert2, fancybox, meanmenu) manage their own stacking
     and are NOT reassigned here.
     --------------------------------------------------------------------- */
  --costa-z-dropdown: 1000;
  --costa-z-sticky: 1020;
  --costa-z-header: 1030;
  --costa-z-drawer: 1040;
  --costa-z-modal: 1050;
  --costa-z-toast: 1060;
  --costa-z-tooltip: 1070;
}