/**
 * Heko Pora - CSS Variables
 * Design System inspired by Zocdoc with Paraguay localization
 */

:root {
  /* ========== COLORS ========== */

  /* Primary Brand Colors - Heko Pora Yellow Palette from docs/style.md */
  --color-primary: #FFD02E;           /* Primary Yellow - warm, optimistic */
  --color-primary-light: #FFF9E6;     /* Background Yellow - soft highlights */
  --color-primary-dark: #FFC700;      /* Yellow Accent - darker contrast */
  --color-primary-hover: #FFB800;

  /* Secondary Colors */
  --color-secondary: #FF9500;         /* Warm orange - optimism */
  --color-secondary-light: #FFB347;
  --color-secondary-dark: #E67E00;

  /* Accent Colors */
  --color-accent: #007BFF;            /* Reliable blue - professionalism */
  --color-accent-light: #5AA8FF;
  --color-accent-dark: #005AC0;

  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-background: #FFFFFF;
  --color-surface: #F5F5F5;           /* Light Gray from brand palette */
  --color-surface-alt: #FFF9E6;       /* Soft yellow for highlights */
  --color-border: #E0E0E0;            /* Border Gray from brand palette */
  --color-border-light: #F5F5F5;

  /* Text Colors - From Heko Pora Brand Palette */
  --color-text-primary: #1A1A1A;      /* Text Primary from brand palette */
  --color-text-secondary: #666666;    /* Text Secondary from brand palette */
  --color-text-muted: #8A8A8A;
  --color-text-disabled: #AAAAAA;

  /* Semantic Colors - From Heko Pora Brand Palette */
  --color-success: #00B87C;           /* Success Green from brand palette */
  --color-success-light: #D4F4E7;
  --color-success-dark: #008C5E;

  --color-info: #0066CC;              /* Info Blue from brand palette */
  --color-info-light: #CCE5FF;
  --color-info-dark: #004C99;

  --color-warning: #FF9500;           /* Warning Orange from brand palette */
  --color-warning-light: #FFF3E0;
  --color-warning-dark: #CC7700;

  --color-danger: #E63946;            /* Error Red from brand palette */
  --color-danger-light: #FFE8EA;
  --color-danger-dark: #C02A35;

  /* Atmospheric Backgrounds */
  --bg-gradient-primary: radial-gradient(circle at top, rgba(255, 208, 46, 0.15), transparent 70%), linear-gradient(135deg, #FFF9E6 0%, #ffffff 100%);
  --bg-pattern-accent: linear-gradient(120deg, rgba(255, 208, 46, 0.08) 25%, transparent 25%) -20px 0/40px 40px, linear-gradient(120deg, rgba(255, 199, 0, 0.06) 25%, transparent 25%) 0px 0/40px 40px;

  /* ========== TYPOGRAPHY ========== */

  /* Font Families */
  --font-family-primary: "Rubik", "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-family-secondary: "Work Sans", "Heebo", sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Font Sizes */
  --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 Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

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

  /* ========== SPACING ========== */

  /* 8px grid system */
  --space-0: 0;
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */

  /* ========== LAYOUT ========== */

  /* Container Widths */
  --container-max-width: 1200px;
  --container-narrow: 720px;
  --container-medium: 960px;

  /* Breakpoints (for reference in media queries) */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* ========== BORDERS ========== */

  --border-width: 1px;
  --border-width-thick: 2px;

  --border-radius-sm: 0.25rem;    /* 4px */
  --border-radius-md: 0.375rem;   /* 6px */
  --border-radius-lg: 0.5rem;     /* 8px */
  --border-radius-xl: 0.75rem;    /* 12px */
  --border-radius-2xl: 1rem;      /* 16px */
  --border-radius-full: 9999px;   /* Full circle */

  /* ========== SHADOWS ========== */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Focus Shadow */
  --shadow-focus: 0 0 0 3px rgba(255, 208, 46, 0.35);

  /* ========== TRANSITIONS ========== */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* ========== Z-INDEX ========== */

  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* ========== COMPONENTS ========== */

  /* Buttons */
  --btn-padding-y: 0.5rem;
  --btn-padding-x: 1rem;
  --btn-padding-y-sm: 0.375rem;
  --btn-padding-x-sm: 0.75rem;
  --btn-padding-y-lg: 0.75rem;
  --btn-padding-x-lg: 1.5rem;

  /* Form Inputs */
  --input-height: 2.75rem;       /* 44px - mobile friendly */
  --input-padding-y: 0.75rem;
  --input-padding-x: 1rem;
  --input-border-radius: var(--border-radius-lg);

  /* Cards */
  --card-padding: 1.5rem;
  --card-border-radius: var(--border-radius-xl);
  --card-shadow: var(--shadow-md);

  /* Header */
  --header-height: 70px;

  /* Footer */
  --footer-bg: var(--color-surface);

  /* ========== ACCESSIBILITY ========== */

  /* Minimum touch target size */
  --touch-target-min: 44px;

  /* Skip link */
  --skip-link-bg: var(--color-primary);
  --skip-link-color: #1A1A1A;
}

/* ========== DARK MODE (Optional) ========== */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1a1a1a;
    --color-surface: #2a2a2a;
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-border: #404040;
  }
}
*/