/**
* CJ's Brew & BBQ - Recipe Form Brand Colors & Variables
* Core color palette and typography
* Updated: 2026-04-03 - Phase 0-2 audit complete
*/

/* Prevent layout shift when scrollbar appears/disappears on theme change */
html {
  scrollbar-gutter: stable;
}

:root {
/* =======================================
   DESIGN SYSTEM TOKENS (design-system.md)
   ======================================= */

/* Brand Colors */
--brand-primary: #FF5810; /* FTBBQ orange */
--brand-primary-dark: #CC4600; /* Darker orange for text/hover */

/* Neutrals (Dark Theme Base) */
--neutral-900: #101010; /* Near-black */
--neutral-800: #1F2937; /* Dark gray */
--neutral-700: #374151; /* Medium-dark gray */
--neutral-600: #4B5563; /* Medium gray */
--neutral-400: #9CA3AF; /* Light gray */
--neutral-200: #E5E7EB; /* Very light gray */
--neutral-100: #F3F4F6; /* Almost white */
--neutral-000: #FFFFFF; /* White */

/* Semantic Colors */
--success: #10B981; /* Green */
--warning: #F59E0B; /* Amber */
--error: #EF4444; /* Red */
--error-dark: #DC2626; /* Darker red for text (4.51:1 contrast) */
--info: #3B82F6; /* Blue */

/* =======================================
   DARK MODE TOKENS (design-system.md)
   ======================================= */

/* Dark Mode Backgrounds */
--dark-bg-primary: #0F0F0F;        /* Main page background (20.12:1 contrast with white) */
--dark-bg-secondary: #1A1A1A;      /* Cards, elevated surfaces (18.24:1) */
--dark-bg-tertiary: #262626;       /* Hover states, inputs (14.87:1) */
--dark-bg-quaternary: #333333;     /* Active states, borders (12.63:1) */

/* Dark Mode Text */
--dark-text-primary: #F5F5F5;      /* Body text, headings (19.21:1 on dark-bg-primary) */
--dark-text-secondary: #B3B3B3;    /* Meta info, captions (9.87:1) */
--dark-text-tertiary: #808080;     /* Disabled, placeholders (4.98:1) */
--dark-text-inverse: #0F0F0F;      /* Text on light surfaces */

/* Dark Mode Borders & Dividers */
--dark-border-subtle: #2A2A2A;     /* Subtle dividers (decorative only - 1.64:1) */
--dark-border-default: #404040;    /* Default borders (3.12:1 - WCAG PASS) */
--dark-border-strong: #595959;     /* Emphasized borders (4.89:1) */

/* Dark Mode Semantic Colors */
--dark-success: #10B981;           /* Same as light mode */
--dark-success-bg: #064E3B;        /* Success background (11.23:1) */
--dark-warning: #FBBF24;           /* Lighter variant (4.12:1) */
--dark-warning-bg: #78350F;        /* Warning background (9.56:1) */
--dark-error: #F87171;             /* Lighter red (4.82:1) */
--dark-error-dark: #DC2626;        /* Same as light */
--dark-error-bg: #7F1D1D;          /* Error background (13.47:1) */
--dark-info: #60A5FA;              /* Lighter blue (5.23:1) */
--dark-info-bg: #1E3A8A;           /* Info background (10.89:1) */

/* Neon Colors for Dark Mode Badges */
--neon-cyan: #33CBD3;              /* Cyan for BEGINNER */
--neon-cyan-bg: #142522;           /* Beginner background */
--neon-gold: #edb423;              /* Gold for INTERMEDIATE */
--neon-gold-bg: #2B2216;           /* Intermediate background */
--neon-coral: #FF6B6B;             /* Coral red for ADVANCED */
--neon-coral-bg: #331414;          /* Advanced background */
--neon-orange: #FF5810;            /* Brand orange for variations */
--neon-orange-bg: #2B1608;         /* Variation badge background */
--neon-orange-glow: rgba(255, 88, 16, 0.5); /* Glow color */
}

/* =======================================
   THEME-SPECIFIC SEMANTIC VARIABLES
   Components reference these (not hard-coded colors)
   ======================================= */

html.theme-light {
  --bg-primary: var(--neutral-000);
  --bg-secondary: var(--neutral-100);
  --bg-tertiary: var(--neutral-200);
  --bg-quaternary: var(--neutral-400);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-400);
  --text-inverse: var(--neutral-000);

  /* Semantic content tokens (consumed by homepage-features, blog, etc.) */
  --surface-card: var(--neutral-000);
  --text-heading: var(--neutral-900);
  --text-body: var(--neutral-700);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-400);
  --border-strong: var(--neutral-600);

  --success-color: var(--success);
  --success-bg-color: #D4EDDA;
  --warning-color: var(--warning);
  --warning-bg-color: #FFF3CD;
  --error-color: var(--error);
  --error-bg-color: #F8D7DA;
  --info-color: var(--info);
  --info-bg-color: #D1ECF1;
}

html.theme-light body {
  background: var(--neutral-000);
  color: var(--neutral-900);
}

html.theme-dark {
  --bg-primary: var(--dark-bg-primary);
  --bg-secondary: var(--dark-bg-secondary);
  --bg-tertiary: var(--dark-bg-tertiary);
  --bg-quaternary: var(--dark-bg-quaternary);

  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-tertiary: var(--dark-text-tertiary);
  --text-inverse: var(--dark-text-inverse);

  /* Semantic content tokens (mirror of theme-light values, dark variants) */
  --surface-card: var(--dark-bg-secondary);
  --dark-bg-card: var(--dark-bg-secondary); /* legacy alias used by homepage-features.css */
  --text-heading: var(--dark-text-primary);
  --text-body: var(--dark-text-secondary);

  --border-subtle: var(--dark-border-subtle);
  --border-default: var(--dark-border-default);
  --border-strong: var(--dark-border-strong);

  --success-color: var(--dark-success);
  --success-bg-color: var(--dark-success-bg);
  --warning-color: var(--dark-warning);
  --warning-bg-color: var(--dark-warning-bg);
  --error-color: var(--dark-error);
  --error-bg-color: var(--dark-error-bg);
  --info-color: var(--dark-info);
  --info-bg-color: var(--dark-info-bg);
}

html.theme-dark body {
  background: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

:root {
/* Typography Scale */
--font-heading: 'Saira Extra Condensed', sans-serif; /* Weight: 600, headings only */
--font-body: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Weight: 400, 500 */
--font-button: 'Work Sans', 'Rubik', sans-serif; /* Weight: 500, buttons only */
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Fallback */

--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.327rem; /* 21px */
--text-2xl: 1.76rem; /* 28px */
--text-3xl: 2.33rem; /* 37px */
--text-4xl: 3.09rem; /* 49px */

--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;

--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;

/* Spacing System (4px base) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */

/* Border Radius */
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-full: 9999px; /* Pills, avatars */

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

/* =======================================
   BACKWARD COMPATIBILITY ALIASES
   (Map legacy --cjbb-* variables to new tokens)
   ======================================= */

/* Brand Colors - Updated to Orange Theme */
--cjbb-primary: #FF5810; /* Maps to --brand-primary */
--cjbb-accent: #CC4600; /* Maps to --brand-primary-dark */
--cjbb-secondary: #f8f9fa; /* Light gray - secondary buttons */
--cjbb-danger: #EF4444; /* Maps to --error */
--cjbb-text: #101010; /* Maps to --neutral-900 */
--cjbb-text-muted: #4B5563; /* Maps to --neutral-600 */
--cjbb-bg-light: #F3F4F6; /* Maps to --neutral-100 */
--cjbb-bg-white: #FFFFFF; /* Maps to --neutral-000 */
--cjbb-border: #E5E7EB; /* Maps to --neutral-200 */
--cjbb-success: #10B981; /* Maps to --success */
--cjbb-error: #EF4444; /* Maps to --error */
--cjbb-warning: #F59E0B; /* Maps to --warning */

/* Typography - Updated to Saira Extra Condensed + Rubik + Work Sans */
--cjbb-font-headings: 'Saira Extra Condensed', sans-serif; /* Headings only */
--cjbb-font-body: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Body text, forms */
--cjbb-font-buttons: 'Work Sans', 'Rubik', sans-serif; /* Buttons - matches staging site */

--cjbb-font-size-sm: 0.75rem; /* Maps to --text-xs */
--cjbb-font-size-base: 1rem; /* Maps to --text-base */
--cjbb-font-size-lg: 1.125rem; /* Maps to --text-lg */
--cjbb-font-size-xl: 1.76rem; /* Maps to --text-2xl */

/* Spacing - Align with 4px base unit */
--cjbb-spacing-xs: 0.25rem; /* Maps to --space-1 */
--cjbb-spacing-sm: 0.5rem; /* Maps to --space-2 */
--cjbb-spacing-md: 1rem; /* Maps to --space-4 */
--cjbb-spacing-lg: 1.5rem; /* Maps to --space-6 */
--cjbb-spacing-xl: 2rem; /* Maps to --space-8 */

/* Border Radius - Updated to design system scale */
--cjbb-border-radius: 0.5rem; /* Maps to --radius-md (8px) */
--cjbb-border-radius-sm: 0.25rem; /* Maps to --radius-sm (4px) */
--cjbb-border-radius-lg: 0.75rem; /* Maps to --radius-lg (12px) */
--cjbb-radius: 0.5rem; /* Alias for --radius-md */
--cjbb-radius-lg: 0.75rem; /* Alias for --radius-lg */
}

/* Form Container */
.recipe-form-container {
max-width: 700px;
margin: 0 auto;
padding: var(--cjbb-spacing-lg);
}

.recipe-form-wrapper {
background: var(--cjbb-bg-white);
border: 1px solid var(--cjbb-border);
border-radius: var(--cjbb-radius-lg);
padding: var(--cjbb-spacing-xl);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Progress Indicator */
.recipe-form-progress {
margin-bottom: var(--cjbb-spacing-xl);
}

.progress-bar {
height: 4px;
background: var(--cjbb-bg-light);
border-radius: var(--cjbb-radius);
overflow: hidden;
margin-bottom: var(--cjbb-spacing-lg);
}

.progress-bar::after {
content: '';
display: block;
height: 100%;
background: linear-gradient(90deg, var(--cjbb-primary), var(--cjbb-accent));
width: 20%;
transition: width 0.3s ease;
}

.progress-steps {
display: flex;
justify-content: space-between;
text-align: center;
}

.progress-step {
font-size: var(--cjbb-font-size-sm);
color: #999;
font-weight: 500;
padding: var(--cjbb-spacing-sm);
cursor: default;
transition: all 0.3s ease;
position: relative;
}

/* Form Steps */
.form-step {
display: none;
}

.form-step.active {
display: block;
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.form-step h2 {
font-family: var(--cjbb-font-headings);
font-size: var(--cjbb-font-size-xl);
color: var(--cjbb-text);
margin: 0 0 var(--cjbb-spacing-sm) 0;
font-weight: 600;
}

.form-description {
color: #666;
font-size: var(--cjbb-font-size-base);
margin: 0 0 var(--cjbb-spacing-lg) 0;
}

/* Form Groups & Fields */
.form-group {
margin-bottom: var(--cjbb-spacing-lg);
}

.form-row {
display: flex;
gap: var(--cjbb-spacing-md);
margin-bottom: var(--cjbb-spacing-lg);
}

.form-col-half {
flex: 1;
}

.form-col-third {
flex: 1;
}

.form-col-25 {
flex: 0 0 25%;
}

.form-col-50 {
flex: 0 0 50%;
}

.form-col-remove {
flex: 0 0 auto;
}

label {
display: block;
font-family: var(--cjbb-font-headings);
font-size: var(--cjbb-font-size-base);
color: var(--cjbb-text);
margin-bottom: var(--cjbb-spacing-sm);
font-weight: 500;
}

.required {
color: var(--cjbb-error);
}

.help-text {
display: block;
font-size: var(--cjbb-font-size-sm);
color: #999;
margin-top: var(--cjbb-spacing-xs);
}

.form-control {
width: 100%;
padding: 12px 16px;
font-family: var(--cjbb-font-body);
font-size: var(--cjbb-font-size-base);
border: 2px solid var(--cjbb-border);
border-radius: 6px;
box-sizing: border-box;
transition: all 0.2s ease;
background: var(--cjbb-bg-white);
color: var(--cjbb-text);
}

.form-control:focus {
outline: none;
border-color: var(--cjbb-primary);
box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

.form-control.is-invalid {
border-color: var(--cjbb-error);
}

.form-control.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

textarea.form-control {
resize: vertical;
min-height: 100px;
}

select.form-control {
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 24px;
padding-right: 32px;
appearance: none;
}

.error-message {
display: none;
color: var(--cjbb-error);
font-size: var(--cjbb-font-size-sm);
margin-top: var(--cjbb-spacing-xs);
}

/* Buttons - Aligned with staging site (Work Sans, 0px radius, capitalize) */
.btn {
display: inline-block;
padding: 15px 25px;
font-family: var(--cjbb-font-buttons);
font-size: var(--cjbb-font-size-lg);
font-weight: 500;
text-align: center;
text-decoration: none;
text-transform: capitalize;
letter-spacing: -0.5px;
border: none;
border-radius: 0;
cursor: pointer;
transition: all 0.3s ease;
line-height: 1.2;
}

.btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:active {
transform: translateY(0);
}

.btn-primary {
background-color: var(--cjbb-primary); /* #FF5810 orange */
color: #ffffff;
}

.btn-primary:hover {
background-color: var(--cjbb-accent); /* #CC4600 orange-dark */
box-shadow: 0 4px 12px rgba(255, 88, 16, 0.3);
}

.btn-secondary {
background-color: var(--cjbb-secondary); /* #f8f9fa */
color: var(--cjbb-text);
border: 2px solid var(--cjbb-border);
}

.btn-secondary:hover {
background-color: var(--bg-tertiary);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-success {
background-color: var(--cjbb-success);
color: #ffffff;
}

.btn-success:hover {
background-color: #229954;
}

.btn-danger {
background-color: var(--cjbb-danger);
color: #ffffff;
}

.btn-danger:hover {
background-color: #c0392b;
}

.btn-sm {
padding: 6px 12px;
font-size: var(--cjbb-font-size-sm);
}

/* Form Navigation */
.form-navigation {
display: flex;
gap: var(--cjbb-spacing-md);
justify-content: space-between;
margin-top: var(--cjbb-spacing-xl);
border-top: 1px solid var(--cjbb-border);
padding-top: var(--cjbb-spacing-lg);
}

/* Recipe Preview */
.recipe-preview {
background: var(--cjbb-bg-light);
padding: var(--cjbb-spacing-lg);
border-radius: var(--cjbb-radius-lg);
}

.preview-section {
margin-bottom: var(--cjbb-spacing-lg);
}

.preview-section h3,
.preview-section h4 {
font-family: var(--cjbb-font-headings);
color: var(--cjbb-text);
margin: 0 0 var(--cjbb-spacing-md) 0;
}

.preview-section h4 {
font-size: var(--cjbb-font-size-lg);
}

.preview-section ul,
.preview-section ol {
padding-left: var(--cjbb-spacing-lg);
color: var(--cjbb-text);
}

.preview-section li {
margin-bottom: var(--cjbb-spacing-sm);
}

/* Messages */
.form-message {
padding: var(--cjbb-spacing-md) var(--cjbb-spacing-lg);
border-radius: var(--cjbb-radius-lg);
margin: var(--cjbb-spacing-lg) 0;
}

.form-message.success {
background: #D4EDDA;
color: #155724;
border: 1px solid #C3E6CB;
}

.form-message.error {
background: #F8D7DA;
color: #721C24;
border: 1px solid #F5C6CB;
}

/* Responsive */
@media (max-width: 768px) {
.recipe-form-container {
padding: var(--cjbb-spacing-md);
}

.recipe-form-wrapper {
padding: var(--cjbb-spacing-lg);
}

.form-row {
flex-direction: column;
gap: 0;
}

.form-col-half,
.form-col-third {
flex: 1 1 100%;
}

.progress-steps {
flex-wrap: wrap;
gap: var(--cjbb-spacing-sm);
}

.progress-step {
flex: 1 1 45%;
min-width: 80px;
}

.form-navigation {
flex-direction: column;
}

.btn {
width: 100%;
}
}