/*
 * Тема Myxa для HeroUI v3. Одна, светлая — тёмной нет и не будет.
 *
 * Имена переменных — из контракта HeroUI (docs: getting-started/theming),
 * значения — по правилам Arlo UI: спокойная нейтральная поверхность, один
 * акцент, три уровня текста. Белый фон и серые плашки без теней — как в
 * нативных списках iOS. Зелёный — брендовый, но без неона и достаточно
 * тёмный, чтобы белый текст на кнопке читался.
 */

@layer base {
  :root,
  [data-theme="myxa"] {
    color-scheme: light;

    --white: oklch(100% 0 0);
    --black: oklch(0% 0 0);
    --snow: oklch(0.99 0.002 160);
    --eclipse: oklch(0.2 0.012 160);

    --spacing: 0.25rem;
    --border-width: 1px;
    --field-border-width: 0px;
    --disabled-opacity: 0.45;
    --ring-offset-width: 2px;
    --cursor-interactive: pointer;
    --cursor-disabled: not-allowed;

    --radius: 1rem;
    --field-radius: 0.875rem;

    --background: var(--white);
    --foreground: var(--eclipse);

    /* Группы и карточки — светло-серые плашки на белом, без теней и рамок. */
    --surface: oklch(0.968 0.002 260);
    --surface-foreground: var(--foreground);
    --overlay: var(--white);
    --overlay-foreground: var(--foreground);

    --muted: oklch(0.55 0.01 260);

    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
    --scrollbar-track: transparent;
    --scrollbar-gutter: auto;
    --scrollbar-width: thin;
    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    --scrollbar: var(--scrollbar-thumb);

    --default: oklch(0.93 0.003 260);
    --default-foreground: var(--eclipse);

    --accent: oklch(0.56 0.15 152);
    --accent-foreground: var(--snow);

    --field-background: var(--surface);
    --field-foreground: var(--foreground);
    --field-placeholder: var(--muted);
    --field-border: transparent;

    --success: oklch(0.56 0.15 152);
    --success-foreground: var(--snow);
    --warning: oklch(0.72 0.15 70);
    --warning-foreground: var(--eclipse);
    --danger: oklch(0.58 0.21 25);
    --danger-foreground: var(--snow);

    --segment: var(--white);
    --segment-foreground: var(--foreground);

    --border: oklch(0.2 0.01 260 / 8%);
    --separator: oklch(0.2 0.01 260 / 9%);
    --focus: var(--accent);
    --link: var(--accent);

    --surface-shadow: 0 0 0 0 transparent;
    --overlay-shadow:
      0 8px 24px -4px oklch(0 0 0 / 10%), 0 24px 64px -12px oklch(0 0 0 / 14%);
    --field-shadow: 0 0 0 0 transparent;

    --skeleton-animation: shimmer;
    --tooltip-delay: 1000ms;
    --tooltip-close-delay: 300ms;
  }
}