/* ============================================================
   HARU Design Tokens — Single Source of Truth
   Spec: Obsidian HARU/knowledge/design-tokens.md (v1.0, MINT CD)
   "One file change = site-wide change."
   Load order: tokens.css must be FIRST on every page.
   ============================================================ */

:root {
  /* ============================================================
     1. PRIMITIVE PALETTE (원시 색 — 이름이 곧 값)
     ============================================================ */

  /* — Mint (brand) — */
  --mint-50:  #EFF7F4;
  --mint-100: #D9ECE3;
  --mint-200: #B8DCCC;
  --mint-300: #8FC6AE;
  --mint-400: #73AD94;
  --mint-500: #5F9A81;   /* 기본 브랜드 민트 */
  --mint-600: #4D8069;
  --mint-700: #3E6654;
  --mint-800: #2F4D40;
  --mint-900: #1F332A;

  /* — Blue (secondary) — */
  --blue-50:  #EEF5FA;
  --blue-100: #D6E8F3;
  --blue-200: #B4D3E8;
  --blue-300: #8ABBDA;
  --blue-400: #66A4CD;
  --blue-500: #3D7BA3;
  --blue-600: #2E6389;
  --blue-700: #234D6C;
  --blue-800: #1A3850;
  --blue-900: #112434;

  /* — Ink (text/icon neutrals, cool) — */
  --ink-100: #F0F3F6;
  --ink-300: #A0B3C0;
  --ink-500: #6A7F90;
  --ink-700: #3B4F61;
  --ink-900: #1A2940;

  /* — Gold (accent) — */
  --gold-300: #F0D38A;
  --gold-400: #E6B85C;
  --gold-500: #C89840;

  /* — State — */
  --state-success: #2FA985;
  --state-warning: #E6A23C;
  --state-danger:  #D96A6A;
  --state-info:    var(--blue-500);

  /* ============================================================
     2. SEMANTIC TOKENS (역할 기반 — 컴포넌트는 이것만 참조)
     ============================================================ */

  /* — Brand — */
  --brand-primary:     var(--mint-500);
  --brand-primary-ink: var(--mint-700);
  --brand-secondary:   var(--blue-500);
  --brand-accent:      var(--gold-400);

  /* — Surface (배경 계층) — */
  --surface-page:    #FAFBFC;
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #F4F7F9;
  --surface-overlay: rgba(26, 41, 64, 0.48);

  /* — Ink roles — */
  --ink-strong:  var(--ink-900);
  --ink-body:    var(--ink-700);
  --ink-muted:   var(--ink-500);
  --ink-subtle:  var(--ink-300);
  --ink-inverse: #FFFFFF;

  /* — Border — */
  --border-hairline: rgba(26, 41, 64, 0.08);
  --border-subtle:   rgba(26, 41, 64, 0.14);
  --border-strong:   var(--ink-500);

  /* — Gradients — */
  --grad-morning:    linear-gradient(180deg, var(--mint-50) 0%, var(--blue-100) 60%, var(--blue-200) 100%);
  --grad-evening:    linear-gradient(180deg, #F7E9D6 0%, #E8C9B0 60%, #B8869A 100%);
  --grad-night:      linear-gradient(180deg, #1A2940 0%, #2E3F5C 60%, #486285 100%);
  --grad-cta:        linear-gradient(135deg, #7DB39B 0%, #5E99BF 100%);
  --grad-cta-bright: linear-gradient(135deg, #7FFFD4 0%, #4DE0B5 100%);
  --grad-card:       linear-gradient(180deg, rgba(95,154,129,.06) 0%, rgba(61,123,163,.04) 100%);
  --grad-hero:       linear-gradient(180deg, rgba(184,220,204,.35) 0%, var(--surface-page) 100%);

  /* ============================================================
     3. TYPOGRAPHY
     ============================================================ */

  --font-ko:      'Gowun Dodum', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-en:      'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-global:  'Noto Sans', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC',
                  'Noto Sans Thai', 'Noto Sans Arabic', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-display: 'Gowun Batang', 'Gowun Dodum', serif;
  --font-body:    var(--font-ko), var(--font-en), var(--font-global);

  /* Type scale (Perfect Fourth · 1.333) */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;
  --text-5xl:  68px;

  /* Line heights */
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* Letter-spacing (한글 살짝 조임) */
  --tracking-tight:  -0.02em;
  --tracking-normal: -0.005em;
  --tracking-wide:    0.04em;

  /* ============================================================
     4. SPACING (4px 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;

  --layout-gutter:           var(--space-6);
  --layout-section:          var(--space-20);
  --layout-container:        1200px;
  --layout-container-narrow: 720px;

  /* ============================================================
     5. RADIUS
     ============================================================ */
  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-2xl:    32px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ============================================================
     6. SHADOWS (Pixar-style double-layer)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(26, 41, 64, 0.04);
  --shadow-sm: 0 2px 6px rgba(26, 41, 64, 0.06), 0 1px 2px rgba(26, 41, 64, 0.04);
  --shadow-md: 0 6px 16px rgba(26, 41, 64, 0.08), 0 2px 4px rgba(26, 41, 64, 0.05);
  --shadow-lg: 0 14px 32px rgba(26, 41, 64, 0.10), 0 4px 8px rgba(26, 41, 64, 0.06);
  --shadow-xl: 0 24px 56px rgba(26, 41, 64, 0.12), 0 8px 16px rgba(26, 41, 64, 0.08);

  --shadow-glow-mint: 0 8px 32px rgba(95, 154, 129, 0.28);
  --shadow-glow-blue: 0 8px 32px rgba(61, 123, 163, 0.28);
  --shadow-inset:     inset 0 1px 3px rgba(26, 41, 64, 0.06);

  /* ============================================================
     7. MOTION
     ============================================================ */
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-languid: 640ms;

  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1.2);
  --ease-entrance:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:        cubic-bezier(0.4, 0, 1, 1);
  --ease-haru:        cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ============================================================
     8. GLASS / BLUR (app bar, filter bar)
     ============================================================ */
  --glass-bg:   rgba(250, 251, 252, 0.82);
  --glass-blur: saturate(1.8) blur(16px);

  /* ============================================================
     9. COMPONENT TOKENS
     ============================================================ */

  /* Button */
  --btn-height-sm:           32px;
  --btn-height-md:           44px;
  --btn-height-lg:           56px;
  --btn-padding-x:           var(--space-5);
  --btn-radius:              var(--radius-pill);
  --btn-font:                var(--text-base);
  --btn-weight:              600;
  --btn-primary-bg:          var(--grad-cta);
  --btn-primary-fg:          var(--ink-inverse);
  --btn-primary-shadow:      var(--shadow-md);
  --btn-primary-bg-hover:    linear-gradient(135deg, #6FA68C 0%, #4F89B0 100%);
  --btn-primary-shadow-hover: var(--shadow-glow-mint);
  --btn-secondary-bg:        transparent;
  --btn-secondary-border:    1.5px solid var(--mint-500);
  --btn-secondary-fg:        var(--mint-700);
  --btn-ghost-bg-hover:      var(--mint-50);

  /* Card */
  --card-bg:           var(--surface-raised);
  --card-border:       1px solid var(--border-hairline);
  --card-radius:       var(--radius-lg);
  --card-padding:      var(--space-6);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-transition:   transform var(--dur-base) var(--ease-haru),
                       box-shadow var(--dur-base) var(--ease-haru);

  /* Input */
  --input-height:       44px;
  --input-bg:           var(--surface-sunken);
  --input-border:       1px solid var(--border-subtle);
  --input-border-focus: 1.5px solid var(--mint-500);
  --input-radius:       var(--radius-md);
  --input-padding-x:    var(--space-4);
  --input-font:         var(--text-base);
  --input-ring-focus:   0 0 0 4px rgba(95, 154, 129, 0.15);

  /* Modal */
  --modal-bg:       var(--surface-raised);
  --modal-radius:   var(--radius-xl);
  --modal-padding:  var(--space-8);
  --modal-shadow:   var(--shadow-xl);
  --modal-backdrop: var(--surface-overlay);
  --modal-width-sm: 400px;
  --modal-width-md: 560px;
  --modal-width-lg: 720px;

  /* Badge / Chip */
  --chip-height:  28px;
  --chip-padding: 0 var(--space-3);
  --chip-radius:  var(--radius-pill);
  --chip-font:    var(--text-xs);
  --chip-bg:      var(--mint-50);
  --chip-fg:      var(--mint-700);
  --chip-border:  1px solid var(--mint-200);

  /* ============================================================
     10. BREAKPOINTS (참고용 — @media 쿼리에서 직접 써야 함)
     ============================================================ */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1600px;

  /* ============================================================
     11. LEGACY ALIASES (구 Material-You 토큰 → 새 토큰으로 매핑)
     gallery.css 는 아직 --md-sys-* 를 참조 — 이 블록이 있는 한 호환됨
     ============================================================ */

  /* Color aliases */
  --md-sys-color-primary:                   var(--brand-primary);
  --md-sys-color-on-primary:                var(--ink-inverse);
  --md-sys-color-primary-container:         var(--mint-100);
  --md-sys-color-on-primary-container:      var(--mint-900);
  --md-sys-color-secondary:                 var(--brand-secondary);
  --md-sys-color-on-secondary:              var(--ink-inverse);
  --md-sys-color-secondary-container:       var(--blue-100);
  --md-sys-color-on-secondary-container:    var(--blue-900);
  --md-sys-color-tertiary:                  var(--brand-accent);
  --md-sys-color-on-tertiary:               var(--ink-inverse);
  --md-sys-color-background:                var(--surface-page);
  --md-sys-color-on-background:             var(--ink-strong);
  --md-sys-color-surface:                   var(--surface-raised);
  --md-sys-color-on-surface:                var(--ink-strong);
  --md-sys-color-surface-variant:           var(--mint-50);
  --md-sys-color-on-surface-variant:        var(--ink-muted);
  --md-sys-color-surface-container:         var(--surface-sunken);
  --md-sys-color-surface-container-high:    var(--mint-50);
  --md-sys-color-surface-container-highest: var(--mint-100);
  --md-sys-color-outline:                   var(--ink-muted);
  --md-sys-color-outline-variant:           var(--border-subtle);
  --md-sys-color-error:                     var(--state-danger);
  --md-sys-color-on-error:                  var(--ink-inverse);
  --md-sys-color-error-container:           #F9DEDC;
  --md-sys-color-on-error-container:        #410E0B;

  /* Elevation aliases */
  --md-sys-elevation-1: var(--shadow-sm);
  --md-sys-elevation-2: var(--shadow-md);
  --md-sys-elevation-3: var(--shadow-lg);

  /* Shape aliases */
  --md-sys-shape-small:       var(--radius-sm);
  --md-sys-shape-medium:      var(--radius-md);
  --md-sys-shape-large:       var(--radius-lg);
  --md-sys-shape-extra-large: var(--radius-xl);
  --md-sys-shape-full:        var(--radius-pill);

  /* Typography aliases */
  --md-sys-typescale-display-font: var(--font-body);
  --md-sys-typescale-body-font:    var(--font-body);
  --md-sys-typescale-label-font:   var(--font-body);

  /* Motion aliases */
  --md-sys-motion-standard:    var(--dur-base) var(--ease-standard);
  --md-sys-motion-decelerate:  var(--dur-slow) var(--ease-entrance);
  --md-sys-motion-emphasized:  var(--dur-languid) var(--ease-emphasized);

  /* Glass/gradient aliases */
  --haru-glass-bg:         var(--glass-bg);
  --haru-glass-blur:       var(--glass-blur);
  --haru-gradient-primary: var(--grad-cta);
  --haru-gradient-card:    var(--grad-card);

  /* result.css fallback aliases — --mint-*, --ink-* 숫자형 이미 위에 정의됨 */
}

/* ============================================================
   THEME: mint-bright (A/B variant)
   <html data-theme="mint-bright"> 로 스왑
   ============================================================ */
[data-theme="mint-bright"] {
  --mint-50:  #EEFFFA;
  --mint-100: #C9F7E9;
  --mint-200: #9EEDD4;
  --mint-300: #7FFFD4;
  --mint-400: #4DE0B5;
  --mint-500: #2EC196;
  --mint-600: #1FA37D;
  --mint-700: #178066;
  --mint-800: #0F5E4C;
  --mint-900: #083B30;

  --ink-body: #0F1B2E;
}

/* ============================================================
   THEME: night (dark mode candidate)
   ============================================================ */
[data-theme="night"] {
  --surface-page:    #0E1621;
  --surface-raised:  #18232F;
  --surface-sunken:  #0A1017;
  --ink-strong:      #F5F8FA;
  --ink-body:        #D6DCE3;
  --ink-muted:       #8A98A8;
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-subtle:   rgba(255, 255, 255, 0.14);
  --brand-primary:   var(--mint-300);
  --glass-bg:        rgba(14, 22, 33, 0.82);
}

/* ============================================================
   RESPONSIVE TOKEN OVERRIDES
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --text-4xl:       32px;
    --text-3xl:       28px;
    --text-2xl:       24px;
    --layout-section: var(--space-12);
    --card-padding:   var(--space-4);
    --modal-padding:  var(--space-5);
  }
}