/*
 * Color Presets
 *
 * Opt-in accent presets, activated by a data-preset attribute on the root.
 * Without the attribute the primary family keeps its default
 * monochrome values from semantic-colors.css, so nothing changes for
 * consumers who never set it.
 *
 * data-preset re-points the primary semantic pairs at the seeded primary
 * palette using the same contrast recipe as the success family; each named
 * preset then supplies only its seed. Focus rings, selection, and
 * accent-color already resolve through these pairs and follow along.
 *
 * Deliberately not part of index.css: import
 * "@mcp-b/design-tokens/color-presets" after the main tokens to opt in.
 */

:root[data-preset] {
  --sigvelo-color-primary-bg-subtle-light: var(--sigvelo-color-primary-100);
  --sigvelo-color-primary-bg-subtle-dark: color-mix(
    in oklab,
    var(--sigvelo-color-primary-900),
    white 1%
  );
  --sigvelo-color-primary-bg-muted-light: var(--sigvelo-color-primary-200);
  --sigvelo-color-primary-bg-muted-dark: var(--sigvelo-color-primary-800);
  --sigvelo-color-primary-bg-light: color-mix(
    in oklab,
    var(--sigvelo-color-primary-600),
    black 12%
  );
  --sigvelo-color-primary-bg-dark: color-mix(in oklab, var(--sigvelo-color-primary-600), black 16%);
  --sigvelo-color-primary-bg-strong-light: var(--sigvelo-color-primary-800);
  --sigvelo-color-primary-bg-strong-dark: var(--sigvelo-color-primary-200);
  --sigvelo-color-primary-bg-stronger-light: var(--sigvelo-color-primary-900);
  --sigvelo-color-primary-bg-stronger-dark: var(--sigvelo-color-primary-100);
  --sigvelo-color-primary-text-on-subtle-light: var(--sigvelo-color-primary-900);
  --sigvelo-color-primary-text-on-subtle-dark: var(--sigvelo-color-primary-100);
  --sigvelo-color-primary-text-on-bg-light: white;
  --sigvelo-color-primary-text-on-bg-dark: white;
  --sigvelo-color-primary-text-on-strong-light: white;
  --sigvelo-color-primary-text-on-strong-dark: black;
  --sigvelo-color-primary-text-light: color-mix(
    in oklab,
    var(--sigvelo-color-primary-600),
    black 12.5%
  );
  --sigvelo-color-primary-text-dark: var(--sigvelo-color-primary-500);
  --sigvelo-color-primary-border-subtle-light: color-mix(
    in oklab,
    var(--sigvelo-color-primary-100),
    black 3%
  );
  --sigvelo-color-primary-border-subtle-dark: color-mix(
    in oklab,
    var(--sigvelo-color-primary-900),
    white 7.5%
  );
  --sigvelo-color-primary-border-muted-light: var(--sigvelo-color-primary-300);
  --sigvelo-color-primary-border-muted-dark: var(--sigvelo-color-primary-800);
  --sigvelo-color-primary-border-light: var(--sigvelo-color-primary-500);
  --sigvelo-color-primary-border-dark: var(--sigvelo-color-primary-600);
}

/* Red and rose collide with the danger seed, so both shift danger to amber. */
:root[data-preset="red"] {
  --sigvelo-color-primary-seed: #ef5655;
  --sigvelo-color-danger-seed: #e89a26;
}

:root[data-preset="orange"] {
  --sigvelo-color-primary-seed: #f08039;
}

:root[data-preset="amber"] {
  --sigvelo-color-primary-seed: #e89a26;
}

:root[data-preset="yellow"] {
  --sigvelo-color-primary-seed: #dcb31e;
}

:root[data-preset="lime"] {
  --sigvelo-color-primary-seed: #9abb28;
}

:root[data-preset="green"] {
  --sigvelo-color-primary-seed: #5dbb55;
}

:root[data-preset="emerald"] {
  --sigvelo-color-primary-seed: #47b873;
}

:root[data-preset="teal"] {
  --sigvelo-color-primary-seed: #37b995;
}

:root[data-preset="cyan"] {
  --sigvelo-color-primary-seed: #20b8bc;
}

:root[data-preset="sky"] {
  --sigvelo-color-primary-seed: #1caedd;
}

:root[data-preset="blue"] {
  --sigvelo-color-primary-seed: #4a97f4;
}

:root[data-preset="indigo"] {
  --sigvelo-color-primary-seed: #6e85f8;
}

:root[data-preset="violet"] {
  --sigvelo-color-primary-seed: #927cfb;
}

:root[data-preset="purple"] {
  --sigvelo-color-primary-seed: #ae75f6;
}

:root[data-preset="fuchsia"] {
  --sigvelo-color-primary-seed: #d26ae8;
}

:root[data-preset="pink"] {
  --sigvelo-color-primary-seed: #e468b0;
}

:root[data-preset="rose"] {
  --sigvelo-color-primary-seed: #ee6383;
  --sigvelo-color-danger-seed: #e89a26;
}

:root[data-preset="slate"] {
  --sigvelo-color-primary-seed: #848da0;
}

:root[data-preset="zinc"] {
  --sigvelo-color-primary-seed: #8b8c93;
}

:root[data-preset="stone"] {
  --sigvelo-color-primary-seed: #918c87;
}