/* ============================================================
   ListeningMind Design Tokens  ·  리스닝마인드 디자인 토큰
   Source of truth: www.listeningmind.com (measured computed styles)
   Drop this in first, then listeningmind.css
   ============================================================ */

:root {
  /* ---- Brand red / 브랜드 레드 ------------------------------ */
  --lm-red:           #FF0209;  /* logo pure red — 로고 전용, UI 텍스트에는 쓰지 않음 */
  --lm-coral:         #FF5B60;  /* PRIMARY accent — CTA fill, highlight word, link labels */
  --lm-red-deep:      #C81414;  /* eyebrow labels, gradient end */
  --lm-maroon:        #961E1E;  /* card icons, dark red detail */
  --lm-pink:          #FF325F;  /* logo highlight only */
  --lm-pink-soft:     #EF677F;  /* rare secondary pink */

  /* ---- Neutrals — ALL violet-tinted, never pure grey ------- */
  /*      뉴트럴은 전부 보라 기운. #888 같은 순수 회색 금지.      */
  --lm-ink:           #3D3A46;  /* body text, headings (near-black) */
  --lm-ink-2:         #5D596A;  /* secondary text, nav links, card titles */
  --lm-ink-3:         #7F7A8D;  /* tertiary, footer text */
  --lm-muted:         #9691A2;  /* placeholder, disabled, captions */
  --lm-line-strong:   #C6C2CE;  /* outline-button border */
  --lm-line:          #DAD7E0;  /* default border, header bottom rule */
  --lm-line-soft:     #EAE8EE;  /* table dividers, card dividers, band bg */
  --lm-surface:       #FBFAFB;  /* subtle surface: card header, footer, inset */
  --lm-white:         #FFFFFF;
  --lm-charcoal:      #232128;  /* dark section band */
  --lm-hero-plum:     #1F1017;  /* hero art darkest */
  --lm-hero-crimson:  #B11117;  /* hero art glow */

  /* ---- Product (in-app) accent / 제품 화면 액센트 ----------- */
  --lm-violet:        #786EBE;  /* app primary button, login */
  --lm-violet-hover:  #6C63AB;

  /* ---- Categorical / plan tiers — 데이터·요금제 구분색 ------ */
  --lm-cat-steel:     #95B3C7;  /* Trial */
  --lm-cat-green:     #8CBD57;  /* Standard */
  --lm-cat-peri:      #9397FD;  /* Professional */
  --lm-cat-gold:      #BFA055;  /* Advance */
  --lm-cat-terra:     #DA8968;  /* 5th series */

  /* ---- Gradients / 그라데이션 ------------------------------- */
  --lm-grad-cta:      linear-gradient(90deg, #FF5B60 0%, #C81414 100%);
  --lm-grad-icon:     linear-gradient(180deg, #C81414 0%, #FF5B60 100%);
  --lm-grad-rule:     linear-gradient(90deg, #C81414 0%, rgba(0,0,0,0) 100%);
  --lm-grad-hover:    linear-gradient(90deg, rgba(255,91,96,0) 0%, rgba(255,91,96,.10) 100%);

  /* ---- Type / 타이포그래피 ---------------------------------- */
  --lm-font:      "Noto Sans", "Noto Sans KR", "Noto Sans JP", sans-serif;
  --lm-fw-regular: 400;
  --lm-fw-medium:  500;
  --lm-fw-bold:    700;
  --lm-fw-black:   900;   /* display headline only */

  --lm-fs-display: 48px;  --lm-lh-display: 62.4px;  /* 1.3 */
  --lm-fs-xxl:     32px;  --lm-lh-xxl:     44.8px;  /* 1.4 */
  --lm-fs-h2:      28px;  --lm-lh-h2:      39.2px;  /* 1.4 */
  --lm-fs-h3:      24px;  --lm-lh-h3:      33.6px;  /* 1.4 */
  --lm-fs-h4:      20px;  --lm-lh-h4:      28px;    /* 1.4 */
  --lm-fs-lg:      18px;  --lm-lh-lg:      25.2px;
  --lm-fs-base:    16px;  --lm-lh-base:    24px;    /* 1.5 */
  --lm-fs-sm:      14px;  --lm-lh-sm:      21px;    /* 1.5 */
  --lm-fs-xs:      12px;  --lm-lh-xs:      16.8px;  /* 1.4 */
  --lm-fs-xxs:     10px;  --lm-lh-xxs:     13px;
  --lm-tracking-tight: -0.12px;   /* 큰 제목에만 / display + h2 only */

  /* ---- Space / 간격 (4px base) ------------------------------ */
  --lm-space-1: 4px;   --lm-space-2: 8px;   --lm-space-2h: 10px;
  --lm-space-3: 12px;  --lm-space-4: 16px;  --lm-space-5: 20px;
  --lm-space-6: 24px;  --lm-space-8: 32px;  --lm-space-10: 40px;
  --lm-section-y: 80px;          /* section padding top/bottom */
  --lm-section-y-mobile: 48px;
  --lm-gutter: 20px;             /* page horizontal padding */

  /* ---- Layout / 레이아웃 ------------------------------------ */
  --lm-container: 1200px;        /* main content width */
  --lm-measure: 650px;           /* centered text column */
  --lm-narrow: 380px;            /* form / card column */
  --lm-header-h: 56px;
  --lm-rail-w: 48px;             /* app icon rail */

  /* ---- Radius / 라운드 -------------------------------------- */
  --lm-r-sm:   6px;    /* chips, inputs, small controls */
  --lm-r-md:   10px;   /* CARDS, large buttons, table end cells — 기본값 */
  --lm-r-lg:   12px;
  --lm-r-pill: 30px;   /* header + hero CTA */
  --lm-r-xl:   80px;   /* oversized pill / tab track */
  --lm-r-full: 50%;

  /* ---- Elevation — one shadow only / 그림자는 단 하나 ------- */
  --lm-shadow: 0 4px 14px 0 rgba(162,162,186,.26);   /* violet-tinted */

  /* ---- Motion / 모션 ---------------------------------------- */
  --lm-ease:      cubic-bezier(.4,0,.2,1);
  --lm-dur-fast:  .15s;
  --lm-dur:       .2s;
  --lm-dur-slow:  .25s;
  --lm-dur-move:  .3s;
}

/* Breakpoints (MUI-derived) — use these exact values
   600px = mobile/tablet switch, 769px, 900px, 1024px, 1280px */