/* 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-blue-dark: #0066d6;
  --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;
  --color-bg-hero-dark: #131920;

  /* === 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;
  --font-weight-extrabold: 800;

  /* 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.
     Bottom-affected heights include safe area inset (non-zero in PWA/Capacitor). */
  --height-header: 59px;              /* Mobile: 59px | Desktop: 144px (auth) / 88px (unauth) */

  /* === 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 */
  }
}

/* === Safe Area Height Adjustments === */
/* env(safe-area-inset-bottom) is non-zero in PWA standalone and Capacitor native apps
   when viewport-fit=cover is set. Returns 0 in regular browsers. */
:root {
  --height-bottom-nav: calc(58px + env(safe-area-inset-bottom, 0px));    /* base: 58px */
  --height-action-footer: calc(143px + env(safe-area-inset-bottom, 0px)); /* base: 143px */
  --height-form-actions: calc(100px + env(safe-area-inset-bottom, 0px));  /* base: 100px */
}

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

  body:has(.header[data-authenticated="false"]) {
    --height-header: 88px;  /* Desktop unauthenticated (no nav row) */
  }
}