/**
 * File: wp-content/themes/visioncraft/assets/css/tokens.css
 * Purpose: VisionCraft 디자인 시스템 토큰(색상/타이포/간격/라운드/그림자)을 CSS 변수로 정의.
 *          색상 중 --brand-primary / --accent / --accent-2 등 일부는 워드프레스 커스터마이저에서
 *          inc/dynamic-css.php 를 통해 런타임에 덮어써집니다.
 */

:root {
  /* ---------- Brand: Trust Blue (Navy) ---------- */
  --blue-50:  #EEF4FB;
  --blue-100: #D6E4F4;
  --blue-200: #AEC8E8;
  --blue-300: #7BA3D6;
  --blue-400: #4A7CC0;
  --blue-500: #2A5C9E;
  --blue-600: #1E4A85;
  --blue-700: #163A6B;
  --blue-800: #102B50;
  --blue-900: #0A1D38;

  /* ---------- Accent: Growth Green ---------- */
  --green-50:  #E8F7F0;
  --green-100: #C6EDD9;
  --green-200: #97DEBC;
  --green-400: #2FB37D;
  --green-500: #15A06E;
  --green-600: #0E8259;
  --green-700: #0A6447;

  /* ---------- Secondary accent: Orange (sparing) ---------- */
  --orange-100: #FFE7D1;
  --orange-400: #FF9A3D;
  --orange-500: #F47B20;
  --orange-600: #D9620E;

  /* ---------- Neutrals: Cool Slate ---------- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFD;
  --gray-50:  #F4F6F9;
  --gray-100: #E9EDF2;
  --gray-200: #D8DEE7;
  --gray-300: #BAC3D0;
  --gray-400: #8E99A9;
  --gray-500: #647082;
  --gray-600: #49525F;
  --gray-700: #333D4B;
  --gray-800: #1F2730;
  --gray-900: #11161D;

  /* ---------- Semantic status ---------- */
  --success: var(--green-600);
  --warning: var(--orange-500);
  --danger:  #D64545;
  --info:    var(--blue-500);

  /* ---------- Brand roles (customizer-overridable) ---------- */
  --brand-primary:       var(--blue-700);
  --brand-primary-hover: var(--blue-800);
  --brand-deep:          var(--blue-900);
  --brand-soft:          var(--blue-50);

  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-soft:   var(--green-50);
  --accent-2:      var(--orange-500);

  /* ---------- Surfaces ---------- */
  --bg-page:         var(--gray-25);
  --surface:         var(--gray-0);
  --surface-subtle:  var(--gray-50);
  --surface-sunken:  var(--gray-100);
  --surface-inverse: var(--brand-deep);

  /* ---------- Text ---------- */
  --text-strong:   var(--gray-900);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-500);
  --text-faint:    var(--gray-400);
  --text-on-dark:  #EAF1F9;
  --text-on-brand: #FFFFFF;
  --text-link:     var(--blue-600);

  /* ---------- Borders ---------- */
  --border-subtle: var(--gray-100);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus:  var(--blue-400);
  --ring:          rgba(42, 92, 158, 0.28);

  /* ---------- Typography ---------- */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Segoe UI', 'Malgun Gothic', sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: 56px;
  --fs-h1: 42px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-2xs: 12px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;

  /* ---------- Spacing (4px base grid) ---------- */
  --space-0: 0;
  --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;
  --space-32: 128px;

  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1320px;

  --section-y: var(--space-24);
  --section-y-sm: var(--space-16);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 29, 56, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 29, 56, 0.08), 0 1px 2px rgba(10, 29, 56, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 29, 56, 0.08), 0 2px 4px rgba(10, 29, 56, 0.05);
  --shadow-lg: 0 12px 28px rgba(10, 29, 56, 0.12), 0 4px 8px rgba(10, 29, 56, 0.06);
  --shadow-xl: 0 24px 56px rgba(10, 29, 56, 0.16);
  --focus-ring: 0 0 0 3px var(--ring);

  --border-w: 1px;
  --border-w-strong: 1.5px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

/* Pretendard webfont (dynamic subset) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');