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

/* Light Mode Colors (Default) */
:root:not([data-theme='dark']) {
  /* Primary Colors - Light Mode */
  --color-primary: #BA6D4B;
  --color-primary-dark: #5A2C28;
  --color-primary-light: #F3C8A0;

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

  /* Functional Colors - Light Mode */
  --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: #ba4ba7;

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

/* Dark Mode Colors */
:root[data-theme='dark'] {
  /* Primary Colors - Dark Mode */
  --color-primary: #1a3a52;
  --color-primary-dark: #0f1f2e;
  --color-primary-light: #2d5a7b;

  /* Secondary Colors - Dark Mode */
  --color-secondary-mint: #4a7c7c;
  --color-secondary-blue: #5a6fa5;
  --color-secondary-purple: #7d5fa8;
  --color-secondary-lime: #6b8e23;

  /* Functional Colors - Dark Mode */
  --color-bg-main: #1a2f47;
  --color-bg-board: #2d5a7b;
  --color-bg-card: #3d4e63;
  --color-bg-input: #2d4a6f;
  --color-bg-input-focus: #3d5a8f;
  --color-bg-button: #5a7da5;
  --color-bg-button-hover: #7a9dc5;

  --color-text-primary: #e8f0f8;
  --color-text-button-hover: #ffffff;
  --color-border: #4a7c9c;
}

:root {

  /* ========================================
     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);
}