/*
 * yaoi design tokens.
 *
 * Components consume these variables. Do not hard-code colors, type, or
 * spacing in component CSS. Theme modes override tokens on html[data-theme].
 *
 * Parent Madara still styles via body.text-ui-light / body.text-ui-dark.
 * Visual default is Dark (data-theme="dark"). Light overrides :root.
 */

:root {
  --yaoi-color-primary: var(--primary-color, #eb3349);
  --yaoi-color-secondary: var(--secondary-color, #f45c43);
  --yaoi-color-accent: #f5c518;
  --yaoi-color-border-dark: var(--border-dark-color, #4d4d4d);
  --yaoi-color-border-light: var(--border-light-color, #e1e1e1);

  --yaoi-color-bg: #07070a;
  --yaoi-color-bg-elevated: #141418;
  --yaoi-color-text: #f4f4f5;
  --yaoi-color-text-muted: #9a9aa3;
  --yaoi-color-border: #2a2a30;
  --yaoi-color-focus: #f5c518;
  --yaoi-color-danger: #ff4d67;
  --yaoi-color-success: #68d391;
  --yaoi-color-on-accent: #111111;
  --yaoi-color-reading-bar: #121212;
  --yaoi-color-reading-paper: #ffffff;
  --yaoi-color-reading-accent: #f5c518;

  --yaoi-font-family-base: "Poppins", sans-serif;
  --yaoi-font-size-base: 1rem;
  --yaoi-line-height-base: 1.5;
  --yaoi-font-size-reading: 1rem;

  --yaoi-space-1: 0.25rem;
  --yaoi-space-2: 0.5rem;
  --yaoi-space-3: 0.75rem;
  --yaoi-space-4: 1rem;
  --yaoi-space-5: 1.5rem;
  --yaoi-space-6: 2rem;
  --yaoi-space-8: 3rem;

  --yaoi-size-control: 2rem;
  --yaoi-radius: 4px;
  --yaoi-radius-lg: 16px;
  --yaoi-container: 1170px;

  --yaoi-bp-sm: 576px;
  --yaoi-bp-md: 768px;
  --yaoi-bp-lg: 992px;
  --yaoi-bp-xl: 1200px;
}

html {
  background-color: var(--yaoi-color-bg);
  color-scheme: dark;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #f8ce3078 transparent;
}

html[data-theme="dark"] {
  --yaoi-color-primary: #f5c518;
  --yaoi-color-accent: #f5c518;
  --yaoi-color-bg: #07070a;
  --yaoi-color-bg-elevated: #141418;
  --yaoi-color-text: #f4f4f5;
  --yaoi-color-text-muted: #9a9aa3;
  --yaoi-color-border: #2a2a30;
  --yaoi-color-focus: #f5c518;
  --yaoi-color-danger: #ff4d67;
  --yaoi-color-success: #68d391;
  --yaoi-color-on-accent: #111111;
  --yaoi-color-reading-bar: #121212;
  --yaoi-color-reading-paper: #ffffff;
  --yaoi-color-reading-accent: #f5c518;
  color-scheme: dark;
}

html[data-theme="light"] {
  --yaoi-color-primary: var(--primary-color, #eb3349);
  --yaoi-color-secondary: var(--secondary-color, #f45c43);
  --yaoi-color-accent: #c79200;
  --yaoi-color-bg: #f4f4f6;
  --yaoi-color-bg-elevated: #ffffff;
  --yaoi-color-text: #1c1c22;
  --yaoi-color-text-muted: #5c5c66;
  --yaoi-color-border: #d8d8de;
  --yaoi-color-focus: var(--yaoi-color-primary);
  --yaoi-color-danger: #d0123a;
  --yaoi-color-success: #2f855a;
  --yaoi-color-on-accent: #111111;
  --yaoi-color-reading-bar: #ececef;
  --yaoi-color-reading-paper: #ffffff;
  --yaoi-color-reading-accent: #c79200;
  color-scheme: light;
}

html[data-theme="light"] body,
html[data-theme="dark"] body,
html[data-theme="light"] body.text-ui-dark,
html[data-theme="dark"] body.text-ui-light {
  background-color: var(--yaoi-color-bg);
  color: var(--yaoi-color-text);
}

.yaoi-icon {
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

.yaoi-flag {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}
a:hover {
	text-decoration: none !important;
}
.yaoi-button.yaoi-button--primary:hover {
  color: #333;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--yaoi-color-bg) inset !important;
  -webkit-text-fill-color: var(--yaoi-color-text) !important;
  caret-color: var(--yaoi-color-text);
  transition: background-color 999999s ease-in-out 0s;
}



@media screen and (min-width:1600px)
{
  :root {
    --yaoi-container: 1440px;
}
}