/**
 * J. SADEG - Design Tokens
 * Strictly using only the user-specified brand colors:
 * - Background: #ECF1FF
 * - Text / Dark: #391224
 * - Main: #22B573
 * - Secondary Cyan: #3EA2BE
 * - Secondary Pink: #C859B0
 */

:root {
  /* Strictly allowed colors */
  --color-bg: #ECF1FF;
  --color-dark: #391224;
  --color-text: #391224;
  --color-main: #22B573;
  --color-secondary-cyan: #3EA2BE;
  --color-secondary-pink: #C859B0;
  --color-active: #C859B0;
  --color-hover: #3E62BE;

  /* Typography */
  --font-family-base: 'ABeeZee', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --font-size-h1: clamp(2.5rem, 5vw + 1rem, 4.25rem);      /* ~68px on desktop */
  --font-size-h3: clamp(1.35rem, 2.5vw + 0.5rem, 2.4rem);   /* ~38.5px on desktop */
  --font-size-h4: clamp(1.15rem, 1.8vw + 0.2rem, 1.875rem); /* ~30px */
  --font-size-nav: 1.125rem;                                /* 18px standard navbar */
  --font-size-btn: 1.25rem;                                 /* 20px */
  --font-size-body: 1rem;                                   /* 16px */
  --font-size-tag: 0.95rem;                                 /* ~15px */

  --font-weight-regular: 400;

  --line-height-tight: 1.15;
  --line-height-normal: 1.4;
  --line-height-loose: 1.6;

  /* Corner Radii */
  --radius-card: 10px;
  --radius-btn: 14px;
  --radius-tag: 8px;
  --radius-circle: 50%;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 80px;

  --container-max-width: 1600px;
  --content-padding-x: clamp(1.25rem, 5vw, 5rem);

  /* Shadows */
  --shadow-card: 0px 4px 4px 0px rgba(57, 18, 36, 0.25);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease-in-out;

  /* Focus ring */
  --focus-ring: 3px solid var(--color-secondary-pink);
  --focus-offset: 3px;
}