/* ============================================================
   COLORS — Sébastien Reuille
   Palette exported from the brand site (Relume). A neutral
   grayscale spine plus four warm/dark chromatic families:
   turmeric (gold accent), cod-gray (near-black), kumera
   (olive-gold), alabaster (off-white → charcoal).
   ============================================================ */

:root {
  /* --- Neutral (grayscale spine) --- */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #d8d8d8;
  --color-neutral-light: #b2b2b2;
  --color-neutral: #7f7f7f;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #191919;
  --color-neutral-darkest: #000000;

  /* --- Turmeric (the gold accent) --- */
  --color-turmeric-lightest: #faf7ed;
  --color-turmeric-lighter: #f5efdb;
  --color-turmeric-light: #dec982;
  --color-turmeric: #d0b24d;
  --color-turmeric-dark: #a68e3d;
  --color-turmeric-darker: #53471e;
  --color-turmeric-darkest: #3e3517;

  /* --- Cod Gray (near-black surfaces) --- */
  --color-cod-gray-lightest: #e7e7e7;
  --color-cod-gray-lighter: #cfcfcf;
  --color-cod-gray-light: #585858;
  --color-cod-gray: #111111;
  --color-cod-gray-dark: #0d0d0d;
  --color-cod-gray-darker: #060606;
  --color-cod-gray-darkest: #050505;

  /* --- Kumera (olive-gold) --- */
  --color-kumera-lightest: #f3f1e8;
  --color-kumera-lighter: #e7e3d2;
  --color-kumera-light: #ad9d63;
  --color-kumera: #8b7321;
  --color-kumera-dark: #6f5c1a;
  --color-kumera-darker: #372e0d;
  --color-kumera-darkest: #292209;

  /* --- Alabaster (off-white → charcoal) --- */
  --color-alabaster-lightest: #fefefe;
  --color-alabaster-lighter: #fdfdfd;
  --color-alabaster-light: #fafafa;
  --color-alabaster: #f8f8f8;
  --color-alabaster-dark: #c6c6c6;
  --color-alabaster-darker: #636363;
  --color-alabaster-darkest: #4a4a4a;

  /* --- Alpha ramps — white over dark surfaces --- */
  --color-white-5: color-mix(in srgb, var(--color-white), transparent 95%);
  --color-white-10: color-mix(in srgb, var(--color-white), transparent 90%);
  --color-white-15: color-mix(in srgb, var(--color-white), transparent 85%);
  --color-white-20: color-mix(in srgb, var(--color-white), transparent 80%);
  --color-white-30: color-mix(in srgb, var(--color-white), transparent 70%);
  --color-white-40: color-mix(in srgb, var(--color-white), transparent 60%);
  --color-white-50: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-white-60: color-mix(in srgb, var(--color-white), transparent 40%);

  /* --- Alpha ramps — black over light surfaces --- */
  --color-black-5: color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-black-10: color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-black-15: color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-black-20: color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-black-30: color-mix(in srgb, var(--color-neutral-darkest), transparent 70%);
  --color-black-50: color-mix(in srgb, var(--color-neutral-darkest), transparent 50%);
  --color-black-60: color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);

  /* --- Semantic aliases --- */
  --brand-accent: var(--color-turmeric);
  --brand-ink: var(--color-neutral-darkest);
  --brand-surface: var(--color-white);
  --brand-surface-muted: var(--color-neutral-lightest);
  --brand-surface-dark: var(--color-cod-gray);
  --text-body: var(--color-neutral-darkest);
  --text-muted: var(--color-neutral);
  --text-on-dark: var(--color-white);
}