/* =========================================================
   Six Oaks Events — Design Tokens & Style Profile
   Based on the official Six Oaks branding assets.
   ========================================================= */

:root {
  /* ---- Brand Colors ---- */
  --color-primary:          #102A24;  /* Deep Live Oak */
  --color-primary-hover:    #1D473D;  /* Moss Green */
  --color-secondary:        #C8A15A;  /* Marsh Gold */
  --color-secondary-hover:  #B68A3F;  /* Rich Gold */
  --color-accent:           #6E8E72;  /* Sea Grass */

  /* ---- Backgrounds ---- */
  --color-bg:               #F7F5F0;  /* Warm Ivory */
  --color-surface:          #FFFFFF;  /* White */
  --color-card:             #EFE8DC;  /* Soft Sand */
  --color-border:           #D8D0C3;  /* Driftwood */

  /* ---- Text ---- */
  --color-text-primary:     #1F2322;  /* Charcoal */
  --color-text-secondary:   #5F6664;  /* Slate */
  --color-text-on-dark:     #F7F5F0;  /* Warm Ivory on dark backgrounds */
  --color-text-on-primary:  #FFFFFF;  /* White text on primary green */

  /* ---- Semantic ---- */
  --color-success:          #2F7A4A;  /* Live Oak Green */
  --color-warning:          #D89A2F;  /* Amber */
  --color-error:            #B74C42;  /* Brick Red */
  --color-info:             #3E82A8;  /* Coastal Blue */

  /* ---- Typography ---- */
  --font-display:     'Playfair Display', 'Georgia', serif;
  --font-body:        'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:        'SF Mono', 'Fira Code', monospace;

  /* ---- Spacing Scale (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Border Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.15);

  /* ---- Layout ---- */
  --max-width:     480px;    /* Mobile-first max content width */
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --safe-top:      env(safe-area-inset-top, 0px);
  --nav-height:    64px;
  --header-height: 64px;

  /* ---- Transitions ---- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   350ms ease;
}

/* ---- Dark Variants (for headers, nav, overlays) ---- */
.bg-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.bg-surface {
  background-color: var(--color-surface);
}

.bg-card {
  background-color: var(--color-card);
}

/* ---- Gradients ---- */
.gradient-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, #0D1F1A 100%);
}

.gradient-gold {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
}

/* ---- Brand Accents ---- */
.brand-accent {
  color: var(--color-secondary);
}

.brand-accent-border {
  border-color: var(--color-secondary);
}

.brand-gold-text {
  background: linear-gradient(135deg, #C8A15A 0%, #B68A3F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Button Variants ---- */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}
.btn-secondary:hover {
  background-color: var(--color-secondary-hover);
}

/* ---- Toast Variants ---- */
.toast.success { background-color: var(--color-success); }
.toast.error   { background-color: var(--color-error); }
.toast.warning { background-color: var(--color-warning); }
.toast.info    { background-color: var(--color-info); }