/* ==========================================================================
   0. Cascade Layers Configuration & 1. CSS Custom Properties / Tokens
   ========================================================================== */
@layer reset, tokens, components, utilities, subpages;

/* --------------------------------------------------------------------------
   1. CSS Custom Properties / Tokens
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Brand Palette */
    --primary-teal: #0F4C47;
    --primary-teal-hover: color-mix(in srgb, var(--primary-teal) 85%, black);
    --primary-teal-light: #e8f4f3;
    --primary-teal-muted: #1e635e;

    --gold-primary: #C5A059;
    --gold-hover: color-mix(in srgb, var(--gold-primary) 85%, black);
    --gold-light: #f7f1e5;
    --gold-gradient: linear-gradient(135deg, #D4AF37 0%, #C5A059 100%);

    --navy-dark: #0B1B2B;
    --navy-darker: #06111d;
    --navy-card: #102438;

    /* Neutrals */
    --bg-white: #FFFFFF;
    --bg-light: #F8FBFB;
    --bg-surface: #F1F6F5;
    --bg-card: #FFFFFF;

    --text-dark: #1E293B;
    --text-muted: #64748B;
    --text-light: #94A3B8;
    --text-white: #FFFFFF;

    --border-light: #E2E8F0;
    --border-card: #EAEFF0;
    --border-focus: #0F4C47;

    /* Typography */
    --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(15, 76, 71, 0.04);
    --shadow-md: 0 6px 18px rgba(15, 76, 71, 0.08);
    --shadow-lg: 0 16px 36px rgba(11, 27, 43, 0.12);
    --shadow-floating: 0 12px 30px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Layout */
    --container-max: 1440px;
    --header-height: 84px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 9999px;
  }
}