/*
  CSS Custom Properties (Variables)
  Central configuration for colors, typography, spacing, and breakpoints
*/

:root {
  /* ============================================
     COLOR SYSTEM
     ============================================ */

  /* Background colors */
  --color-bg-primary: #FCF9F8;

  /* Text colors */
  --color-text-primary: #000000;
  --color-text-secondary: #7B6D6D;
  --color-text-tertiary: #B9AFAF;
  --color-caption: #7B6D6D;  /* Caption/monospace text color */

  /* Accent colors */
  --color-accent: #B9AFAF;
  --color-link-underline: #B9AFAF;
  --color-success: #8FBF4D;  /* Green for active/success states */
  --color-neutral: #B9AFAF; /* Gray for inactive/neutral states */


  /* ============================================
     TYPOGRAPHY SYSTEM
     ============================================ */

  /* Font families */
  --font-body: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-caption: 'Geist Mono', 'Courier New', monospace;

  /* Base font size: 15px = 0.9375rem (assuming 16px base) */
  --font-size-base: 0.9375rem;

  /* Font sizes - using rem for scalability */
  --font-size-xs: 0.688rem;      /* 11px */
  --font-size-sm: 0.8125rem;    /* 13px */
  --font-size-md: 0.9375rem;    /* 15px - base */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-2xl: 2rem;        /* 32px */

  /* Line heights - relative to font size */
  --line-height-base: 1.467;    /* 22px / 15px */
  --line-height-tight: 1.2;
  --line-height-relaxed: 1.6;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;


  /* ============================================
     SPACING SYSTEM
     ============================================ */

  /* Grid spacing */
  --grid-margin: 8px;
  --grid-gutter: 8px;

  /* Component spacing */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */

  /* Card padding */
  --card-padding: 1.5rem; /* 24px */
  --card-padding-sm: 1rem; /* 16px */


  /* ============================================
     LAYOUT SYSTEM
     ============================================ */

  /* Grid columns */
  --grid-columns-desktop: 4;
  --grid-columns-tablet: 3;
  --grid-columns-mobile: 1;

  /* Grid rows - viewport height based */
  --grid-rows: 3;

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


  /* ============================================
     BREAKPOINTS
     ============================================ */

  /* Note: These are used in media queries and cannot be used directly */
  /* Documented here for reference */
  /* Mobile: < 768px */
  /* Tablet: 768px - 1024px */
  /* Desktop: > 1024px */


  /* ============================================
     TRANSITIONS
     ============================================ */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}