/* forStory — Color tokens
   CI source: corporate-design.skill §01.
   Mint is a SIGNAL colour — always used sparingly, never as a full fill.
   Backgrounds are only ever White or Dark. Body text is only Dark or White,
   NEVER mint. Apricot for single accents only. */

:root {
  /* ---- Base brand palette ---- */
  --mint: #4FF1C5;            /* Mint Web — digital media, screens (primary) */
  --mint-print: #57DFB9;      /* Mint Print — Pantone 333C/332U */
  --mint-website: #2BE6B4;    /* Mint Website — small text on dark, better legibility */
  --dark: #212125;            /* Schwarz / Dark — backgrounds + body text */
  --apricot: #FDA55D;         /* Apricot — sparse accents, single highlights */
  --white: #FFFFFF;

  /* ---- Dark surface ramp (tints of --dark for hairlines & elevation) ---- */
  --dark-900: #212125;
  --dark-800: #2b2b30;
  --dark-700: #37373d;
  --dark-600: #4a4a52;
  --dark-500: #6b6b73;

  /* ---- Neutral / grey ramp (on light) ---- */
  --grey-100: #f4f4f5;
  --grey-200: #e7e7e9;
  --grey-300: #cfcfd3;
  --grey-400: #9a9aa1;
  --grey-500: #6b6b73;

  /* ---- Mint tints (for subtle wash / hover only, never body fills) ---- */
  --mint-tint-12: rgba(79, 241, 197, 0.12);
  --mint-tint-24: rgba(79, 241, 197, 0.24);

  /* ================= Semantic aliases ================= */
  /* Surfaces — only white or dark, per CI */
  --surface-light: var(--white);
  --surface-dark: var(--dark);
  --surface-card: var(--white);
  --surface-card-dark: var(--dark-800);

  /* Text — never mint for body */
  --text-on-light: var(--dark);
  --text-on-dark: var(--white);
  --text-muted-light: var(--grey-500);
  --text-muted-dark: rgba(255, 255, 255, 0.66);

  /* Accents & signals */
  --accent: var(--mint);            /* signal / primary accent */
  --accent-quote: var(--mint);      /* quotes rendered in mint */
  --accent-quote-dark: var(--mint-website);
  --accent-warm: var(--apricot);    /* sparse warm accent, buttons/highlights */

  /* Lines & borders */
  --rule: var(--mint);              /* vertical mint section line */
  --border-light: var(--grey-200);
  --border-dark: var(--dark-700);

  /* Interactive states */
  --accent-hover: #3fe0b4;          /* mint, slightly deeper on hover */
  --accent-press: #34cba3;
  --warm-hover: #f9963f;
  --warm-press: #ef8a2f;

  /* Focus */
  --focus-ring: var(--mint);
}