/* MORA color system.
   PROTAGONISTS — lilac + chartreuse. They carry the brand and COEXIST as details across
   a piece (alternating tags, numbers, dots, touches). Avoid two large equal accent FIELDS
   fighting; keep one dominant surface and let the other appear as accents.
   DETAIL-ONLY — orange + dark purple. Supporting accents for small touches (a number, an
   underline, a dot, an icon, a tiny tag). NEVER as large protagonist surfaces or backgrounds.
   Pair everything with ink content and white/paper decorative graphics. */
:root {
  /* Base palette */
  --color-ink: #1a1a1a;          /* logo + text black */
  --color-paper: #f4f4f4;        /* brand off-white (logo white) */
  --color-white: #ffffff;

  /* Protagonist A — lilac */
  --color-lilac: #dab8dd;
  --color-lilac-bright: #cfa0da; /* saturated lilac variant */
  --color-lilac-tint: #f0e3f1;   /* washes, soft surfaces */
  --color-lilac-deep: #a878ad;   /* hover / pressed on lilac */

  /* Protagonist B — chartreuse */
  --color-chartreuse: #d5d852;
  --color-chartreuse-bright: #c9ca4a;
  --color-chartreuse-tint: #f1f2cf;
  --color-chartreuse-deep: #aaad34;

  /* Detail C — orange (touches only, never a protagonist surface) */
  --color-orange: #d1520a;       /* burnt orange */
  --color-orange-bright: #e5681c;
  --color-orange-tint: #f8e2d1;
  --color-orange-deep: #ad430a;

  /* Detail D — dark purple / indigo (touches only, never a protagonist surface) */
  --color-purple: #4c349b;       /* deep indigo-purple */
  --color-purple-bright: #6a52c4;
  --color-purple-tint: #ded7f1;
  --color-purple-deep: #3a2878;

  /* Neutral ramp (derived from ink) */
  --gray-900: #1a1a1a;
  --gray-700: #444444;
  --gray-500: #6f6f6f;
  --gray-300: #c9c9c9;
  --gray-200: #e2e2e2;
  --gray-100: #efefef;

  /* Semantic aliases */
  --text-strong: var(--color-ink);
  --text-body: #2e2e2e;
  --text-muted: var(--gray-500);
  --text-on-ink: var(--color-paper);
  --text-on-accent: var(--color-ink); /* both accents are light — ink on top */

  --surface-page: var(--color-paper);
  --surface-card: var(--color-white);
  --surface-ink: var(--color-ink);
  --surface-accent: var(--color-lilac);       /* default accent surface */
  --surface-accent-tint: var(--color-lilac-tint);

  --border-subtle: var(--gray-200);
  --border-strong: var(--color-ink);

  --focus-ring: var(--color-ink);
}

/* Accent theme scopes — set ONE on a page/section root. Never nest the two. */
[data-accent="lilac"] {
  --accent: var(--color-lilac);
  --accent-tint: var(--color-lilac-tint);
  --accent-deep: var(--color-lilac-deep);
  --surface-accent: var(--color-lilac);
  --surface-accent-tint: var(--color-lilac-tint);
}
[data-accent="chartreuse"] {
  --accent: var(--color-chartreuse);
  --accent-tint: var(--color-chartreuse-tint);
  --accent-deep: var(--color-chartreuse-deep);
  --surface-accent: var(--color-chartreuse);
  --surface-accent-tint: var(--color-chartreuse-tint);
}
/* Detail accents — for small touches only; do not set these as a section's dominant surface. */
[data-detail="orange"] {
  --detail: var(--color-orange);
  --detail-bright: var(--color-orange-bright);
  --detail-tint: var(--color-orange-tint);
  --detail-deep: var(--color-orange-deep);
}
[data-detail="purple"] {
  --detail: var(--color-purple);
  --detail-bright: var(--color-purple-bright);
  --detail-tint: var(--color-purple-tint);
  --detail-deep: var(--color-purple-deep);
}
:root {
  --accent: var(--color-lilac);
  --accent-tint: var(--color-lilac-tint);
  --accent-deep: var(--color-lilac-deep);
}