/**
 * SF Beer Week Design System - Design Tokens
 * Authentic SF Beer Week visual identity and color system
 */

:root {
    /* SF Beer Week Brand Colors */
    --sfbw-background: #d7ccc3;
    --sfbw-text: #111;
    --sfbw-charcoal: #55575B;
    --sfbw-gold: #EEA31B;          /* Primary brand gold - rgb(238, 163, 27) */
    --sfbw-orange: #d99317;        /* Darker gold for hover states */
    --sfbw-action: rgb(197, 49, 23);  /* Action red for CTAs like Buy Tickets */
    --sfbw-action-hover: rgb(167, 42, 20);  /* Darker action for hover states */
    --sfbw-border: #EEA31B;

    /* Regional Color System */
    --sfbw-sf: #EEA31B;          /* San Francisco - Gold (primary brand) */
    --sfbw-north-bay: #a3a983;   /* North Bay - Sage Green */
    --sfbw-east-bay: #af95a6;    /* East Bay - Dusty Rose */
    --sfbw-south-bay: #e08433;   /* South Bay - Orange */
    --sfbw-coastal: #91b6bb;     /* Coastal - Teal */
    
    /* Supporting Grays */
    --sfbw-gray: #54565a;
    --sfbw-lightgray: #55575b;
    --sfbw-darkgray: #444649;
    
    /* Typography */
    --sfbw-font-family: "brandon-grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sfbw-font-size-base: 18px;
    --sfbw-font-weight-normal: 400;
    --sfbw-font-weight-medium: 500;
    --sfbw-font-weight-semibold: 600;
    --sfbw-line-height-base: 1.6rem;
    
    /* Layout */
    --sfbw-container-max-width: 1200px;
    --sfbw-border-radius: 0.375rem;
    --sfbw-transition: all 0.3s ease;
}

/* Regional Border Colors for Cards - DISABLED (not in original SF Beer Week design) */
/*
.region-sf .card-body {
    border-left: 4px solid var(--sfbw-sf) !important;
}

.region-nb .card-body {
    border-left: 4px solid var(--sfbw-north-bay) !important;
}

.region-eb .card-body {
    border-left: 4px solid var(--sfbw-east-bay) !important;
}

.region-sv .card-body {
    border-left: 4px solid var(--sfbw-south-bay) !important;
}

.region-co .card-body {
    border-left: 4px solid var(--sfbw-coastal) !important;
}
*/

/* Background Color Classes */
.bg-gold { background-color: var(--sfbw-gold); }
.bg-green { background-color: var(--sfbw-north-bay); }
.bg-blue { background-color: var(--sfbw-coastal); }
.bg-orange { background-color: var(--sfbw-orange); }
.bg-purple { background-color: var(--sfbw-east-bay); }
.bg-gray { background-color: var(--sfbw-gray); }
.bg-lightgray { background-color: var(--sfbw-lightgray); }
.bg-darkgray { background-color: var(--sfbw-darkgray); }

/* Text Color Classes */
.text-gold { color: var(--sfbw-gold); }
.text-green { color: var(--sfbw-north-bay); }
.text-blue { color: var(--sfbw-coastal); }
.text-orange { color: var(--sfbw-orange); }
.text-purple { color: var(--sfbw-east-bay); }
.text-gray { color: var(--sfbw-gray); }
.text-lightgray { color: var(--sfbw-lightgray); }
.text-darkgray { color: var(--sfbw-darkgray); }

/* Button Color Classes */
.btn-gold { background-color: var(--sfbw-gold); border-color: var(--sfbw-gold); color: #fff; }
.btn-green { background-color: var(--sfbw-north-bay); border-color: var(--sfbw-north-bay); color: #fff; }
.btn-blue { background-color: var(--sfbw-coastal); border-color: var(--sfbw-coastal); color: #fff; }
.btn-orange { background-color: var(--sfbw-orange); border-color: var(--sfbw-orange); color: #fff; }
.btn-purple { background-color: var(--sfbw-east-bay); border-color: var(--sfbw-east-bay); color: #fff; }

/* Action Button - use with btn-primary to override to red background */
.btn-action
{
	background-color: var(--sfbw-action) !important;
	border-color: var(--sfbw-action) !important;
}

.btn-action:hover
{
	background-color: var(--sfbw-action-hover) !important;
	border-color: var(--sfbw-action-hover) !important;
	box-shadow: 0 4px 12px rgba(197, 49, 23, 0.3);
}