/**
 * Club Diabetes Design System - CSS Variables
 * Version: 1.0.0
 * Last Update: 2026-02-05
 *
 * Design tokens based on Figma specifications
 * Font: Noto Sans Hebrew via Google Fonts CDN
 */

:root {
  /* ============================================
   * PRIMARY COLORS - Green Palette (from Figma)
   * Main brand color: --color-primary-700 (#287535)
   * ============================================ */
  --color-primary-50: #F8FFF9;   /* Lightest - backgrounds */
  --color-primary-100: #E8F5E9;  /* Very light */
  --color-primary-200: #C6EEBC;  /* Light - Figma: Goku */
  --color-primary-300: #A5D99A;  /* Light-medium */
  --color-primary-400: #7FCB2A;  /* Medium bright - Figma: Piccolo bright */
  --color-primary-500: #4CAF50;  /* Medium */
  --color-primary-600: #3D9142;  /* Medium-dark */
  --color-primary-700: #287535;  /* Main brand green - Figma: Piccolo */
  --color-primary-800: #1E5928;  /* Dark */
  --color-primary-900: #143D1B;  /* Darkest */

  /* ============================================
   * SECONDARY COLORS - Orange Accent (from Figma)
   * ============================================ */
  --color-secondary-50: #FFFDF2;   /* Lightest - Figma: cream */
  --color-secondary-100: #FFF3D9;  /* Very light */
  --color-secondary-200: #FFE5B0;  /* Light */
  --color-secondary-300: #FFD080;  /* Light-medium */
  --color-secondary-400: #FFBA50;  /* Medium */
  --color-secondary-500: #F68714;  /* Main accent - Figma: Hit */
  --color-secondary-600: #E07810;  /* Hover state */
  --color-secondary-700: #C5680D;  /* Dark */
  --color-secondary-800: #A55609;  /* Darker */
  --color-secondary-900: #7A3F06;  /* Darkest */

  /* ============================================
   * NEUTRAL COLORS - Gray Scale (from Figma)
   * ============================================ */
  --color-gray-0: #FFFFFF;       /* Pure white */
  --color-gray-50: #FAFAFA;      /* Off-white */
  --color-gray-100: #F5F5F5;     /* Very light gray */
  --color-gray-200: #E2E2E2;     /* Light gray - Figma: borders */
  --color-gray-300: #CCCCCC;     /* Medium-light gray */
  --color-gray-400: #999999;     /* Medium gray */
  --color-gray-500: #595D62;     /* Secondary text - Figma */
  --color-gray-600: #4A4E52;     /* Dark gray */
  --color-gray-700: #3A3D40;     /* Darker gray */
  --color-gray-800: #2A2C2E;     /* Very dark gray */
  --color-gray-900: #1A1A1A;     /* Near black */
  --color-gray-1000: #000000;    /* Pure black - Figma */

  /* ============================================
   * SEMANTIC COLORS
   * ============================================ */
  --color-success: #287535;      /* Use primary green */
  --color-success-light: #E8F5E9;
  --color-warning: #F68714;      /* Use secondary orange */
  --color-warning-light: #FFFDF2;
  --color-error: #D32F2F;
  --color-error-light: #FFEBEE;
  --color-info: #1976D2;
  --color-info-light: #E3F2FD;

  /* ============================================
   * SPECIAL COLORS (from Figma)
   * ============================================ */
  --color-overlay: rgba(0, 0, 0, 0.56);      /* Figma: Gohan overlay */
  --color-overlay-light: rgba(0, 0, 0, 0.3);
  --color-accent-purple: #4E46B4;             /* Figma: accent */
  --color-accent-purple-light: #EDE7F6;

  /* ============================================
   * TYPOGRAPHY - Noto Sans Hebrew (Google Fonts)
   * ============================================ */
  --font-family-primary: 'Noto Sans Hebrew', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Courier New', Courier, monospace;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============================================
   * TYPE SCALE - Headings (from Figma Typography.png)
   * ============================================ */
  --text-h1-size: 48px;
  --text-h1-line: 58px;
  --text-h1-weight: 600;      /* Semi Bold */

  --text-h2-size: 40px;
  --text-h2-line: 48px;
  --text-h2-weight: 600;      /* Semi Bold */

  --text-h3-size: 32px;
  --text-h3-line: 38px;
  --text-h3-weight: 600;      /* Semi Bold */

  --text-h4-size: 28px;
  --text-h4-line: 34px;
  --text-h4-weight: 600;      /* Semi Bold */

  --text-h5-size: 24px;
  --text-h5-line: 28px;
  --text-h5-weight: 600;      /* Semi Bold */

  --text-h6-size: 20px;
  --text-h6-line: 24px;
  --text-h6-weight: 600;      /* Semi Bold */

  /* ============================================
   * TYPE SCALE - Subtitles (from Figma)
   * ============================================ */
  --text-s1-size: 18px;
  --text-s1-line: 28px;
  --text-s1-weight: 500;      /* Medium */

  --text-s2-size: 16px;
  --text-s2-line: 24px;
  --text-s2-weight: 500;      /* Medium */

  /* ============================================
   * TYPE SCALE - Body Text (from Figma)
   * ============================================ */
  --text-body-lg-size: 18px;   /* B1 */
  --text-body-lg-line: 24px;
  --text-body-lg-weight: 400;

  --text-body-md-size: 16px;   /* B2 */
  --text-body-md-line: 24px;
  --text-body-md-weight: 400;

  --text-body-sm-size: 14px;   /* B3 */
  --text-body-sm-line: 20px;
  --text-body-sm-weight: 400;

  --text-body-xs-size: 12px;   /* B4 */
  --text-body-xs-line: 18px;
  --text-body-xs-weight: 400;

  /* ============================================
   * TYPE SCALE - Caption & Label (from Figma)
   * ============================================ */
  --text-caption-size: 12px;
  --text-caption-line: 16px;
  --text-caption-weight: 400;

  --text-label-size: 12px;
  --text-label-line: 16px;
  --text-label-weight: 500;    /* Medium */

  /* ============================================
   * SPACING SCALE (8px base)
   * ============================================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================
   * BORDER RADIUS (from Figma: 12px common)
   * ============================================ */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;          /* Standard - Figma default */
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 100px;       /* Pill shape - for buttons */
  --radius-full: 9999px;      /* Circle */

  /* ============================================
   * SHADOWS (subtle as per designer feedback)
   * ============================================ */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Card-specific shadow (subtle) */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* ============================================
   * TRANSITIONS
   * ============================================ */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-color: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  --transition-transform: transform 200ms ease;
  --transition-all: all 250ms ease;

  /* ============================================
   * Z-INDEX SCALE
   * ============================================ */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* ============================================
   * BREAKPOINTS (for reference in CSS)
   * ============================================ */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* ============================================
   * COMPONENT-SPECIFIC TOKENS
   * ============================================ */

  /* Buttons */
  --btn-font-weight: 600;
  --btn-border-radius: var(--radius-lg);
  --btn-transition: var(--transition-all);

  /* Cards */
  --card-bg: var(--color-gray-0);
  --card-border-radius: var(--radius-lg);
  --card-shadow: var(--shadow-card);
  --card-padding: var(--space-4);

  /* Inputs */
  --input-border-color: var(--color-gray-200);
  --input-border-radius: var(--radius-md);
  --input-focus-ring: 0 0 0 3px rgba(40, 117, 53, 0.15);
  --input-padding: var(--space-3) var(--space-4);
}

/* ============================================
 * DARK MODE OVERRIDES
 * Applied when [data-theme="dark"] is set on :root
 * ============================================ */
:root[data-theme="dark"] {
  /* Invert grays for dark mode */
  --color-gray-0: #1A1A1A;
  --color-gray-50: #222222;
  --color-gray-100: #2A2C2E;
  --color-gray-200: #3A3D40;
  --color-gray-300: #4A4E52;
  --color-gray-400: #595D62;
  --color-gray-500: #999999;
  --color-gray-600: #CCCCCC;
  --color-gray-700: #E2E2E2;
  --color-gray-800: #F5F5F5;
  --color-gray-900: #FAFAFA;
  --color-gray-1000: #FFFFFF;

  /* Adjust shadows for dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* Component tokens for dark mode */
  --card-bg: #2A2C2E;
  --input-border-color: var(--color-gray-300);
  --input-focus-ring: 0 0 0 3px rgba(127, 203, 42, 0.2);
}