/*
 * VocaSensei Elevation Tokens
 * M3 uses TONAL elevation in light mode: elevated surfaces gain a primary-color wash
 * in addition to (very subtle) shadow. Tonal overlays use color-mix.
 *
 * Levels 0–5 follow M3 elevation dp spec:
 *   0 = flat (resting)   1 = 1dp   2 = 3dp   3 = 6dp   4 = 8dp   5 = 12dp
 */

:root {
  /* ── Shadow-based elevation (subtle; M3 light mode is mostly tonal) ── */
  --elevation-0: none; /* @kind other */
  --elevation-1:
    0px 1px 2px oklch(0 0 0 / 0.20),
    0px 1px 3px 1px oklch(0 0 0 / 0.10); /* @kind other */
  --elevation-2:
    0px 1px 2px oklch(0 0 0 / 0.20),
    0px 2px 6px 2px oklch(0 0 0 / 0.10); /* @kind other */
  --elevation-3:
    0px 4px 8px 3px oklch(0 0 0 / 0.10),
    0px 1px 3px oklch(0 0 0 / 0.20); /* @kind other */
  --elevation-4:
    0px 6px 10px 4px oklch(0 0 0 / 0.10),
    0px 2px 3px oklch(0 0 0 / 0.20); /* @kind other */
  --elevation-5:
    0px 8px 12px 6px oklch(0 0 0 / 0.10),
    0px 4px 4px oklch(0 0 0 / 0.20); /* @kind other */

  /* ── Tonal elevation overlays ── */
  /* Applied as a semi-transparent primary-color layer on top of surface background.
     Use with: background: color-mix(in oklch, var(--color-primary) N%, var(--color-surface)) */
  --elevation-tonal-0-mix: 0%; /* @kind other */
  --elevation-tonal-1-mix: 5%; /* @kind other */
  --elevation-tonal-2-mix: 8%; /* @kind other */
  --elevation-tonal-3-mix: 11%; /* @kind other */
  --elevation-tonal-4-mix: 12%; /* @kind other */
  --elevation-tonal-5-mix: 14%; /* @kind other */

  /* ── Pre-mixed tonal surfaces ── */
  /* These reflect elevation-1 and elevation-2 surface states */
  --color-surface-tonal-1: color-mix(in oklch, var(--color-primary) 5%,  var(--color-surface)); /* @kind other */
  --color-surface-tonal-2: color-mix(in oklch, var(--color-primary) 8%,  var(--color-surface)); /* @kind other */
  --color-surface-tonal-3: color-mix(in oklch, var(--color-primary) 11%, var(--color-surface)); /* @kind other */
  --color-surface-tonal-5: color-mix(in oklch, var(--color-primary) 14%, var(--color-surface)); /* @kind other */

  /* ── State layer overlays (for hover/focus/press) ── */
  --state-hover-opacity:   0.08; /* @kind other */
  --state-focus-opacity:   0.12; /* @kind other */
  --state-press-opacity:   0.12; /* @kind other */
  --state-drag-opacity:    0.16; /* @kind other */
  --state-disabled-opacity: 0.38; /* @kind other */

  --state-layer-hover:  color-mix(in oklch, var(--color-primary) 8%,  transparent); /* @kind other */
  --state-layer-focus:  color-mix(in oklch, var(--color-primary) 12%, transparent); /* @kind other */
  --state-layer-press:  color-mix(in oklch, var(--color-primary) 12%, transparent); /* @kind other */
}