/* example-brand.css */

/* Brand A: Ocean */
:root[data-theme="ocean"] {
  --accent-h: 200;
  --accent-c: 0.16;
  --accent-l: 60%;
  --secondary-hue-shift: 40;
  --tertiary-hue-shift: -80;
}

/* Brand B: Sunrise */
:root[data-theme="sunrise"] {
  --accent-h: 30;
  --accent-c: 0.18;
  --accent-l: 62%;
  --secondary-hue-shift: 60;
  --tertiary-hue-shift: -90;
}

/* Brand C: Forest */
:root[data-theme="forest"] {
  --accent-h: 145;
  --accent-c: 0.16;
  --accent-l: 58%;
  --secondary-hue-shift: 50;
  --tertiary-hue-shift: -100;
}

/* Optional dark tweaks per brand */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"])[data-theme="ocean"] {
    --accent-c: 0.20;
    --accent-l: 70%;
  }
  :root:not([data-color-scheme="light"])[data-theme="sunrise"] {
    --accent-c: 0.22;
    --accent-l: 72%;
  }
  :root:not([data-color-scheme="light"])[data-theme="forest"] {
    --accent-c: 0.18;
    --accent-l: 68%;
  }
}

:root[data-color-scheme="dark"][data-theme="ocean"] {
  --accent-c: 0.20;
  --accent-l: 70%;
}

:root[data-color-scheme="dark"][data-theme="sunrise"] {
  --accent-c: 0.22;
  --accent-l: 72%;
}

:root[data-color-scheme="dark"][data-theme="forest"] {
  --accent-c: 0.18;
  --accent-l: 68%;
}