/**
 * AILO Design System Tokens
 * Source of Truth: docs/03_디자인_명세서.md
 */

:root {
  /* Brand Colors */
  --color-indigo: #3F51F7;
  --color-indigo-deep: #2736D9;
  --color-indigo-mist: #EEF0FF;
  --color-mint: #2DD4BF;
  --color-mint-deep: #0F9F8F;
  --color-sky: #60A5FA;
  --color-violet: #8B5CF6;

  /* Neutral Colors */
  --color-midnight: #0F172A;
  --color-deep-slate: #1E293B;
  --color-slate: #475569;
  --color-slate-gray: #64748B;
  --color-soft-gray: #94A3B8;
  --color-border: #CBD5E1;
  --color-divider: #E2E8F0;
  --color-cloud: #F1F5F9;
  --color-soft-cloud: #F8FAFC;
  --color-white: #FFFFFF;

  /* Philosophy Accent Colors */
  --color-philo-advance: var(--color-indigo);
  --color-philo-innovate: var(--color-violet);
  --color-philo-launch: var(--color-sky);
  --color-philo-operate: var(--color-mint);

  /* Semantic Variables */
  --color-bg: var(--color-white);
  --color-surface: var(--color-white);
  --color-surface-subtle: var(--color-soft-cloud);
  --color-text: var(--color-midnight);
  --color-text-secondary: var(--color-slate);
  --color-text-muted: var(--color-slate-gray);
  --color-action: var(--color-indigo);
  --color-action-hover: var(--color-indigo-deep);
  --color-focus: var(--color-indigo);

  /* Gradients */
  --gradient-signature: linear-gradient(135deg, #3F51F7 0%, #60A5FA 100%);
  --gradient-innovation: linear-gradient(135deg, #3F51F7 0%, #8B5CF6 100%);
  --gradient-product: linear-gradient(135deg, #3F51F7 0%, #2DD4BF 100%);
  --gradient-subtle-mesh: radial-gradient(at 0% 0%, rgba(63, 81, 247, 0.05) 0px, transparent 50%),
                          radial-gradient(at 100% 100%, rgba(45, 212, 191, 0.04) 0px, transparent 50%);

  /* Typography */
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'GmarketSans', 'Gmarket Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-emphasis: 'GmarketSans', 'Gmarket Sans', 'Pretendard', sans-serif;

  /* Layout & Spacing */
  --content-max: 90rem; /* 1440px */
  --content-reading: 48rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-gap: clamp(4.5rem, 10vw, 9rem);
  --space-1: 0.5rem;   /* 8px */
  --space-2: 0.75rem;  /* 12px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 5rem;     /* 80px */
  --space-10: 6.5rem;  /* 104px */

  /* Border Radii */
  --radius-sm: 0.5rem;   /* 8px */
  --radius-md: 0.875rem; /* 14px */
  --radius-lg: 1.25rem;  /* 20px */
  --radius-xl: 1.75rem;  /* 28px */
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-soft: 0 1rem 3rem rgba(15, 23, 42, 0.08);
  --shadow-lift: 0 1.875rem 3.75rem rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0.5rem 2rem rgba(63, 81, 247, 0.18);

  /* Transitions & Animation */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 360ms;
  --duration-slow: 600ms;

  /* Navigation Heights */
  --header-height-desktop: 72px;
  --header-height-mobile: 64px;
  --header-height: var(--header-height-desktop);
}

@media (max-width: 991px) {
  :root {
    --header-height: var(--header-height-mobile);
  }
}