@import "tailwindcss";

:root {
  color-scheme: light;
  --canvas: #f4f3ef;
  --surface: #ffffff;
  --surface-muted: #ebeae5;
  --page-hero: #e8eeeb;
  --ink: #1b2427;
  --ink-soft: #536064;
  --ink-faint: #7c8788;
  --line: #dcdedb;
  --accent: #08bec3;
  --accent-strong: #078f94;
  --accent-soft: #d8f5f4;
  --accent-ink: #072f31;
  --avatar: #795eaa;
  --menu-shadow: rgba(29, 39, 40, 0.17);
  --calendar-shadow: rgba(39, 49, 49, 0.09);
  --block-shadow: rgba(39, 49, 49, 0.08);
  --block-shadow-hover: rgba(39, 49, 49, 0.14);
  --folder-body: #23676a;
  --folder-tab: #2f777a;
  --folder-border: #164c4e;
  --project-text: #213033;
  --project-muted: #5a696b;
  --project-teal: #a9e8e5;
  --project-teal-border: #73cbc8;
  --project-blue: #c7dff4;
  --project-blue-border: #9fc3e2;
  --project-plum: #e1d4ef;
  --project-plum-border: #c3addb;
  --project-sand: #eee2bd;
  --project-sand-border: #d8c78e;
  --project-coral: #f2d2c6;
  --project-coral-border: #dfa999;
  --away-bg: color-mix(in srgb, var(--surface-muted) 52%, transparent);
  --away-border: color-mix(in srgb, var(--ink-faint) 42%, transparent);
  --away-stripe: color-mix(in srgb, var(--ink-faint) 8%, transparent);
  --away-strip: color-mix(in srgb, var(--ink-faint) 44%, var(--surface));
  --away-strip-ink: var(--canvas);
  --away-ink: color-mix(in srgb, var(--ink) 72%, transparent);
  --away-muted: color-mix(in srgb, var(--ink) 48%, transparent);
}

@theme inline {
  --color-canvas: var(--canvas);
  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-muted);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-ink-faint: var(--ink-faint);
  --color-line: var(--line);
  --color-accent: var(--accent);
  --color-accent-strong: var(--accent-strong);
  --color-accent-soft: var(--accent-soft);
  --color-accent-ink: var(--accent-ink);
  --color-avatar: var(--avatar);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --canvas: #131719;
    --surface: #1d2325;
    --surface-muted: #282e30;
    --page-hero: #182023;
    --ink: #f2f0e9;
    --ink-soft: #b2b7b5;
    --ink-faint: #858d8d;
    --line: #343b3d;
    --accent: #22cbd0;
    --accent-strong: #45d9dd;
    --accent-soft: #183d3f;
    --accent-ink: #082e30;
    --menu-shadow: rgba(0, 0, 0, 0.42);
    --calendar-shadow: rgba(0, 0, 0, 0.28);
    --block-shadow: rgba(0, 0, 0, 0.2);
    --block-shadow-hover: rgba(0, 0, 0, 0.32);
    --folder-body: #6b9d9f;
    --folder-tab: #7ca9ab;
    --folder-border: #44777a;
    --project-text: #f2f0e9;
    --project-muted: #b8c0bf;
    --project-teal: #245b5b;
    --project-teal-border: #327576;
    --project-blue: #314e68;
    --project-blue-border: #446b8d;
    --project-plum: #514262;
    --project-plum-border: #6a5680;
    --project-sand: #5b5237;
    --project-sand-border: #756a48;
    --project-coral: #65473f;
    --project-coral-border: #835d53;
  }
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #131719;
  --surface: #1d2325;
  --surface-muted: #282e30;
  --page-hero: #182023;
  --ink: #f2f0e9;
  --ink-soft: #b2b7b5;
  --ink-faint: #858d8d;
  --line: #343b3d;
  --accent: #22cbd0;
  --accent-strong: #45d9dd;
  --accent-soft: #183d3f;
  --accent-ink: #082e30;
  --menu-shadow: rgba(0, 0, 0, 0.42);
  --calendar-shadow: rgba(0, 0, 0, 0.28);
  --block-shadow: rgba(0, 0, 0, 0.2);
  --block-shadow-hover: rgba(0, 0, 0, 0.32);
  --folder-body: #6b9d9f;
  --folder-tab: #7ca9ab;
  --folder-border: #44777a;
  --project-text: #f2f0e9;
  --project-muted: #b8c0bf;
  --project-teal: #245b5b;
  --project-teal-border: #327576;
  --project-blue: #314e68;
  --project-blue-border: #446b8d;
  --project-plum: #514262;
  --project-plum-border: #6a5680;
  --project-sand: #5b5237;
  --project-sand-border: #756a48;
  --project-coral: #65473f;
  --project-coral-border: #835d53;
}

body {
  background: var(--canvas);
  color: var(--ink);
  min-width: 320px;
}

@layer base {
  :where(
    button:not(:disabled),
    a[href],
    [role="button"],
    [role="menuitem"],
    summary,
    select
  ) {
    cursor: pointer;
  }
}

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}