@import "tailwindcss";

:root {
  color-scheme: light;
  --ui-canvas: #f7f5f0;
  --ui-surface: #fffdfa;
  --ui-surface-muted: #efede7;
  --ui-surface-subtle: #ebe8e0;
  --ui-surface-control: #e9e6df;
  --ui-ink: #24231f;
  --ui-ink-hover: #3a3832;
  --ui-primary: #24231f;
  --ui-primary-strong: #3a3832;
  --ui-primary-body: #4d4b45;
  --ui-primary-muted: #65635c;
  --ui-primary-subtle: #7b786f;
  --ui-primary-faint: #8b887f;
  --ui-inverse: #f7f5f0;
  --ui-on-inverse: #fffdfa;
  --ui-button-on-inverse: #1a1b18;
  --ui-border: #24231f;
  --ui-accent: #d96f42;
  --ui-accent-strong: #c4673d;
  --ui-accent-hover: #a84f2c;
  --ui-accent-warm: #ff9f68;
  --ui-accent-warm-hover: #ffb38d;
  --ui-success-surface: #e8f0e3;
  --ui-success-pending: #dcebd5;
  --ui-success: #55734d;
  --ui-success-strong: #4b6844;
  --ui-success-muted: #4d6049;
  --ui-attention-surface: #fbe5d9;
  --ui-attention-surface-hover: #f5d8c8;
  --ui-attention-muted: #8f4f34;
  --ui-attention-strong: #8c4226;
  --ui-attention-deep: #7a351f;
  --ui-attention-key: #a36b50;
  --ui-attention-danger: #a74f2d;
  --ui-info-surface: #f2f6f8;
  --ui-info-surface-muted: #dfeaf0;
  --ui-info: #354c59;
  --ui-info-strong: #2f4652;
  --ui-info-muted: #456676;
  --ui-info-subtle: #58717d;
  --ui-info-faint: #657984;
  --ui-info-border: #d8e2e8;
  --ui-violet-surface: #eee4f1;
  --ui-violet: #85658f;
  --ui-warning-surface: #fff1b8;
  --ui-warning: #725b00;
  --ui-pending-surface: #e5edf7;
  --ui-pending: #365b82;
  --ui-skeleton: #c8c5bd;
  --ui-skeleton-muted: #d8d5ce;
  --ui-code-surface: #eceae5;
  --ui-border-strong: #262522;
  --ui-border-subtle: #e6e2da;
  --ui-inverse-muted: #b6b2a8;
  --ui-inverse-subtle: #8f8b82;
  --ui-placeholder: #aaa69d;
}

@theme inline {
  --color-canvas: var(--ui-canvas);
  --color-surface: var(--ui-surface);
  --color-surface-muted: var(--ui-surface-muted);
  --color-surface-subtle: var(--ui-surface-subtle);
  --color-surface-control: var(--ui-surface-control);
  --color-ink: var(--ui-ink);
  --color-ink-hover: var(--ui-ink-hover);
  --color-primary: var(--ui-primary);
  --color-primary-strong: var(--ui-primary-strong);
  --color-primary-body: var(--ui-primary-body);
  --color-primary-muted: var(--ui-primary-muted);
  --color-primary-subtle: var(--ui-primary-subtle);
  --color-primary-faint: var(--ui-primary-faint);
  --color-inverse: var(--ui-inverse);
  --color-on-inverse: var(--ui-on-inverse);
  --color-border: var(--ui-border);
  --color-accent: var(--ui-accent);
  --color-accent-strong: var(--ui-accent-strong);
  --color-accent-hover: var(--ui-accent-hover);
  --color-accent-warm: var(--ui-accent-warm);
  --color-accent-warm-hover: var(--ui-accent-warm-hover);
  --color-success-surface: var(--ui-success-surface);
  --color-success-pending: var(--ui-success-pending);
  --color-success: var(--ui-success);
  --color-success-strong: var(--ui-success-strong);
  --color-success-muted: var(--ui-success-muted);
  --color-attention-surface: var(--ui-attention-surface);
  --color-attention-surface-hover: var(--ui-attention-surface-hover);
  --color-attention-muted: var(--ui-attention-muted);
  --color-attention-strong: var(--ui-attention-strong);
  --color-attention-deep: var(--ui-attention-deep);
  --color-attention-key: var(--ui-attention-key);
  --color-attention-danger: var(--ui-attention-danger);
  --color-info-surface: var(--ui-info-surface);
  --color-info-surface-muted: var(--ui-info-surface-muted);
  --color-info: var(--ui-info);
  --color-info-strong: var(--ui-info-strong);
  --color-info-muted: var(--ui-info-muted);
  --color-info-subtle: var(--ui-info-subtle);
  --color-info-faint: var(--ui-info-faint);
  --color-info-border: var(--ui-info-border);
  --color-violet-surface: var(--ui-violet-surface);
  --color-violet: var(--ui-violet);
  --color-warning-surface: var(--ui-warning-surface);
  --color-warning: var(--ui-warning);
  --color-pending-surface: var(--ui-pending-surface);
  --color-pending: var(--ui-pending);
  --color-skeleton: var(--ui-skeleton);
  --color-skeleton-muted: var(--ui-skeleton-muted);
  --color-code-surface: var(--ui-code-surface);
  --color-border-strong: var(--ui-border-strong);
  --color-border-subtle: var(--ui-border-subtle);
  --color-inverse-muted: var(--ui-inverse-muted);
  --color-inverse-subtle: var(--ui-inverse-subtle);
  --color-placeholder: var(--ui-placeholder);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-canvas: #141512;
  --ui-surface: #1d1e1a;
  --ui-surface-muted: #292a25;
  --ui-surface-subtle: #292a25;
  --ui-surface-control: #292a25;
  --ui-primary: #f3f0e8;
  --ui-ink-hover: #fffdfa;
  --ui-primary-strong: #f3f0e8;
  --ui-primary-body: #d8d3ca;
  --ui-primary-muted: #bbb7ae;
  --ui-primary-subtle: #aaa69d;
  --ui-primary-faint: #99958c;
  --ui-inverse: #f3f0e8;
  --ui-border: #f7f5f0;
  --ui-accent: #ff9f72;
  --ui-accent-strong: #ff9f72;
  --ui-accent-hover: #ff9f72;
  --ui-success-surface: #243025;
  --ui-success-pending: #243025;
  --ui-success: #a9c9a0;
  --ui-success-strong: #a9c9a0;
  --ui-success-muted: #a9c9a0;
  --ui-attention-surface: #3a2821;
  --ui-attention-surface-hover: #513126;
  --ui-attention-muted: #ff9f72;
  --ui-attention-strong: #ff9f72;
  --ui-attention-deep: #ff9f72;
  --ui-attention-key: #ff9f72;
  --ui-info-surface: #1b2428;
  --ui-info-surface-muted: #26383f;
  --ui-info: #a8cbd8;
  --ui-info-strong: #dce9ee;
  --ui-info-muted: #a8cbd8;
  --ui-info-subtle: #b5cbd4;
  --ui-info-faint: #a7bbc3;
  --ui-info-border: rgb(168 203 216 / 0.22);
  --ui-violet-surface: #302735;
  --ui-violet: #d3b0dc;
  --ui-border-strong: #f7f5f0;
  --ui-inverse-muted: #b6b2a8;
  --ui-inverse-subtle: #99958c;
  --ui-placeholder: #817e76;
}

body {
  background: var(--ui-canvas);
  color: var(--ui-primary);
}

.theme-switch__indicator {
  width: calc((100% - 0.5rem) / 3);
  transform: translateX(0);
  transition: transform 200ms ease-out;
}

html[data-theme-preference="dark"] .theme-switch__indicator {
  transform: translateX(100%);
}

html[data-theme-preference="system"] .theme-switch__indicator {
  transform: translateX(200%);
}

.theme-switch__option[aria-checked="true"] {
  color: var(--ui-primary);
}

.theme-switch__option:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

html[data-theme="dark"] body {
  background: var(--ui-canvas);
  color: var(--ui-primary);
}

html[data-theme="dark"] .theme-switch__option[aria-checked="true"] {
  color: var(--ui-primary);
}

html[data-theme="dark"] :is(a, button, input[type="submit"])[class~="bg-ink"] {
  background-color: var(--ui-inverse);
  color: var(--ui-button-on-inverse);
}

html[data-theme="dark"] :is(a, button, input[type="submit"])[class~="hover:bg-ink-hover"]:hover {
  background-color: var(--ui-on-inverse);
  color: var(--ui-canvas);
}

@media (prefers-reduced-motion: no-preference) {
  body,
  header,
  main,
  footer,
  section,
  article,
  input,
  textarea,
  select,
  button,
  a {
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 180ms;
    transition-timing-function: ease-out;
  }
}