/* Dee's Portfolio — Color tokens
   A monochrome, light-theme palette. One neutral ramp does the heavy
   lifting; four near-grey "chromatic" ramps add subtle warmth/coolness.
   shade naming: lightest -> darkest. */

:root {
  /* ---- Neutral ramp (primary) ---- */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #d9d9d9;
  --color-neutral-light: #b4b4b4;
  --color-neutral: #838383;
  --color-neutral-dark: #525251;
  --color-neutral-darker: #20201f;
  --color-neutral-darkest: #080807;

  /* ---- Cod Gray (near-black neutral) ---- */
  --color-cod-gray-lightest: #e6e6e6;
  --color-cod-gray-lighter: #cdcdcd;
  --color-cod-gray-light: #515151;
  --color-cod-gray: #070707;
  --color-cod-gray-dark: #050505;
  --color-cod-gray-darkest: #020202;

  /* ---- Dove Gray (warm grey) ---- */
  --color-dove-gray-lightest: #f0efef;
  --color-dove-gray-lighter: #e2e0e0;
  --color-dove-gray-light: #999393;
  --color-dove-gray: #6e6665;
  --color-dove-gray-dark: #585150;
  --color-dove-gray-darker: #2c2828;
  --color-dove-gray-darkest: #211e1e;

  /* ---- Oslo Gray (cool grey) ---- */
  --color-oslo-gray-lightest: #f2f4f4;
  --color-oslo-gray-lighter: #e6e9e9;
  --color-oslo-gray-light: #a7b2b3;
  --color-oslo-gray: #829293;
  --color-oslo-gray-dark: #687475;
  --color-oslo-gray-darker: #343a3a;
  --color-oslo-gray-darkest: #272b2c;

  /* ---- Gray Olive (warm taupe) ---- */
  --color-gray-olive-lightest: #f5f5f3;
  --color-gray-olive-lighter: #ecebe8;
  --color-gray-olive-light: #bdbaae;
  --color-gray-olive: #a29d8c;
  --color-gray-olive-dark: #817d70;
  --color-gray-olive-darker: #403e38;
  --color-gray-olive-darkest: #302f2a;

  /* ---- Alpha overlays (used by the elevate shadow + glass system) ---- */
  --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%);
  --color-neutral-darkest-5: color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-neutral-darkest-10: color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-neutral-darkest-15: color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-neutral-darkest-20: color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-neutral-darkest-30: color-mix(in srgb, var(--color-neutral-darkest), transparent 70%);
  --color-neutral-darkest-40: color-mix(in srgb, var(--color-neutral-darkest), transparent 60%);
  --color-neutral-darkest-50: color-mix(in srgb, var(--color-neutral-darkest), transparent 50%);
  --color-neutral-darkest-60: color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);

  /* ---- Semantic aliases (theme-level) ----
     Defaults match Scheme 1/2 (light). Scheme classes override these. */
  --text-primary: var(--color-neutral-darkest);
  --text-muted: var(--color-neutral-dark);
  --surface-page: var(--color-white);
  --surface-card: var(--color-neutral-lightest);
  --border-subtle: var(--color-neutral-darkest-15);
  --accent: var(--color-cod-gray);
  --accent-on: var(--color-white);
}