/* ============================================
   SPA ALINA — Design Tokens
   "Clean Clinic Aqua" Design System
   ============================================ */

:root {
  /* === Colors === */
  --color-primary: #008080;
  --color-primary-dark: #006666;
  --color-primary-darker: #3F5A65;
  --color-primary-light: #9FD3D8;
  --color-primary-lightest: #E8F4F4;

  --color-bg: #F6FBFC;
  --color-bg-white: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F0F6F7;
  --color-border: #DAE5E8;
  --color-border-light: #EDF2F4;
  --color-divider: #EDF2F4;

  --color-text-primary: #3F5A65;
  /*
   * WCAG contrast note: #A3B0BA on #FFFFFF has a contrast ratio of ~2.16:1,
   * which does not meet WCAG AA for normal text (4.5:1) or large text (3:1).
   * This value is kept to match the design system. Consider using
   * --color-text-primary (#3F5A65, ~6.3:1) for critical body text,
   * or darkening to #6B7B87 (~4.5:1) if AA compliance is required.
   */
  --color-text-secondary: #A3B0BA;
  --color-text-tertiary: #C4CDD5;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #008080;

  --color-accent: #E8913A;
  --color-accent-light: #FEF3E2;
  --color-success: #2ECC71;
  --color-success-light: #E8F8F0;
  --color-error: #E74C3C;
  --color-error-light: #FDECEB;
  --color-warning: #F39C12;
  --color-warning-light: #FEF9E7;
  --color-info: #3498DB;
  --color-info-light: #EBF5FB;

  /* Loyalty tiers */
  --color-tier-membre: #A3B0BA;
  --color-tier-privilege: #008080;
  --color-tier-ambassador: #C9A84C;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #008080 0%, #3F5A65 100%);
  --gradient-loyalty: linear-gradient(135deg, #008080 0%, #006666 50%, #3F5A65 100%);
  --gradient-gold: linear-gradient(135deg, #C9A84C 0%, #E8C76A 50%, #C9A84C 100%);

  /* === Typography === */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-h1-size: 28px;
  --text-h1-weight: 700;
  --text-h1-height: 1.2;

  --text-h2-size: 22px;
  --text-h2-weight: 700;
  --text-h2-height: 1.25;

  --text-h3-size: 18px;
  --text-h3-weight: 600;
  --text-h3-height: 1.3;

  --text-body-size: 16px;
  --text-body-weight: 400;
  --text-body-height: 1.5;

  --text-body-sm-size: 14px;
  --text-body-sm-weight: 400;
  --text-body-sm-height: 1.5;

  --text-caption-size: 12px;
  --text-caption-weight: 400;
  --text-caption-height: 1.4;

  --text-price-lg-size: 24px;
  --text-price-lg-weight: 700;
  --text-price-lg-height: 1.2;

  --text-price-size: 18px;
  --text-price-weight: 700;
  --text-price-height: 1.3;

  --text-badge-size: 11px;
  --text-badge-weight: 600;
  --text-badge-height: 1.2;

  --text-button-size: 16px;
  --text-button-weight: 600;
  --text-button-height: 1;

  /* === Spacing (8pt grid) === */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* === Border Radius === */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* === Sizes === */
  --tap-target: 44px;
  --input-height: 48px;
  --button-height: 48px;
  --button-height-sm: 36px;
  --bottom-nav-height: 64px;
  --header-height: 56px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* === Z-Index Scale === */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-sheet: 600;
  --z-toast: 700;
  --z-tooltip: 800;
  --z-notification: 900;

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