/* ============================================================
   Brand Design Tokens & Custom Properties
   ============================================================
   Tailwind utilities reference the -rgb triplet variants so that
   opacity modifiers (bg-brand-teal/20) work correctly.
   The hex variants are kept for direct usage in non-Tailwind CSS.
   ============================================================ */

:root {
    /* RGB triplets (space-separated for modern rgb() syntax) */
    --brand-black-rgb: 0 0 0;
    --brand-teal-rgb: 20 64 52;
    --brand-teal-dark-rgb: 15 45 38;
    --brand-white-rgb: 255 255 255;
    --brand-gold-rgb: 211 174 114;
    --brand-gold-dark-rgb: 184 148 92;

    /* Hex shortcuts for non-Tailwind usage */
    --brand-black: #000000;
    --brand-teal: #144034;
    --brand-teal-dark: #0f2d26;
    --brand-white: #FFFFFF;
    --brand-gold: #D3AE72;
    --brand-gold-dark: #b8945c;
}

/* ============================================================
   Alpine.js Cloak – hide elements until Alpine initializes
   ============================================================ */

[x-cloak] {
    display: none !important;
}

/* ============================================================
   Scrollbar polish (WebKit)
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}