/**
 * B9 Golf Design System - Color Variables
 * Global CSS custom properties for consistent theming
 */

:root {
    /* ========================================
     Core Colors
     ======================================== */

    /* Golf White */
    --b9-white: #ffffff;

    /* Text (Dark) */
    --b9-text-dark: #121a22;

    /* Ebony (Dark) */
    --b9-ebony: #111921;
    --b9-ebony-400: #263849;
    --b9-ebony-300: #3b5771;
    --b9-ebony-200: #c1d0df;
    --b9-ebony-100: #e9eff4;

    /* B9 Green (Primary) */
    --b9-green: #96cb39;
    --b9-green-300: #b0d869;
    --b9-green-200: #cae59a;
    --b9-green-100: #e4f2cb;
    --b9-green-50: #fdfefc;

    /* Green Extended */
    --b9-green-500: #77a22b;
    --b9-green-600: #597a1f;
    --b9-green-700: #3d5512;

    --b9-primary-color: var(--b9-green);
    --b9-primary-hover: var(--b9-green-500);

    /* Clubhouse Charcoal */
    --b9-charcoal: #57514e;
    --b9-charcoal-300: #7c736f;
    --b9-charcoal-200: #a29893;
    --b9-charcoal-100: #c7bfba;
    --b9-charcoal-50: #eae8e6;
    --b9-charcoal-50-rgb: 234, 232, 230; /* RGB values for opacity usage */

    /* Heritage Brown */
    --b9-brown: #8f7657;
    --b9-brown-300: #ac9477;
    --b9-brown-200: #c3b29d;
    --b9-brown-100: #dad0c3;
    --b9-brown-50: #f1eee9;

    /* ========================================
     Greys
     ======================================== */

    --b9-grey-600: #3e444a;
    --b9-grey-500: #6a6f74;
    --b9-grey-400: #989b9e;
    --b9-grey-300: #c4c6c8;
    --b9-grey-200: #dadbdb;
    --b9-grey-100: #ececed;
    --b9-grey-50: #f4f4f4;

    /* ========================================
     Semantic Colors
     ======================================== */

    /* Background */
    --b9-bg-primary: var(--b9-white);
    --b9-bg-secondary: rgba(var(--b9-charcoal-50-rgb), 0.6); /* 60% opacity */
    --b9-bg-tertiary: var(--b9-charcoal-50);

    /* Content/Text */
    --b9-content-primary: var(--b9-ebony);
    --b9-content-secondary: var(--b9-charcoal);
    --b9-content-tertiary: var(--b9-charcoal-200);

    /* Border */
    --b9-border-opaque: var(--b9-charcoal-50);
    --b9-border-transparent: rgba(
        var(--b9-charcoal-50-rgb),
        0.6
    ); /* 60% opacity */
    --b9-border-selected: var(--b9-ebony);
}