/* ==========================================================================
   01-tokens.css
   Design tokens - palette, type stack, rhythm, elevation, per-language fonts.
   Load order: 1 of 7 - see README.md ("Stylesheet layer order").

   Palette is purple (--plum-*) plus yellow (--sun-*), on a purple-tinted
   off-white. Purple carries structure: headers, dark panels, primary buttons.
   Yellow is the accent and never covers a large area, because yellow type on
   white cannot reach a readable contrast ratio. Yellow always sits on plum-800
   or darker, or is used as a fill behind near-black text.

   --slate-* is the warm-neutral ramp for secondary text, borders and muted
   labels. It is tinted toward purple so greys never look green beside --plum-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Purples */
  --plum-900: #241539;
  --plum-800: #33205B;
  --plum-700: #452C79;
  --plum-600: #573A93;
  --plum-500: #6D4BB0;
  --plum-300: #A98FD1;
  --plum-100: #E1D7F2;
  --plum-50:  #F1ECFA;

  /* Yellows */
  --sun-600: #B8860B;
  --sun-500: #E3AF1B;
  --sun-400: #F2C438;
  --sun-300: #F8DA78;
  --sun-100: #FDF2CE;

  /* Neutrals, tinted toward the purple so they never read as green */
  --slate-800: #2E2739;
  --slate-700: #453C52;
  --slate-500: #6B6178;
  --slate-300: #B3AAC0;
  --slate-100: #E9E4F0;

  /* Surfaces */
  --cream:    #FBF9FE;
  --cream-2:  #F3EFFA;
  --paper:    #FFFFFF;
  --ink:      #241E2E;
  --ink-soft: #574E66;
  --line:     rgba(46, 39, 57, 0.14);
  --line-soft:rgba(46, 39, 57, 0.08);

  /* Brand chat colours - these belong to the apps, not to us */
  --telegram: #2AABEE;
  --zalo:     #0068FF;
  --online:   #2FBF71;

  /* Type. Montserrat carries Latin and Vietnamese; Noto Sans KR covers Hangul. */
  --font: 'Montserrat', 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rhythm */
  --shell:  1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Elevation, cast in the deep purple rather than neutral black */
  --shadow-sm: 0 2px 8px rgba(46, 39, 57, .08);
  --shadow:    0 12px 34px -14px rgba(36, 21, 57, .30);
  --shadow-lg: 0 34px 70px -30px rgba(36, 21, 57, .45);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Korean pages: put the Hangul face first so mixed lines stay even. */
html[data-lang="ko"] { --font: 'Montserrat', 'Noto Sans KR', system-ui, sans-serif; }

/* Hangul breaks per character by default, which splits words across lines.
   keep-all restricts breaks to spaces, the way Korean typesetting expects. */
html[data-lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }