/* OYKOT — App theming layer.
   The product is one tenant, many apps, each with its own accent. Any component
   can read the CURRENT app's accent through these four variables instead of being
   passed a color prop. Set the scope with `data-app="<id>"` on a wrapper element
   (the app shell sets it); descendants theme automatically.

       <div data-app="ticket"> … rose-themed subtree … </div>

   Default (no scope) = brand green. */

:root {
  --app-accent:        var(--oy-brand-600);
  --app-accent-strong: var(--oy-brand-700);
  --app-accent-soft:   var(--oy-brand-50);
  --app-accent-text:   var(--oy-brand-700);
}

[data-app="dash"],
[data-app="reserve"] {
  --app-accent:        var(--oy-brand-600);
  --app-accent-strong: var(--oy-brand-700);
  --app-accent-soft:   var(--oy-brand-50);
  --app-accent-text:   var(--oy-brand-700);
}

[data-app="ticket"] {
  --app-accent:        var(--oy-rose);
  --app-accent-strong: var(--oy-rose-strong);
  --app-accent-soft:   var(--oy-rose-soft);
  --app-accent-text:   var(--oy-rose-strong);
}

[data-app="assistant"] {
  --app-accent:        var(--oy-sage);
  --app-accent-strong: var(--oy-sage-strong);
  --app-accent-soft:   var(--oy-sage-soft);
  --app-accent-text:   var(--oy-sage-strong);
}

[data-app="content"] {
  --app-accent:        var(--oy-amber);
  --app-accent-strong: var(--oy-amber-strong);
  --app-accent-soft:   var(--oy-amber-soft);
  --app-accent-text:   var(--oy-amber-strong);
}

[data-app="report"],
[data-app="reports"] {
  --app-accent:        var(--oy-clay);
  --app-accent-strong: var(--oy-clay-strong);
  --app-accent-soft:   var(--oy-clay-soft);
  --app-accent-text:   var(--oy-clay-strong);
}

[data-app="settings"] {
  --app-accent:        var(--oy-sand-600);
  --app-accent-strong: var(--oy-sand-700);
  --app-accent-soft:   var(--oy-sand-100);
  --app-accent-text:   var(--oy-sand-700);
}