/* ============================================================
   HAMEDCO Design System — CSS Custom Properties
   Source: docs/ui-guideline.md §13
   ============================================================ */

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --color-primary: #2B9EB3;
  --color-primary-dark: #1A7A8A;
  --color-primary-light: #E6F4F7;
  --color-accent: #E8834A;
  --color-accent-dark: #D06A30;
  --color-accent-light: #FFF0E6;

  /* ── Neutral Colors ───────────────────────────────────── */
  --color-gray-900: #1A1D23;
  --color-gray-700: #374151;
  --color-gray-500: #6B7280;
  --color-gray-400: #9CA3AF;
  --color-gray-300: #D1D5DB;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #F3F4F6;
  --color-gray-50: #F9FAFB;
  --color-white: #FFFFFF;

  /* ── Semantic Colors ──────────────────────────────────── */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* ── Gradients ────────────────────────────────────────── */
  --gradient-hero: linear-gradient(135deg, #1A7A8A 0%, #2B9EB3 50%, #E8834A 100%);
  --gradient-teal: linear-gradient(180deg, #E6F4F7 0%, #FFFFFF 100%);
  --gradient-cta: linear-gradient(135deg, #E8834A 0%, #D06A30 100%);
  --gradient-dark: linear-gradient(135deg, #1A1D23 0%, #1A7A8A 100%);

  /* ── Typography ───────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Spacing (4px base) ───────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── Container ────────────────────────────────────────── */
  --container-max: 1280px;
  --container-padding: 24px;
}

@media (max-width: 639px) {
  :root {
    --container-padding: 16px;
  }
}