/* ========================================
   COLOR VARIABLES - Semantic Naming
   ======================================== */

:root {
  /* Primary Colors */
  --color-primary: #BA6D4B;
  --color-primary-dark: #5A2C28;
  --color-primary-light: #F3C8A0;

  /* Secondary Colors */
  --color-secondary-mint: #B9DAD1;
  --color-secondary-blue: #B9C2DA;
  --color-secondary-purple: #C19EF5;
  --color-secondary-lime: #E1EAA9;

  /* Functional Colors */
  --color-bg-main: #F3C8A0;
  --color-bg-board: #B9DAD1;
  --color-bg-card: #E1EAA9;
  --color-bg-input: #B9DAD1;
  --color-bg-input-focus: #B9C2DA;
  --color-bg-button: #C19EF5;
  --color-bg-button-hover: #BA6D4B;

  --color-text-primary: #5A2C28;
  --color-text-button-hover: #F3C8A0;
  --color-border: #5A2C28;

  /* ========================================
     TYPOGRAPHY SIZES
     ======================================== */

  /* Header Sizes */
  --heading-h1: clamp(1.5rem, 4vw, 2rem);
  --heading-h1-tablet: clamp(1.25rem, 3vw, 1.75rem);
  --heading-h1-mobile: 1.25rem;
  --heading-h1-small: 1.1rem;

  --heading-h2: clamp(1.5rem, 4vw, 2rem);

  /* ========================================
     SPACING SIZES (XS, SM, MD, LG, XL)
     ======================================== */

  /* Extra Small - Minimal spacing */
  --size-xs: 0.25rem;
  --size-xs-padding: 0.4rem;
  --size-xs-gap: 0.15rem;

  /* Small - Compact spacing */
  --size-sm: 0.5rem;
  --size-sm-padding: 0.5rem;
  --size-sm-gap: 0.35rem;

  /* Medium - Default spacing */
  --size-md: 0.75rem;
  --size-md-padding: 0.6rem 0.75rem;
  --size-md-gap: 0.5rem;

  /* Large - Generous spacing */
  --size-lg: 1rem;
  --size-lg-padding: 1rem;
  --size-lg-gap: 0.75rem;

  /* Extra Large - Maximum spacing */
  --size-xl: 1.5rem;
  --size-xl-padding: 1.5rem;
  --size-xl-gap: 1rem;

  /* ========================================
     BORDER & RADIUS
     ======================================== */
  --border-width: 2px;
  --border-radius-sm: 8px;
  --border-radius-md: 10px;
  --border-radius-lg: 12px;

  /* ========================================
     FORM ELEMENTS
     ======================================== */
  --form-input-padding: 0.6rem 0.75rem;
  --form-input-border: var(--border-width) solid var(--color-border);
  --form-input-radius: var(--border-radius-md);

  --button-padding: 0.6rem 1rem;
  --button-border: var(--border-width) solid var(--color-border);
  --button-radius: var(--border-radius-sm);

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
}