/* Theme: dozen
   Light canvas and accent from mini_app/src/design-system/tokens.css.
   Accent tokens are replaced at runtime by dashboard-accent.js.
   Page #ebebeb, surface #f5f5f5, text #1a1a1a, accent #f9655b, plates #f2f2f2.
*/
:root {
  color-scheme: light;

  --color-bg-page: #ebebeb;
  --color-bg-card: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: rgba(26, 26, 26, 0.62);
  --color-text-secondary: rgba(26, 26, 26, 0.72);
  --color-border: rgba(0, 0, 0, 0.12);
  --color-hover-bg: #f5f5f5;
  --color-hover-border: rgba(0, 0, 0, 0.18);
  --color-form-heading: rgba(26, 26, 26, 0.72);

  /* Landing brand red. Login submit stays on this, not the swappable accent. */
  --color-logo: #d6182a;
  --btn-login-bg: var(--color-logo);
  --btn-login-bg-hover: #ad1222;
  --btn-login-bg-active: #ad1222;
  --btn-login-color: #ffffff;

  --accent: #f9655b;
  --color-accent: #f9655b;
  --color-focus: #f9655b;
  --color-highlight-bg: rgba(249, 101, 91, 0.12);

  --btn-focus-ring-color: rgba(249, 101, 91, 0.35);

  /* #f9655b mixed toward black: 14% hover, 24% active */
  --btn-primary-bg: #f9655b;
  --btn-primary-color: #ffffff;
  --btn-primary-bg-hover: #d6574e;
  --btn-primary-color-hover: #ffffff;
  --btn-primary-bg-active: #bd4d45;
  --btn-primary-color-active: #ffffff;

  --btn-outline-color: var(--color-accent);
  --btn-outline-border: var(--color-accent);
  --btn-outline-bg-hover: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --btn-outline-color-hover: var(--color-accent);
  --btn-outline-bg-active: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --btn-outline-color-active: var(--color-accent);

  --btn-secondary-bg: #f2f2f2;
  --btn-secondary-color: #1a1a1a;
  --btn-secondary-bg-hover: #e8e8e8;
  --btn-secondary-color-hover: #1a1a1a;
  --btn-secondary-bg-active: #dedede;
  --btn-secondary-color-active: #1a1a1a;

  --input-hover-bg: #f5f5f5;
  --input-readonly-bg: #f5f5f5;
  --input-readonly-text: rgba(26, 26, 26, 0.62);
}