/* Copyright 2025-2026 Renofy Ltd. All rights reserved. */
/* === Responsive Breakpoints === */
/* Mobile/Tablet: max-width: 820px | Desktop: min-width: 821px */
/* Note: CSS variables cannot be used in @media queries due to CSS spec limitations. */
/* These breakpoint values are hardcoded throughout the codebase. */

/* === CSS Variables === */
:root {
  /* === Brand Colors === */
  --color-pink: #D7005C;
  --color-pink-light: #D7005C14;
  --color-blue: #007AFF;
  --color-mint: #00C7BE;

  /* === Functional Colors (Apple HIG) === */
  --color-pink-dark: #c00058;
  --color-info: #007AFF;
  --color-info-bg: #E5F2FF;
  --color-info-text: #003D80;
  --color-info-border: #B3D7FF;
  --color-success: #34C759;
  --color-success-bg: #E8F9ED;
  --color-success-text: #1B6B2E;
  --color-success-border: #9AE6B4;
  --color-warning: #FF9500;
  --color-warning-bg: #FFF5E5;
  --color-warning-text: #663C00;
  --color-warning-border: #FFD699;
  --color-danger: #FF3B30;
  --color-danger-bg: #FFEBEA;
  --color-danger-text: #991F1A;
  --color-danger-border: #FFB3AF;
  --color-accent: #AF52DE;
  --color-accent-bg: #F5E6FF;
  --color-accent-text: #6B21A8;
  --color-accent-border: #D8B4FE;

  /* === Neutrals === */
  --color-bg-light: #f9fafb;
  --color-bg-surface: #f4f5f6;
  --color-white: #ffffff;
  --color-text-primary: #171c23;
  --color-text-mid: #4a4a4a;
  --color-text-secondary: #6B7280;
  --color-border: rgb(230, 232, 236);
  --color-indigo-dark: #1a203b;

  /* === Typography === */
  /* Font Families */
  --font-sans: 'Manrope', sans-serif;

  /* Font Sizes */
  --font-size-xxs: 0.65rem;   /* 10.4px */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 4rem;      /* 64px */

  /* Font Weights */
  --font-weight-thin: 250;
  --font-weight-light: 350;
  --font-weight-regular: 450;
  --font-weight-medium: 525;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.05em;

  /* === Borders === */
  --radius-sm: 0.35rem;
  --radius-base: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 0.85rem;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* === Transitions === */
  --transition-snappy: 0.1s ease;
  --transition-fast: 0.2s ease-in-out;
  --transition-smooth: 0.3s ease;

  /* === Glassmorphism & Blur Effects === */
  --glass-light: rgba(255, 255, 255, 0.35);
  --glass-medium: rgba(255, 255, 255, 0.5);
  --blur-light: blur(6px);
  --blur-medium: blur(10px);

  /* === Fixed Element Heights === */
  /* Mobile defaults - must match actual component heights for body padding */
  --height-header: 59px;              /* Mobile: 59px | Desktop: 144px */
  --height-bottom-nav: 58px;        /* Mobile: 58px | PWA: 82px | Desktop: 0 */
  --height-action-footer: 143px;      /* Mobile: 143px | PWA: 159px */
  --height-form-actions: 100px;       /* Mobile: 100px | PWA: 116px */

  /* === Z-Index Scale === */
  --z-index-base: 1;
  --z-index-tooltip: 10;
  --z-index-sticky: 100;
  --z-index-header: 1000;
  --z-index-overlay: 9000;
  --z-index-modal: 10000;
  --z-index-critical: 99999;
}

/* === Responsive Font Sizes === */
@media (max-width: 820px) {
  :root {
    --font-size-xxs: 0.625rem;   /* 10px */
    --font-size-xs: 0.688rem;    /* ~11px */
    --font-size-sm: 0.75rem;     /* 12px */
    --font-size-base: 0.875rem;  /* 14px */
    --font-size-lg: 1rem;        /* 16px */
    --font-size-xl: 1.125rem;    /* 18px */
    --font-size-2xl: 1.25rem;    /* 20px */
    --font-size-3xl: 1.5rem;     /* 24px */
    --font-size-4xl: 1.875rem;   /* 30px */
    --font-size-5xl: 2.25rem;    /* 36px */
    --font-size-6xl: 3rem;       /* 48px */
  }
}

/* === PWA Mode Height Adjustments === */
@media (display-mode: standalone) {
  :root {
    --height-bottom-nav: 82px;      /* Increased for PWA safe area */
    --height-action-footer: 159px;    /* Increased for PWA safe area */
    --height-form-actions: 116px;     /* Increased for PWA safe area */
  }
}

/* === Desktop Height Adjustments === */
@media (min-width: 821px) {
  :root {
    --height-header: 144px;  /* Desktop header is taller */
    --height-bottom-nav: 0;     /* No bottom nav on desktop */
  }
}