/* ==========================================================================
   ILLUVATION Design System - CSS Variables & Design Tokens
   ========================================================================== */

:root {
  /* --- Primary Corporate Palette --- */
  --color-corporate-navy: #0B1220;
  --color-navy-dark: #070C16;
  --color-navy-light: #152238;
  --color-illuvation-blue: #155EEF;
  --color-electric-blue: #2563EB;
  --color-electric-blue-hover: #1D4ED8;
  --color-physical-cyan: #06B6D4;
  --color-cyan-glow: rgba(6, 182, 212, 0.25);
  --color-blue-glow: rgba(21, 94, 239, 0.25);
  --color-cloud-white: #F8FAFC;

  /* --- Text & Neutral Colors --- */
  --color-text-heading: #0F172A;
  --color-text-body: #334155;
  --color-text-muted: #64748B;
  --color-text-light: #94A3B8;
  --color-border: #E2E8F0;
  --color-border-subtle: #F1F5F9;
  --color-border-dark: #1E293B;
  --color-white: #FFFFFF;
  --color-surface-dark: #111827;
  --color-surface-card: #FFFFFF;

  /* --- Solution & Domain Accent Colors --- */
  --color-accent-smartfarm: #16A34A;
  --color-accent-smartfarm-bg: #F0FDF4;
  --color-accent-smartfarm-border: #BBF7D0;

  --color-accent-smartfactory: #F59E0B;
  --color-accent-smartfactory-bg: #FFFBEB;
  --color-accent-smartfactory-border: #FDE68A;

  --color-accent-agentic: #6366F1;
  --color-accent-agentic-bg: #EEF2FF;

  --color-accent-infra: #0891B2;
  --color-accent-infra-bg: #ECFEFF;

  --color-accent-danger: #DC2626;
  --color-accent-danger-bg: #FEF2F2;

  /* --- Typography Font Family (Pretendard Single Font Stack) --- */
  --font-family-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Role-Based Typography Size Tokens --- */
  --type-display-size: clamp(4rem, 8.125vw, 6.5rem);
  --type-page-title-size: clamp(3rem, 5vw, 4rem);
  --type-section-title-size: clamp(2rem, 3.125vw, 2.5rem);
  --type-subsection-title-size: clamp(1.25rem, 1.875vw, 1.5rem);
  --type-card-title-size: 1.125rem;
  --type-lead-size: 1.125rem;
  --type-body-size: 1rem;
  --type-small-size: 0.875rem;
  --type-label-size: 0.75rem;

  /* --- Typography Line Height Tokens --- */
  --type-display-line: 0.95;
  --type-title-line: 1.08;
  --type-heading-line: 1.2;
  --type-body-line: 1.7;
  --type-small-line: 1.6;

  /* --- Typography Font Weight Tokens --- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* --- Spacing System --- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* --- Layout & Container --- */
  --container-max-width: 1240px;
  --container-padding: 24px;
  --header-height: 80px;

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

  /* --- Elevation & Shadows --- */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.05);
  --shadow-card-hover: 0 12px 30px rgba(15, 23, 42, 0.1);
  --shadow-tech: 0 0 30px rgba(6, 182, 212, 0.15);

  /* --- Transitions --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}