/* ============================================================
   PSME Industrial - variable.css
   Design System: "The Precision Blueprint" — CSS Custom Properties
   ============================================================ */

:root {
  /* === Design System Color Tokens === */
  --primary:                  #003367;
  --primary-container:        #0e4a8b;
  --bs-primary-rgb:           0, 51, 103;
  --bs-light-rgb:           240, 249, 250;
  --on-primary:               #ffffff;
  --on-surface:               #1a1c22;
  --on-surface-variant:       #424750;

  /* Surface Hierarchy (physical layer stack) */
  --surface:                  #f9f9ff;   /* Base layer */
  --surface-container-lowest: #ffffff;   /* Interactive cards / max lift */
  --surface-container-low:    #f1f3ff;   /* Primary content area */
  --surface-container:        #e9edff;   /* Utility / sidebar */
  --surface-container-high:   #dde2f0;
  --surface-container-highest:#d0d6e8;

  --inverse-surface:          #293040;
  --inverse-on-surface:       #edf0ff;
  --error:                    #ba1a1a;
  --outline-variant:          rgba(66, 71, 80, 0.15); /* Ghost border at 15% */

  /* === Legacy aliases (used in dark sections) === */
  --navy-section:   #0d1e38;
  --text-dark:      #1a1c22;
  --text-gray:      #424750;
  --text-light:     #6b7280;
  --white:          #ffffff;

  /* === Typography === */
  --font-base: 'Inter', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;

  /* === Radius (max xl = 0.75rem per design system) === */
  --radius-sm: 0.375rem;   /* 6px  — button default */
  --radius-md: 0.625rem;   /* 10px */
  --radius-lg: 0.75rem;    /* 12px — card max (xl) */

  /* === Ambient Shadows (tinted with on-surface) === */
  --shadow-sm:      0 2px 8px  rgba(20, 27, 43, 0.05);
  --shadow-md:      0 8px 24px rgba(20, 27, 43, 0.07);
  --shadow-lg:      0 20px 40px rgba(20, 27, 43, 0.09);
  --shadow-ambient: 0 20px 40px rgba(20, 27, 43, 0.06);
}