/* ============================================================
   Digital Marketing — Strategy, Judgment & Execution
   Edition 3 · Design tokens
   An academic editorial system. Crimson, paper, serif.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;0,6..72,800;1,6..72,400;1,6..72,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----------------------------------------------------------
     PALETTE — paper, ink, crimson
     ---------------------------------------------------------- */
  --ink:        #1a1612;   /* warm near-black, primary text */
  --ink-2:      #3a342d;   /* secondary text */
  --ash:        #6b5f52;   /* tertiary text, labels */
  --ash-2:      #a89e8e;   /* very soft text */

  --paper:      #faf6ec;   /* page background, warm cream */
  --paper-2:    #f4eedf;   /* deeper cream, cards */
  --paper-3:    #ece4d0;   /* warm sand, table rows */
  --rule:       #d8cdb6;   /* divider lines */
  --rule-soft:  #e6dec9;   /* hairlines */

  --red:        #a8201a;   /* crimson, brand primary */
  --red-deep:   #7a1612;   /* deep oxblood, hover/press */
  --red-bright: #c8302a;   /* brighter pop, used sparingly */
  --red-tint:   #f4ddd9;   /* faint wash, callout bg */
  --red-deeper: #5a0e0b;   /* very dark, headers on cream */

  --gold:       #b8893a;   /* refined gold, chapter numerals */
  --gold-tint:  #f1e4c5;   /* soft gold background */

  --black:      #0d0a07;   /* hard black for dark sections */
  --white:      #ffffff;

  /* Korean flag colours — reserved for that icon only */
  --korea-red:  #CD2E3A;
  --korea-blue: #0047A0;

  /* Status (used sparingly) */
  --ok:         #2e6f3a;
  --warn:       #b8893a;
  --err:        #a8201a;

  /* ----------------------------------------------------------
     SEMANTIC ROLES
     ---------------------------------------------------------- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ash);
  --fg-4: var(--ash-2);

  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: var(--paper-3);
  --bg-card: var(--white);
  --bg-dark: var(--ink);

  --on-dark-1: rgba(255,255,255,0.96);
  --on-dark-2: rgba(255,255,255,0.78);
  --on-dark-3: rgba(255,255,255,0.5);
  --on-dark-4: rgba(255,255,255,0.32);

  --link: var(--red);
  --link-hover: var(--red-deep);
  --border: var(--rule);
  --border-soft: var(--rule-soft);
  --accent: var(--red);

  /* ----------------------------------------------------------
     TYPE FAMILIES
     ---------------------------------------------------------- */
  --f-display: 'Newsreader', 'Times New Roman', Times, serif;
  --f-body:    'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --f-sans:    'DM Sans', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* ----------------------------------------------------------
     TYPE SCALE
     ---------------------------------------------------------- */
  --t-h1-size: 3.4rem;
  --t-h1-weight: 700;
  --t-h1-lh: 1.02;
  --t-h1-tracking: -0.025em;

  --t-h2-size: 1.85rem;
  --t-h2-weight: 700;
  --t-h2-lh: 1.18;
  --t-h2-tracking: -0.015em;

  --t-h3-size: 1.35rem;
  --t-h3-weight: 700;
  --t-h3-lh: 1.3;

  --t-h4-size: 1.05rem;
  --t-h4-weight: 700;

  --t-body-size: 1.075rem;
  --t-body-weight: 400;
  --t-body-lh: 1.7;

  --t-lead-size: 1.25rem;
  --t-lead-weight: 400;
  --t-lead-lh: 1.55;

  --t-small-size: 0.92rem;
  --t-small-lh: 1.6;

  --t-label-size: 0.72rem;
  --t-label-tracking: 0.14em;

  --t-kicker-size: 0.7rem;
  --t-kicker-tracking: 0.22em;

  /* ----------------------------------------------------------
     SPACING — 4 / 8 grid
     ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  80px;
  --s-10: 100px;
  --s-11: 140px;

  --container-max: 1320px;
  --reader-max: 920px;
  --gutter: 1px;

  /* ----------------------------------------------------------
     RADII — print feel, very small only
     ---------------------------------------------------------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;

  /* ----------------------------------------------------------
     RULES
     ---------------------------------------------------------- */
  --rule-thin:  1px solid var(--border);
  --rule-hair:  1px solid var(--border-soft);
  --rule-thick: 2px solid var(--ink);
  --rule-red:   2px solid var(--red);
  --rule-gold:  1px solid var(--gold);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --d-fast: 150ms;
  --d-med:  220ms;
  --d-slow: 320ms;

  /* ----------------------------------------------------------
     SHADOWS — used very sparingly, books are flat
     ---------------------------------------------------------- */
  --shadow-0: none;
  --shadow-page: 0 1px 0 rgba(26,22,18,0.04), 0 24px 56px -16px rgba(26,22,18,0.18);
  --shadow-card-hover: 0 4px 14px rgba(26,22,18,0.08);
}