/* Kỷ Niệm Bé / My Little Keep — brand tokens (Option 1 "Keepsake Box")
   Source of truth: brand/BRAND.md. Import once, globally. */

:root {
  /* Core colors */
  --brand-sage: #3F6E5B;        /* primary: logo box, buttons, links, headings accents */
  --brand-sage-dark: #2E5244;   /* hover/pressed for sage, text on mint */
  --brand-peach: #F4B996;       /* accent: logo heart, highlights. NOT for text on light bg */
  --brand-mint: #DCE9E1;        /* soft surfaces, tags, selected states */
  --brand-milk: #FBF8F3;        /* page background */
  --brand-white: #FFFFFF;       /* cards */
  --brand-ink: #24332D;         /* main text */
  --brand-ink-muted: #5C6B65;   /* secondary text (5.3:1 on milk) */
  --brand-line: #E6E1D8;        /* borders, dividers */

  /* My Little Keep (English site) accent swap */
  --mlk-coral: #D9774F;         /* MLK logo box, large buttons (white text only ≥18px bold) */
  --mlk-coral-dark: #B4582F;    /* MLK text accent / links (4.8:1 on white) */
  --mlk-peach-bg: #FFF1E8;      /* MLK soft surfaces */

  /* Type */
  --font-display: "Nunito", ui-rounded, system-ui, sans-serif;      /* 700/800 */
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;             /* 400/500/600 */

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 10px rgba(36, 51, 45, 0.06), 0 12px 32px rgba(36, 51, 45, 0.06);
}

/* Per-site accent: put data-brand="mlk" on <html> for mylittlekeep.com.
   Named --brand-accent* (not --accent*) so they never touch the family pages' own --accent. */
:root              { --brand-accent: var(--brand-sage); --brand-accent-hover: var(--brand-sage-dark); --brand-accent-text: var(--brand-sage);     --brand-accent-soft: var(--brand-mint); }
[data-brand="mlk"] { --brand-accent: var(--mlk-coral);  --brand-accent-hover: var(--mlk-coral-dark);  --brand-accent-text: var(--mlk-coral-dark); --brand-accent-soft: var(--mlk-peach-bg); }