/* Slowmotion ADV — semantic aliases. Consume these, not the raw ramps.
   [data-theme="invert"] flips a section to the black stage without touching markup. */
:root {
  --text-primary: var(--sm-black);
  --text-secondary: var(--sm-grey-700);
  --text-tertiary: var(--sm-grey-500);
  --text-inverse: var(--sm-white);
  --text-accent: var(--sm-black);
  --text-on-accent: var(--sm-black);
  --text-link: var(--sm-black);
  --text-link-hover: var(--sm-black);

  --surface-page: var(--sm-white);
  --surface-raised: var(--sm-white);
  --surface-muted: var(--sm-grey-100);
  --surface-inverse: var(--sm-black);
  --surface-accent: var(--sm-yellow);
  --surface-accent-tint: var(--sm-yellow-tint);
  --surface-scrim: rgba(0, 0, 0, 0.86);

  --border-default: var(--sm-black);
  /* "Subtle" means quieter in role, never thinner or greyer — rules are always ink. */
  --border-subtle: var(--sm-black);
  --border-strong: var(--sm-black);
  --border-accent: var(--sm-yellow);

  --action-primary-bg: var(--sm-black);
  --action-primary-fg: var(--sm-white);
  --action-primary-bg-hover: var(--sm-yellow);
  --action-primary-fg-hover: var(--sm-black);
  --action-accent-bg: var(--sm-yellow);
  --action-accent-fg: var(--sm-black);
  --action-accent-bg-hover: var(--sm-black);
  --action-accent-fg-hover: var(--sm-yellow);
  --action-quiet-fg: var(--sm-black);
  --action-quiet-bg-hover: var(--sm-yellow);
  --action-disabled-bg: var(--sm-grey-200);
  --action-disabled-fg: var(--sm-grey-500);

  --field-bg: var(--sm-white);
  --field-fg: var(--sm-black);
  --field-border: var(--sm-black);
  --field-placeholder: var(--sm-grey-500);
  --field-border-invalid: var(--sm-red);

  --feedback-error: var(--sm-red);
  --feedback-success: var(--sm-green);
  --feedback-info: var(--sm-blue);
  --feedback-warning: var(--sm-yellow);

  --focus-ring-color: var(--sm-yellow);
  /* Emphasis is ALWAYS yellow, never black — and the bar stops at half the body,
     it does not cross the glyph. Apply as a background-image on the text itself. */
  --highlight: linear-gradient(to top, var(--sm-yellow) 0, var(--sm-yellow) 52%, transparent 52%);
  --marker-accent: var(--sm-yellow);
}

[data-theme="invert"] {
  --text-primary: var(--sm-white);
  --text-secondary: var(--sm-grey-400);
  --text-tertiary: var(--sm-grey-500);
  --text-inverse: var(--sm-black);
  --text-link: var(--sm-white);

  --surface-page: var(--sm-black);
  --surface-raised: var(--sm-ink-800);
  --surface-muted: var(--sm-ink-700);
  --surface-inverse: var(--sm-white);

  --border-default: var(--sm-white);
  --border-subtle: var(--sm-white);
  --border-strong: var(--sm-white);

  --action-primary-bg: var(--sm-white);
  --action-primary-fg: var(--sm-black);
  --action-primary-bg-hover: var(--sm-yellow);
  --action-primary-fg-hover: var(--sm-black);
  --action-accent-bg-hover: var(--sm-white);
  --action-accent-fg-hover: var(--sm-black);
  --action-quiet-fg: var(--sm-white);
  --action-disabled-bg: var(--sm-ink-600);
  --action-disabled-fg: var(--sm-grey-700);

  --field-bg: var(--sm-black);
  --field-fg: var(--sm-white);
  --field-border: var(--sm-white);
  --field-placeholder: var(--sm-grey-500);

  --surface-scrim: rgba(0, 0, 0, 0.92);
  --shadow-hard-sm: 4px 4px 0 0 var(--sm-white);
  --shadow-hard: 8px 8px 0 0 var(--sm-white);
  --shadow-hard-lg: 14px 14px 0 0 var(--sm-white);
}