/* ========================================
   HTBY BRAND DESIGN SYSTEM - FOUNDATION
   ========================================
   
   PURPOSE:
   This file contains the core design tokens (colors, typography, spacing, etc.)
   that form the foundation of the HTBY brand identity. These are pure values
   that don't reference any specific context or use case.
   
   STRUCTURE:
   - Colors (brand palette)
   - Typography (sizes, weights, line-heights)
   - Spacing (consistent rhythm)
   - Borders (widths, radii - but NOT application-specific borders)
   - Shadows
   - Transitions
   - Layout constraints
   
   USAGE:
   These variables should be referenced by web-variables.css and component-specific
   CSS files. Think of these as your design system's "atoms" - the smallest
   building blocks that everything else is built from.
   
   FUTURE:
   When migrating to how-to-brand-you-4 theme, this file should be copied first
   as it establishes the design foundation that all other CSS depends on.
   
   ======================================== */
   
   /* Site-wide content width: 1024px (Tailwind max-w-5xl) Stored here with Claude 2025-11-20 */

:root {


  /* === BRAND COLORS === */
  
  /* Primary Colors */
  --color-htby-red: #FF494E;
  --color-htby-red-hover: #E20006;
  --color-htby-blue: #00BAD1;
  --color-htby-yellow: #FFA200;
  
  /* Green (Accessible) */
  --color-htby-green: #637f20;
  --color-htby-green-dark: #4a5f18;
  --color-htby-green-light: #88AC2E;  /* Legacy, kept for reference */
  --color-htby-green-tint: #EDF1DC;
  
  /* Neutrals */
  --color-htby-text: #333333;
  --color-htby-text-light: #666666;
  --color-htby-light: #f8faf3;
  --color-htby-border: #e2e8f0;
  --color-htby-border-dark: #cbd5e0;
  
  /* Semantic Colors (for forms, states, etc.) */
  --color-success: var(--color-htby-green);
  --color-info: var(--color-htby-blue);
  --color-warning: var(--color-htby-yellow);
  --color-error: var(--color-htby-red);
  
  /* === TYPOGRAPHY === */
  --font-size-h1: 2.5rem;      /* 40px */
  --font-size-h2: 1.875rem;    /* 30px */
  --font-size-h3: 1.5rem;      /* 24px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-small: 0.875rem; /* 14px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* === TYPOGRAPHY - HEADING SIZES === */

    /* Page-level headings (H1) */
    --font-size-page-title: 2.5rem;    /* Main page titles */
    
    /* Section-level headings (H2, legends) */
    --font-size-section-heading: 1.75rem;  /* Container/section headings */
    
    /* Sub-section headings (H3) */
    --font-size-subsection-heading: 1.25rem;  /* Future use if needed */

  
  
  /* === SPACING === */
  --spacing-xs: 0.5rem;      /* 8px */
  --spacing-sm: 0.75rem;     /* 12px */
  --spacing-md: 1rem;        /* 16px */
  --spacing-lg: 1.25rem;     /* 20px */
  --spacing-xl: 1.5rem;      /* 24px */
  --spacing-2xl: 2rem;       /* 32px */
  --spacing-3xl: 2.5rem;     /* 40px */
  
  /* Semantic Spacing */
  --spacing-section: var(--spacing-lg);      /* 20px - internal padding */
  --spacing-container: var(--spacing-3xl);   /* 40px - between sections */
  
  /* === BORDERS === */
  
  /* Border Widths */
  --border-width-thin: 1px;
  --border-width-standard: 2px;
  --border-width-thick: 3px;
  
  /* Border Radii */
  --border-radius-sm: 0.25rem;  /* 4px */
  --border-radius: 0.5rem;      /* 8px */
  --border-radius-lg: 0.75rem;  /* 12px */
  --border-radius-xl: 1rem;     /* 16px */
  
  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* === TRANSITIONS === */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  /* === LAYOUT === */
  --max-width-content: 1200px;
  --max-width-narrow: 800px;
  --max-width-wide: 1400px;
}

/* === RESPONSIVE BREAKPOINTS (for reference in media queries) === */
/* 
  Mobile:  < 640px
  Tablet:  640px - 1024px  
  Desktop: > 1024px
*/