/* ============================================================
   ARICO Design System — tokens (--tds-*)  [SSOT]
   원본: Arico/Design System/tokens/{colors,typography,spacing}.css
   (Claude Design export 2026-06-14). 웹(Blazor)으로 이식.
   Primary = blue · Secondary = green · brand gradient green→blue.
   Noto Sans 본문, Sirenia 디스플레이(arico.css 에 @font-face 기존).
   ※ 이식 1단계: 토큰을 '추가'만 함. 컴포넌트의 --tds-* 채택은 후속(item 2).
   ============================================================ */

:root {
  /* ---- Primary · Blue ramp ---- */
  --tds-blue-100:#EFF5FE; --tds-blue-200:#DCEAFD; --tds-blue-300:#C6DCFB;
  --tds-blue-400:#AECEFA; --tds-blue-500:#9BBFF7; --tds-blue-600:#8FB6F5;
  --tds-blue-700:#6E9DEB; --tds-blue-800:#4F7FD1; --tds-blue-900:#3A63A8;

  /* ---- Secondary · Green ramp ---- */
  --tds-green-100:#DCF4E5; --tds-green-200:#B3E7C7; --tds-green-300:#80D7A0;
  --tds-green-400:#4FC57D; --tds-green-500:#2DB463; --tds-green-600:#1B9E54;
  --tds-green-700:#128A46; --tds-green-800:#0F7A3D; --tds-green-900:#0B5B2E;

  /* ---- Primary / Secondary roles ---- */
  --tds-primary: var(--tds-blue-600);
  --tds-primary-strong: var(--tds-blue-700);
  --tds-primary-hover: var(--tds-blue-700);
  --tds-primary-active: var(--tds-blue-800);
  --tds-primary-soft: var(--tds-blue-100);
  --tds-secondary: var(--tds-green-600);
  --tds-secondary-hover: var(--tds-green-700);
  --tds-secondary-active: var(--tds-green-800);
  --tds-secondary-soft: var(--tds-green-100);

  /* ---- Brand gradient (green → pastel blue) ---- */
  --tds-gradient: linear-gradient(90deg, #1B9E54 0%, #8FB6F5 100%);
  --tds-gradient-diag: linear-gradient(135deg, #1B9E54 0%, #8FB6F5 100%);

  /* ---- Brand aliases (now blue) ---- */
  --tds-purple: var(--tds-blue-700);
  --tds-purple-deep: var(--tds-blue-900);
  --tds-purple-soft: var(--tds-blue-100);

  /* ---- Green action aliases (readable on white) ---- */
  --tds-green: var(--tds-green-700);
  --tds-green-hover: var(--tds-green-800);
  --tds-green-active: var(--tds-green-900);
  --tds-green-soft: var(--tds-green-100);
  --tds-green-brand: var(--tds-green-600);

  /* ---- Neutral / grey ---- */
  --tds-white:#FFFFFF; --tds-grey-athens:#F4F4F7; --tds-grey-mystic:#E3E6E8;
  --tds-grey-cloud:#B2B9BF; --tds-grey-shuttle:#676E73; --tds-grey-thunder:#414547;
  --tds-grey-shark:#2A2C2E; --tds-black:#000000;

  /* ---- Semantic ---- */
  --tds-info:#5B97F2; --tds-info-bg: var(--tds-blue-100);
  --tds-success:#008744; --tds-success-bg: var(--tds-green-100);
  --tds-warning:#F4B400; --tds-warning-bg:#FFF8E6; --tds-warning-strong:#8A6300;
  --tds-danger:#D60040; --tds-danger-bg:#FFF1F4; --tds-danger-strong:#D60040;

  /* ---- Semantic aliases (use in product code) ---- */
  --tds-text: var(--tds-grey-thunder);
  --tds-text-heading: var(--tds-grey-shark);
  --tds-text-secondary: var(--tds-grey-shuttle);
  --tds-text-disabled: var(--tds-grey-cloud);
  --tds-text-inverse: var(--tds-white);
  --tds-text-link: var(--tds-green);
  --tds-text-brand: var(--tds-primary-strong);
  --tds-surface: var(--tds-white);
  --tds-surface-subtle: var(--tds-grey-athens);
  --tds-surface-brand: var(--tds-primary-strong);
  --tds-surface-inverse: var(--tds-blue-900);
  --tds-border: var(--tds-grey-mystic);
  --tds-border-strong: var(--tds-grey-cloud);
  --tds-border-interactive: var(--tds-primary);
  --tds-border-focus: var(--tds-primary-strong);
  --tds-action: var(--tds-primary);
  --tds-action-hover: var(--tds-primary-hover);
  --tds-action-active: var(--tds-primary-active);

  /* ---- Typography ---- */
  --tds-font-base: "Noto Sans", "Noto Sans KR", "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tds-font-mono: "Noto Sans Mono", "Courier New", ui-monospace, monospace;
  --tds-font-logo: "Sirenia", "Noto Sans", sans-serif;
  --tds-weight-light:300; --tds-weight-regular:400; --tds-weight-medium:500; --tds-weight-bold:700;
  --tds-fs-display:64px; --tds-fs-h1:48px; --tds-fs-h2:40px; --tds-fs-h3:32px; --tds-fs-h4:28px;
  --tds-fs-h5:24px; --tds-fs-h6:20px; --tds-fs-body-lg:20px; --tds-fs-body:16px; --tds-fs-small:14px; --tds-fs-micro:12px;
  --tds-lh-display:1.05; --tds-lh-heading:1.15; --tds-lh-snug:1.25; --tds-lh-body:1.5; --tds-lh-relaxed:1.6;
  --tds-tracking-tight:-0.025em; --tds-tracking-snug:-0.015em; --tds-tracking-normal:0; --tds-tracking-wide:0.18em;

  /* ---- Spacing (4px base) ---- */
  --tds-space-0:0; --tds-space-1:4px; --tds-space-2:8px; --tds-space-3:12px; --tds-space-4:16px;
  --tds-space-5:20px; --tds-space-6:24px; --tds-space-8:32px; --tds-space-10:40px; --tds-space-12:48px;
  --tds-space-14:56px; --tds-space-16:64px; --tds-space-18:72px; --tds-space-24:96px;

  /* ---- Radii / borders ---- */
  --tds-radius-none:0; --tds-radius-sm:4px; --tds-radius-md:6px; --tds-radius-lg:8px; --tds-radius-xl:16px; --tds-radius-pill:9999px;
  --tds-border-width:1px; --tds-border-width-interactive:2px;

  /* ---- Elevation / shadows ---- */
  --tds-elevation-1:0 1px 4px rgba(0,0,0,0.10);
  --tds-elevation-2:0 4px 12px rgba(0,0,0,0.15);
  --tds-elevation-3:0 8px 24px rgba(0,0,0,0.20);
  --tds-shadow-inset:inset 0 2px 4px rgba(0,0,0,0.12);
  --tds-shadow-raised:0 1px 3px rgba(0,0,0,0.18);
  --tds-shadow-emboss:inset 0 1px 0 rgba(255,255,255,0.6);
  --tds-focus-ring:0 0 0 2px var(--tds-white), 0 0 0 4px var(--tds-purple);

  /* ---- Layout / motion ---- */
  --tds-container-max:1200px; --tds-brand-bar-height:24px; --tds-gutter:24px;
  --tds-bp-sm:576px; --tds-bp-md:768px; --tds-bp-lg:992px; --tds-bp-xl:1200px;
  --tds-ease:cubic-bezier(0.4,0,0.2,1); --tds-duration-fast:120ms; --tds-duration:200ms; --tds-duration-slow:320ms;
}

/* ---- Heading / text helper classes ---- */
.tds-display{font:var(--tds-weight-bold) var(--tds-fs-display)/var(--tds-lh-display) var(--tds-font-base);letter-spacing:var(--tds-tracking-tight);color:var(--tds-text-heading);margin:0}
.tds-h1{font:var(--tds-weight-bold) var(--tds-fs-h1)/var(--tds-lh-heading) var(--tds-font-base);letter-spacing:var(--tds-tracking-tight);color:var(--tds-text-heading);margin:0}
.tds-h2{font:var(--tds-weight-bold) var(--tds-fs-h2)/var(--tds-lh-heading) var(--tds-font-base);letter-spacing:var(--tds-tracking-snug);color:var(--tds-text-heading);margin:0}
.tds-h3{font:var(--tds-weight-bold) var(--tds-fs-h3)/var(--tds-lh-snug) var(--tds-font-base);letter-spacing:var(--tds-tracking-snug);color:var(--tds-text-heading);margin:0}
.tds-h4{font:var(--tds-weight-bold) var(--tds-fs-h4)/var(--tds-lh-snug) var(--tds-font-base);color:var(--tds-text-heading);margin:0}
.tds-body-lg{font:var(--tds-weight-regular) var(--tds-fs-body-lg)/var(--tds-lh-relaxed) var(--tds-font-base);color:var(--tds-text);margin:0}
.tds-body{font:var(--tds-weight-regular) var(--tds-fs-body)/var(--tds-lh-body) var(--tds-font-base);color:var(--tds-text);margin:0}
.tds-small{font:var(--tds-weight-regular) var(--tds-fs-small)/1.43 var(--tds-font-base);color:var(--tds-text-secondary);margin:0}
.tds-micro{font:var(--tds-weight-regular) var(--tds-fs-micro)/1.33 var(--tds-font-base);color:var(--tds-text-secondary);margin:0}
.tds-eyebrow{font:var(--tds-weight-bold) var(--tds-fs-small)/1.43 var(--tds-font-base);letter-spacing:0.06em;text-transform:uppercase;color:var(--tds-text-secondary);margin:0}

/* ---- Brand bar (얇은 green→blue 그라데이션, 모든 페이지 상단) — 플랫폼 리디자인 ---- */
.arico-brandbar{height:5px;background:linear-gradient(90deg,#1B9E54,#2E74C4);width:100%}