/* Trensli color tokens — emerald + ink + neutrals.
   Ratio target: ~70% neutrals, ~20% ink text, ~10% emerald action. */
:root {
  /* Base palette */
  --emerald: #10B981;        /* Brand · CTAs */
  --emerald-dark: #059669;   /* Hover · Press */
  --ink: #18181B;            /* Headings · body */
  --slate: #111827;          /* Dark surfaces */
  --mid-gray: #52525B;       /* Secondary text */
  --light-gray: #A1A1AA;     /* Tertiary · captions */
  --border-gray: #E8E8EC;    /* Dividers · borders */
  --bg-gray: #F5F7F9;        /* Surfaces */
  --mint-wash: #ECFDF5;      /* Success · highlights */
  --mint-accent: #CBF3E4;    /* Tags · badges */
  --warm-cream: #FDF8F3;     /* Editorial */
  --white: #FFFFFF;

  /* Semantic aliases */
  --color-brand: var(--emerald);
  --color-brand-hover: var(--emerald-dark);

  --text-heading: var(--ink);
  --text-body: var(--mid-gray);
  --text-strong: var(--ink);
  --text-muted: var(--light-gray);
  --text-on-brand: var(--white);
  --text-on-dark: var(--white);

  --surface-page: var(--bg-gray);
  --surface-card: var(--white);
  --surface-dark: var(--slate);
  --surface-highlight: var(--mint-wash);
  --surface-editorial: var(--warm-cream);

  --border-default: var(--border-gray);
  --border-strong: var(--ink);

  --accent-badge-bg: var(--mint-accent);
  --accent-badge-text: var(--emerald-dark);

  /* Status (derived, emerald-forward brand) */
  --status-success: var(--emerald);
  --status-success-bg: var(--mint-wash);
}