/* ============================================
   U-Clinic Design Tokens — v5 Landing Page
   Generated from brand.json + 02-research.json
   ============================================ */

/* --- Font Faces --- */
@font-face {
  font-family: 'FbReformaNarrow';
  src: url('../fonts/FbReformaNarrow-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FbReformaNarrow';
  src: url('../fonts/FbReformaNarrow-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FbReformaNarrow';
  src: url('../fonts/FbReformaNarrow-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FbReformaNarrow';
  src: url('../fonts/FbReformaNarrow-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Root Tokens --- */
:root {
  /* Colors — Brand */
  --color-primary: #4ab8a4;
  --color-primary-light: #6fd4c2;
  --color-primary-dark: #3a9484;
  --color-primary-10: rgba(74, 184, 164, 0.1);
  --color-primary-20: rgba(74, 184, 164, 0.2);
  --color-primary-50: rgba(74, 184, 164, 0.5);

  --color-secondary: #202e52;
  --color-secondary-light: #2c3f6e;
  --color-secondary-dark: #161f38;
  --color-secondary-10: rgba(32, 46, 82, 0.1);
  --color-secondary-20: rgba(32, 46, 82, 0.2);

  /* Colors — Neutral */
  --color-text: #070707;
  --color-text-secondary: #242838;
  --color-text-muted: #4b5563;
  --color-text-on-primary: #ffffff;
  --color-text-on-secondary: #ffffff;

  --color-bg: #ffffff;
  --color-surface: #F5F7FA;
  --color-surface-alt: #EEF2F6;
  --color-border: #e5e7eb;
  --color-border-light: #f0f0f0;

  /* Colors — Semantic */
  --color-success: #4ab8a4;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Colors — Gradients */
  --gradient-hero: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 60%, #1a1a3e 100%);
  --gradient-cta: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-overlay: linear-gradient(to bottom, rgba(32,46,82,0.85) 0%, rgba(32,46,82,0.6) 50%, rgba(32,46,82,0.85) 100%);

  /* Typography */
  --font-hebrew: 'FbReformaNarrow', Arial, sans-serif;
  --font-english: 'Brandon Grotesque', 'Segoe UI', Arial, sans-serif;
  --font-body: var(--font-hebrew);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-xs: 0.9375rem;   /* 15px (was 13px) */
  --fs-sm: 1.0625rem;   /* 17px (was 15px) */
  --fs-base: 1.1875rem; /* 19px (was 17px) */
  --fs-md: 1.3125rem;   /* 21px (was 18px) */
  --fs-lg: 1.4375rem;   /* 23px (was 20px) */
  --fs-xl: 1.625rem;    /* 26px (was 24px) */
  --fs-2xl: 2.125rem;   /* 34px (was 32px) */
  --fs-3xl: 2.75rem;    /* 44px (was 40px) */
  --fs-4xl: 3.25rem;    /* 52px (was 48px) */
  --fs-5xl: 4rem;       /* 64px (was 60px) */
  --fs-hero: clamp(2.75rem, 5.5vw, 4.25rem);

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  --lh-loose: 2;

  /* 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 */
  --space-3xl: 4rem;    /* 64px */
  --space-4xl: 6rem;    /* 96px */
  --space-section: clamp(3rem, 6vw, 6rem);

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --max-width-wide: 1440px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 50px rgba(0,0,0,0.15);
  --shadow-glow: 0 0 30px var(--color-primary-20);
  --shadow-card: 0 4px 20px rgba(32,46,82,0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale */
  --z-base: 0;
  --z-above: 10;
  --z-nav: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 1000;

  /* Glass effect */
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(16px);
}

/* --- Dark sections override --- */
[data-theme="dark"] {
  --color-text: #f0f0f0;
  --color-text-secondary: #b0b8c8;
  --color-bg: var(--color-secondary);
  --color-surface: var(--color-secondary-light);
  --color-border: rgba(255,255,255,0.1);
}

/* --- Mobile font size boost --- */
@media (max-width: 767px) {
  :root {
    --fs-xs: 1rem;        /* 16px — Hebrew minimum on mobile */
    --fs-sm: 1.125rem;    /* 18px */
    --fs-base: 1.1875rem; /* 19px */
    --fs-md: 1.3125rem;   /* 21px */
    --fs-lg: 1.4375rem;   /* 23px */
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-spring: 0ms;
  }
}