/* =====================================================================
   9 NGƯỜI 10 Ý — Foundations
   Color, type, spacing, and elevation tokens
   ===================================================================== */

/* --- WEBFONTS ---------------------------------------------------------- */
/* Source Serif 4 — content / editor / published prose
   DM Sans         — UI chrome, navigation, buttons, labels
   JetBrains Mono  — metadata (round counters, timestamps), occasional accents
   All three have strong Vietnamese diacritic support. */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   COLOR — LIGHT (default)
   Warm paper + ink. Đồng ý = forest green. Phản đối = lacquer red.
   ============================================================ */

:root {
  /* —— Surfaces —— */
  --paper:        #F7F2E8;  /* page background — slightly warm cream, like aged book paper */
  --paper-2:      #EFE8D9;  /* slightly recessed surface (sidebar wells, code blocks) */
  --paper-3:      #E6DDC9;  /* dividers / inactive chips */
  --card:         #FFFCF5;  /* raised card surface, just barely whiter than paper */
  --card-2:       #FAF5E8;  /* secondary card (undercards on topic page) */

  /* —— Ink (foreground) —— */
  --ink:          #1C1814;  /* primary text — warm near-black */
  --ink-2:        #3F3A33;  /* secondary text */
  --ink-3:        #6E665B;  /* tertiary / metadata */
  --ink-4:        #9C9486;  /* placeholder / disabled */
  --rule:         #DDD3BC;  /* hairline borders */
  --rule-strong:  #B8AC91;  /* stronger borders (focus, active inputs) */

  /* —— Sides — Đồng ý (FOR) —— */
  --for-50:       #EAF1E6;
  --for-100:      #D2E2C8;
  --for-200:      #A8C798;
  --for-400:      #5F8A4C;
  --for:          #3F6B30;  /* primary green — forest, earthy, serious */
  --for-700:      #2C4E20;
  --for-900:      #182B11;
  --for-ink:      #FBFBF6;  /* text on solid --for */

  /* —— Sides — Phản đối (AGAINST) —— */
  --against-50:   #F5E8E2;
  --against-100:  #ECD0C5;
  --against-200:  #D9A293;
  --against-400:  #B5523F;
  --against:      #9A3A28;  /* primary red — lacquer / Vietnamese vermilion, restrained */
  --against-700:  #74281A;
  --against-900:  #441208;
  --against-ink:  #FBF7F2;  /* text on solid --against */

  /* —— Editorial / accents —— */
  --flame:        #C97B2A;  /* "main event" featured exchange marker — amber, not orange */
  --flame-bg:     #F9ECD7;
  --gold:         #A8862E;  /* curator pick / editorial highlight */
  --ink-quote:    #4A4239;  /* used in pulled quotes, parent-claim pin */

  /* —— Status / utility —— */
  --info:         #2F5D78;
  --warn:         #A87514;
  --danger:       #9A3A28;  /* shares hue with --against intentionally */
  --success:      #3F6B30;  /* shares hue with --for intentionally */

  /* —— Selection —— */
  --selection-bg: rgba(168, 134, 46, 0.22);
  --selection-fg: var(--ink);

  /* ============================================================
     TYPE
     ============================================================ */

  --font-serif:   'Lora', 'Source Serif 4', 'Charter', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — tuned for editorial reading */
  --text-2xs:    11px;
  --text-xs:     12px;
  --text-sm:     14px;
  --text-base:   16px;
  --text-md:     17px;   /* default body for editorial reading */
  --text-lg:     19px;
  --text-xl:     22px;
  --text-2xl:    28px;
  --text-3xl:    36px;
  --text-4xl:    48px;
  --text-5xl:    64px;
  --text-display: 80px;

  /* Line-heights — generous, editorial */
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.5;
  --lh-prose:    1.62;   /* default body */
  --lh-loose:    1.78;

  /* Letter-spacing — UI labels get tracked tighter, all-caps get tracked open */
  --tracking-tight:  -0.022em;  /* large display */
  --tracking-snug:   -0.012em;  /* h1 / h2 */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;    /* small caps / overlines */
  --tracking-wider:  0.12em;    /* allcaps eyebrows */

  /* Weights — DM Sans 400/500/600/700, Source Serif 4 400/500/600/700 */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;
  --space-13: 128px;

  /* ============================================================
     RADII — small, intentional. Venues are made of slabs, not pills.
     ============================================================ */
  --radius-0:    0;
  --radius-1:    2px;     /* default inputs, chips */
  --radius-2:    4px;     /* cards */
  --radius-3:    8px;     /* modals, large surfaces */
  --radius-pill: 999px;   /* used SPARINGLY — only side chips and avatars */

  /* ============================================================
     ELEVATION — restrained. Venues don't float.
     ============================================================ */
  --shadow-1: 0 1px 0 rgba(28, 24, 20, 0.04), 0 1px 2px rgba(28, 24, 20, 0.05);
  --shadow-2: 0 1px 0 rgba(28, 24, 20, 0.05), 0 3px 8px rgba(28, 24, 20, 0.07);
  --shadow-3: 0 2px 0 rgba(28, 24, 20, 0.06), 0 10px 24px rgba(28, 24, 20, 0.10);
  --shadow-modal: 0 24px 80px rgba(28, 24, 20, 0.22), 0 4px 12px rgba(28, 24, 20, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(28, 24, 20, 0.06);

  /* Focus ring — gold, never blue */
  --focus-ring: 0 0 0 3px rgba(168, 134, 46, 0.32);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --content-narrow: 640px;   /* single-column reading width */
  --content-base:   720px;   /* default thread width */
  --content-wide:   1100px;  /* feed + composer */
  --duel-column:    420px;   /* one side of a two-column duel */
  --duel-total:     900px;   /* full two-column duel width incl. gutter */

  /* ============================================================
     MOTION — moderate, deliberate. No bounces.
     ============================================================ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   COLOR — DARK
   Warm-charcoal venue at night. Same hues, recalibrated.
   ============================================================ */

:root.dark, [data-theme='dark'] {
  --paper:        #16130F;
  --paper-2:      #1E1A14;
  --paper-3:      #27221A;
  --card:         #1B1813;
  --card-2:       #221E17;

  --ink:          #F0EAD9;
  --ink-2:        #C9C0AB;
  --ink-3:        #908774;
  --ink-4:        #5F584B;
  --rule:         #2D2820;
  --rule-strong:  #4A4234;

  --for-50:       #1B2417;
  --for-100:      #25351F;
  --for-200:      #3B5631;
  --for-400:      #76A562;
  --for:          #8DBE77;
  --for-700:      #B0D69E;
  --for-900:      #D8EAC9;
  --for-ink:      #0E1A07;

  --against-50:   #261712;
  --against-100:  #38201A;
  --against-200:  #5A3127;
  --against-400:  #C26854;
  --against:      #D88374;
  --against-700:  #ECB3A6;
  --against-900:  #F8DDD3;
  --against-ink:  #1B0905;

  --flame:        #E4A256;
  --flame-bg:     #2B1F0F;
  --gold:         #D9B458;
  --ink-quote:    #CFC4A8;

  --info:         #7BB4D2;
  --warn:         #E0B45A;
  --danger:       #D88374;
  --success:      #8DBE77;

  --selection-bg: rgba(217, 180, 88, 0.28);
  --selection-fg: var(--ink);

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 2px 0 rgba(0, 0, 0, 0.6), 0 12px 28px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 1px 0 rgba(255, 248, 224, 0.04);

  --focus-ring: 0 0 0 3px rgba(217, 180, 88, 0.4);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt in via class or global reset
   ============================================================ */

::selection { background: var(--selection-bg); color: var(--selection-fg); }

.ds-base {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* — Display: editorial topic titles, marketing hero — */
.ds-display {
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}

/* — Headings — */
.ds-h1 {
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
  color: var(--ink);
}
.ds-h2 {
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
  color: var(--ink);
}
.ds-h3 {
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.ds-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* — Body — */
.ds-prose {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--ink);
}
.ds-prose-lg {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-prose);
  color: var(--ink);
}
.ds-ui {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--ink);
}
.ds-ui-md {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--ink);
}

/* — Eyebrows / labels — */
.ds-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* — Meta (round counters, timestamps) — */
.ds-meta {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-3);
}

/* — Quote — */
.ds-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-prose);
  color: var(--ink-quote);
  border-left: 2px solid var(--rule-strong);
  padding-left: var(--space-4);
}