/* Shared color tokens. Keep component layout out of this file. */
html:not([data-starless-theme]) {
  --background: #f5f5f5;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --popover: #ffffff;
  --popover-foreground: #171717;
  --primary: #6d0015;
  --primary-foreground: #ffffff;
  --secondary: #eeeeee;
  --secondary-foreground: #171717;
  --muted: #f7f7f7;
  --muted-foreground: #777777;
  --accent: #f0f0f0;
  --accent-foreground: #171717;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #dddddd;
  --input: #dddddd;
  --ring: #6d0015;
  --radius: 0.375rem;
  --rating: #f5c542;
  --rating-foreground: #171717;
  --badge-purple: #6d38c8;
  --badge-purple-foreground: #ffffff;
  --link: #366ad3;
  --link-foreground: #ffffff;

  --starless-primary: var(--primary);
  --starless-primary-dark: #500010;
  --starless-on-primary: var(--primary-foreground);
  --starless-background: var(--background);
  --starless-surface: var(--card);
  --starless-surface-muted: var(--secondary);
  --starless-surface-raised: var(--muted);
  --starless-text: var(--foreground);
  --starless-muted: var(--muted-foreground);
  --starless-border: var(--border);
  --starless-success: #1b5e20;
  --starless-danger: var(--destructive);
  --starless-warning: var(--rating);
  --starless-silver: #8e98a6;
  --starless-bronze: #c57448;
  --starless-info: var(--link);
  --starless-special: var(--badge-purple);

  --starless-light-background: #f5f5f5;
  --starless-light-surface: #ffffff;
  --starless-light-surface-muted: #eeeeee;
  --starless-light-surface-raised: #f7f7f7;
  --starless-light-text: #171717;
  --starless-light-muted: #777777;
  --starless-light-border: #dddddd;
  --starless-dark-background: #16151d;
  --starless-dark-surface: #222222;
  --starless-dark-surface-muted: #1a1a1a;
  --starless-dark-surface-raised: #262626;
  --starless-dark-text: #ffffff;
  --starless-dark-muted: #999999;
  --starless-dark-border: #383838;
}

html:not([data-starless-theme]) body.darkmode,
html:not([data-starless-theme]) body.dark,
html:not([data-starless-theme]).dark,
html:not([data-starless-theme]).dark body {
  --background: #16151d;
  --foreground: #ffffff;
  --card: #222222;
  --card-foreground: #ffffff;
  --popover: #222222;
  --popover-foreground: #ffffff;
  --primary: #6d0015;
  --primary-foreground: #ffffff;
  --secondary: #1a1a1a;
  --secondary-foreground: #ffffff;
  --muted: #262626;
  --muted-foreground: #999999;
  --accent: #2c2c2c;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #383838;
  --input: #383838;
  --ring: #8f001c;
  --rating: #f5c542;
  --rating-foreground: #171717;
  --badge-purple: #6d38c8;
  --badge-purple-foreground: #ffffff;
  --link: #4b7fe5;
  --link-foreground: #ffffff;
  --starless-success: #a5d6a7;
}

.kol-account-editorial {
  --account-bg: var(--background);
  --account-surface: var(--card);
  --account-surface-deep: var(--muted);
  --account-text: var(--foreground);
  --account-muted: color-mix(in srgb, var(--muted-foreground) 85%, var(--foreground));
  --account-border: var(--border);
  --account-border-strong: var(--border);
  --account-input-border: var(--input);
  --account-accent: var(--primary);
  --account-accent-foreground: var(--primary-foreground);
  --account-focus: color-mix(in srgb, var(--ring, var(--primary)) 35%, var(--foreground));
  --account-kicker: var(--account-muted);
  --account-orange: var(--rating, #f5c542);
  --account-success: var(--starless-success, #218739);
}