/* ==========================================================================
   MC Employment Service — Layer 1: design tokens
   Part of a three-layer stylesheet. Load order matters:
     1-tokens.css  ->  2-base.css  ->  3-components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --navy-900: #061323;
  --navy-800: #0B1F3A;
  --navy-700: #12304F;
  --navy-600: #1B4269;
  --navy-500: #23517A;
  --red-600:  #D62828;
  --red-700:  #B31E1E;
  --sand-300: #F2C98A;

  /* neutrals */
  --paper:    #FFFFFF;
  --paper-2:  #F7F9FB;
  --paper-3:  #EDF1F5;
  --line:     #DCE4EC;
  --line-2:   #C8D4E0;
  --ink:      #0A1420;
  --ink-2:    #33465A;
  --ink-3:    #67788C;

  /* on dark */
  --on-navy:      #FFFFFF;
  --on-navy-2:    #C3D2E1;
  --on-navy-3:    #8FA5BC;
  --line-on-navy: rgba(255, 255, 255, .14);

  /* semantic */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--navy-800);
  --cta: var(--red-600);
  --focus: #1B7FD1;

  /* type */
  --f-display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --lh-body: 1.7;
  --lh-head: 1.28;

  /* spacing — 8px base */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 6rem;   --s8: 8rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1220px;

  /* elevation — one calibrated scale */
  --e1: 0 1px 2px rgba(11, 31, 58, .06), 0 1px 1px rgba(11, 31, 58, .04);
  --e2: 0 4px 12px -2px rgba(11, 31, 58, .10), 0 2px 4px -1px rgba(11, 31, 58, .06);
  --e3: 0 14px 34px -10px rgba(11, 31, 58, .18), 0 4px 10px -4px rgba(11, 31, 58, .10);
  --e4: 0 30px 70px -24px rgba(6, 19, 35, .40), 0 10px 24px -12px rgba(6, 19, 35, .24);

  --r1: 3px; --r2: 6px; --r3: 10px; --r4: 16px;

  --t-fast: 140ms cubic-bezier(.22, .61, .36, 1);
  --t: 240ms cubic-bezier(.22, .61, .36, 1);
  --t-slow: 520ms cubic-bezier(.16, .84, .28, 1);

  --z-header: 100;
  --z-menu: 200;
  --z-dialog: 400;
}

/* ---- per-script typography ------------------------------------------------
   Lao and Thai carry stacked vowels and tone marks: they need more leading
   than a Latin-only scale, and must never receive negative tracking.        */
html[lang="lo"] {
  --f-display: 'Noto Serif Lao', 'Noto Serif', serif;
  --f-body: 'Noto Sans Lao Looped', 'Inter', sans-serif;
  --lh-body: 1.85;
  --lh-head: 1.55;
}
html[lang="th"] {
  --f-display: 'Noto Serif Thai', 'Noto Serif', serif;
  --f-body: 'Noto Sans Thai Looped', 'Inter', sans-serif;
  --lh-body: 1.85;
  --lh-head: 1.5;
}
html[lang="ja"] {
  --f-display: 'Noto Serif JP', 'Noto Serif', serif;
  --f-body: 'Noto Sans JP', 'Inter', sans-serif;
  --lh-body: 1.85;
  --lh-head: 1.45;
}
html[lang="ko"] {
  --f-display: 'Noto Serif KR', 'Noto Serif', serif;
  --f-body: 'Noto Sans KR', 'Inter', sans-serif;
  --lh-body: 1.8;
  --lh-head: 1.42;
  /* Korean must break at spaces, not mid-word: without this a heading splits a
     noun from its particle ("인력 / 을") which reads as a typo. */
  word-break: keep-all;
}
/* Japanese: apply full kinsoku so a line never opens with a closing bracket or
   a small kana. Lao and Thai are intentionally left alone — they have no word
   spaces, so they rely on the browser's dictionary line-breaker. */
html[lang="ja"] { line-break: strict; }

/* Latin-only micro-tracking; never applied to Lao/Thai/JP/KR */
html[lang="en"] .u-tight { letter-spacing: -.018em; }