/* ===========================================================================
   Buro Inzicht — Color tokens
   A warm, dark-first palette: charcoal/black surfaces, an old-gold accent,
   a copper companion, plus muted xanadu (sage) and cream/merino paper tones.
   =========================================================================== */

:root {
  /* --- Neutrals (shade-0 darkest → lightest) ----------------------------- */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #dad9d9;
  --color-neutral-light: #b5b4b3;
  --color-neutral: #848281;
  --color-neutral-dark: #53504e;
  --color-neutral-darker: #221e1c;
  --color-neutral-darkest: #0a0503;

  /* --- Old Gold (primary accent) ----------------------------------------- */
  --color-old-gold-lightest: #faf6ec;
  --color-old-gold-lighter: #f6edda;
  --color-old-gold-light: #e0c27e;
  --color-old-gold: #d4a847;
  --color-old-gold-dark: #a98638;
  --color-old-gold-darker: #54431c;
  --color-old-gold-darkest: #3f3215;

  /* --- Copper (secondary / gradient partner) ----------------------------- */
  --color-copper-lightest: #f9efeb;
  --color-copper-lighter: #f3e0d7;
  --color-copper-light: #d59475;
  --color-copper: #c4673a;
  --color-copper-dark: #9c522e;
  --color-copper-darker: #4e2917;
  --color-copper-darkest: #3a1e11;

  /* --- Xanadu (muted sage) ----------------------------------------------- */
  --color-xanadu-lightest: #f1f3f1;
  --color-xanadu-lighter: #e4e8e4;
  --color-xanadu-light: #a1aea1;
  --color-xanadu: #7a8c7a;
  --color-xanadu-dark: #617061;
  --color-xanadu-darker: #303830;
  --color-xanadu-darkest: #242a24;

  /* --- Merino (warm paper) ----------------------------------------------- */
  --color-merino-lightest: #fefefd;
  --color-merino-lighter: #fefdfc;
  --color-merino-light: #fbf9f5;
  --color-merino: #faf7f2;
  --color-merino-dark: #c8c5c1;
  --color-merino-darker: #646260;
  --color-merino-darkest: #4b4a48;

  /* --- Charade (cool slate, for cooler dark sections) -------------------- */
  --color-charade-lightest: #eaeaeb;
  --color-charade-lighter: #d5d6d8;
  --color-charade-light: #6c7079;
  --color-charade: #2e3440;
  --color-charade-dark: #242933;
  --color-charade-darker: #121419;
  --color-charade-darkest: #0d0f13;

  /* --- Alpha overlays ---------------------------------------------------- */
  --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-40: color-mix(in srgb, var(--color-white), transparent 60%);
  --color-white-60: color-mix(in srgb, var(--color-white), transparent 25%);
  --color-dark-5:  color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-dark-10: color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-dark-15: color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-dark-20: color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-dark-50: color-mix(in srgb, var(--color-neutral-darkest), transparent 50%);
  --color-dark-60: color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);

  /* =========================================================================
     Semantic aliases — prefer these in components & layouts.
     ========================================================================= */

  /* Brand */
  --brand-gold: var(--color-old-gold);
  --brand-gold-deep: var(--color-old-gold-dark);
  --brand-copper: var(--color-copper);
  --gradient-brand: linear-gradient(135deg, var(--color-old-gold) 20%, var(--color-copper));
  --gradient-brand-deep: linear-gradient(135deg, var(--color-old-gold-dark), var(--color-copper-dark));

  /* Surfaces */
  --surface-base: var(--color-neutral-darker);     /* default dark page bg   */
  --surface-deep: var(--color-neutral-darkest);    /* near-black             */
  --surface-slate: var(--color-charade);           /* cool dark alt          */
  --surface-gold: var(--color-old-gold);           /* gold feature panel     */
  --surface-gold-deep: var(--color-old-gold-dark); /* deep gold panel        */
  --surface-cream: var(--color-old-gold-lightest); /* light warm section     */
  --surface-paper: var(--color-merino);            /* light neutral section  */

  /* Text */
  --text-on-dark: var(--color-white);
  --text-on-dark-muted: var(--color-white-60);
  --text-on-light: var(--color-neutral-darkest);
  --text-on-light-muted: var(--color-dark-60);
  --text-accent: var(--color-old-gold);

  /* Lines */
  --border-on-dark: var(--color-white-20);
  --border-on-light: var(--color-dark-15);

  /* Focus */
  --focus-ring: var(--color-old-gold);
}