/* ==================================================================
   ANESLEE DESIGN SYSTEM — Design Tokens
   ------------------------------------------------------------------
   Single source of truth. Import this file once in every project,
   do not redeclare variables. All colors, type, spacing, radii,
   elevations and motion live here.
   ================================================================== */

/* --- Font Imports (EN / KO / JP) -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* ============================================================
     COLOR — Primary · Navy
     The workhorse. Used for headings, navigation, primary UI
     surfaces on light backgrounds, and as the brand dark canvas.
     ============================================================ */
  --navy-900: #081B33;     /* deepest — logo mark on JPG,  hero canvas  */
  --navy-800: #0F2847;     /* brand primary — default headings, dark surface */
  --navy-700: #163560;
  --navy-600: #1E4579;
  --navy-500: #2A5A9A;

  /* ============================================================
     COLOR — Secondary · Ice Blue
     Quiet tints that pair with Navy. Use for subtle backgrounds,
     inline code chips, hover states over light surfaces.
     ============================================================ */
  --ice-100: #EDF2F9;
  --ice-200: #D4E0F0;
  --ice-300: #A8BFE0;
  --ice-400: #7A9ED0;

  /* ============================================================
     COLOR — Accent · Signal Blue
     Reserve for interactive elements: links, primary CTAs,
     focus rings, section tags. Do NOT use for body text.
     ============================================================ */
  --accent-600: #2563EB;
  --accent-500: #3B82F6;
  --accent-400: #60A5FA;

  /* ============================================================
     COLOR — Neutral · Cool Gray
     Text + borders + surfaces. 50 is the app canvas, 900 is the
     darkest ink. Body text should be 600 or 700 for WCAG AA.
     ============================================================ */
  --neutral-50:  #FAFBFC;
  --neutral-100: #F1F3F5;
  --neutral-200: #E2E5E9;
  --neutral-300: #C8CDD3;
  --neutral-400: #9BA3AE;
  --neutral-500: #6B7583;
  --neutral-600: #4A5362;
  --neutral-700: #343B47;
  --neutral-800: #1F242D;
  --neutral-900: #111419;

  /* ============================================================
     COLOR — Semantic
     ============================================================ */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;
  --info:    #3B82F6;

  /* surface colors (tint of semantic color for badges/pills) */
  --success-surface: rgba(16,185,129,0.08);
  --warning-surface: rgba(245,158,11,0.10);
  --error-surface:   rgba(239,68,68,0.08);
  --info-surface:    rgba(59,130,246,0.08);

  /* ============================================================
     TYPOGRAPHY — Font stacks
     Display = Sora (geometric sans, slight humanist warmth).
     Body    = DM Sans (neutral grotesque, high legibility).
     KO      = Pretendard Variable (authored in Korea — correct
               Korean hanja glyph shapes).
     JP      = Zen Kaku Gothic New (authored in Japan — correct
               Japanese kanji glyph shapes).
     ============================================================ */
  --font-display:    'Sora', sans-serif;
  --font-body:       'DM Sans', sans-serif;
  --font-ko:         'Pretendard Variable', 'Pretendard', sans-serif;
  --font-jp:         'Zen Kaku Gothic New', sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace;

  /* Locale-combined stacks: display always leads with Sora for
     brand consistency; body falls through to the locale's native
     font first so CJK glyphs render correctly. */
  --font-display-en: 'Sora', sans-serif;
  --font-display-ko: 'Sora', 'Pretendard Variable', sans-serif;
  --font-display-jp: 'Sora', 'Zen Kaku Gothic New', sans-serif;
  --font-body-en:    'DM Sans', sans-serif;
  --font-body-ko:    'Pretendard Variable', 'DM Sans', sans-serif;
  --font-body-jp:    'Zen Kaku Gothic New', 'DM Sans', sans-serif;

  /* ============================================================
     SPACING — 4px base grid
     Prefer these tokens over raw px. Component padding + gaps
     + margins should all resolve to one of these.
     ============================================================ */
  --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;

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-xs:  4px;   /* tags, chips */
  --radius-sm:  6px;   /* inputs, small buttons */
  --radius-md:  8px;   /* buttons, default */
  --radius-lg: 12px;   /* cards */
  --radius-xl: 16px;   /* hero cards, modals */
  --radius-2xl: 24px;  /* prominent panels */
  --radius-full: 9999px;

  /* ============================================================
     ELEVATION — Subtle, layered shadows
     Stick to these 4 levels. No hard black drop shadows.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(15,40,71,0.04);
  --shadow-sm: 0 2px 4px rgba(15,40,71,0.05), 0 1px 2px rgba(15,40,71,0.04);
  --shadow-md: 0 4px 12px rgba(15,40,71,0.06), 0 2px 4px rgba(15,40,71,0.04);
  --shadow-lg: 0 12px 32px rgba(15,40,71,0.08), 0 4px 8px rgba(15,40,71,0.04);
  --shadow-xl: 0 24px 48px rgba(15,40,71,0.10), 0 8px 16px rgba(15,40,71,0.06);

  /* Focus ring — always Signal Blue at low opacity + solid ring */
  --focus-ring: 0 0 0 3px rgba(59,130,246,0.35);

  /* ============================================================
     MOTION — Keep it short and eased. No bouncy springs.
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;

  /* ============================================================
     LAYOUT — Max widths + breakpoints (reference, not media rules)
     ============================================================ */
  --width-prose:   640px;   /* long-form reading column */
  --width-content: 960px;   /* article / marketing content */
  --width-app:    1200px;   /* product UI */
  --width-wide:   1440px;   /* marketing full-bleed sections */

  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ============================================================
     APP FONT SIZES — lunch-relay specific, mobile-first clamp()
     ------------------------------------------------------------
     Single place to scale every text surface in the app. Each
     clamp() runs (min floor for phone, fluid middle, max for
     desktop). Bumping one value here retunes the whole UI.
     Scale:  display > lg > md > base > sm > xs > micro
     ============================================================ */
  --fs-display: clamp(20px, 6vw, 26px);    /* stat numbers (合計/済/未 숫자) */
  --fs-lg:      clamp(18px, 5.2vw, 22px);  /* app title, view-toggle icon */
  --fs-md:      clamp(17px, 5vw, 21px);    /* list-view body, primary names */
  --fs-base:    clamp(15px, 4vw, 18px);    /* action buttons, inputs */
  --fs-sm:      clamp(14px, 3.8vw, 16px);  /* secondary labels, captions */
  --fs-xs:      clamp(13px, 3.5vw, 15px);  /* stat label, table header */
  --fs-micro:   clamp(11px, 3vw, 13px);    /* tiny hints, tag text */
}

/* ==================================================================
   BASE — reset + body defaults
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--neutral-50);
  color: var(--neutral-800);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Locale-specific body font — set on the <html lang="..."> attribute */
:lang(en) body, body[lang="en"] { font-family: var(--font-body-en); }
:lang(ko) body, body[lang="ko"] { font-family: var(--font-body-ko); }
:lang(ja) body, body[lang="ja"] { font-family: var(--font-body-jp); }

/* ==================================================================
   TYPOGRAPHY UTILITY CLASSES
   Pair with a locale class (.en / .ko / .jp) or <html lang>.
   ================================================================== */
.text-display { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1.15; letter-spacing: -1.5px; color: var(--navy-800); }
.text-h1      { font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 1.25; letter-spacing: -1px;   color: var(--navy-800); }
.text-h2      { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.30; letter-spacing: -0.5px; color: var(--navy-800); }
.text-h3      { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.35; letter-spacing: -0.3px; color: var(--navy-800); }
.text-h4      { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.40; color: var(--navy-800); }
.text-body-l  { font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.65; color: var(--neutral-600); }
.text-body    { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--neutral-600); }
.text-body-s  { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.65; color: var(--neutral-500); }
.text-caption { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; line-height: 1.5; color: var(--neutral-400); }
.text-overline{ font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-500); }

/* CJK adjustments — Japanese / Korean need looser line-height
   and less negative tracking than Latin. */
.lang-ko .text-display, [lang="ko"] .text-display { font-family: var(--font-display-ko); letter-spacing: -1px;   line-height: 1.20; }
.lang-ko .text-h1,      [lang="ko"] .text-h1      { font-family: var(--font-display-ko); letter-spacing: -0.5px; line-height: 1.30; }
.lang-ko .text-h2,      [lang="ko"] .text-h2      { font-family: var(--font-display-ko); letter-spacing: -0.3px; line-height: 1.35; }
.lang-ko .text-h3,      [lang="ko"] .text-h3      { font-family: var(--font-display-ko); letter-spacing: 0;      line-height: 1.40; }
.lang-ko .text-h4,      [lang="ko"] .text-h4      { font-family: var(--font-display-ko); line-height: 1.45; }
.lang-ko .text-body-l,  [lang="ko"] .text-body-l  { font-family: var(--font-body-ko); line-height: 1.75; }
.lang-ko .text-body,    [lang="ko"] .text-body    { font-family: var(--font-body-ko); line-height: 1.75; }
.lang-ko .text-body-s,  [lang="ko"] .text-body-s  { font-family: var(--font-body-ko); line-height: 1.70; }

.lang-jp .text-display, [lang="ja"] .text-display { font-family: var(--font-display-jp); letter-spacing: -0.5px; line-height: 1.25; }
.lang-jp .text-h1,      [lang="ja"] .text-h1      { font-family: var(--font-display-jp); letter-spacing: -0.3px; line-height: 1.35; font-weight: 700; }
.lang-jp .text-h2,      [lang="ja"] .text-h2      { font-family: var(--font-display-jp); letter-spacing: 0;      line-height: 1.40; font-weight: 500; }
.lang-jp .text-h3,      [lang="ja"] .text-h3      { font-family: var(--font-display-jp); letter-spacing: 0;      line-height: 1.45; font-weight: 500; }
.lang-jp .text-h4,      [lang="ja"] .text-h4      { font-family: var(--font-display-jp); line-height: 1.50; font-weight: 500; }
.lang-jp .text-body-l,  [lang="ja"] .text-body-l  { font-family: var(--font-body-jp); line-height: 1.80; }
.lang-jp .text-body,    [lang="ja"] .text-body    { font-family: var(--font-body-jp); line-height: 1.80; }
.lang-jp .text-body-s,  [lang="ja"] .text-body-s  { font-family: var(--font-body-jp); line-height: 1.75; }