/*
 * shared/base.css — design tokens for the fs() app suite
 *
 * Usage in Vite apps (has @shared alias):
 *   import '@shared/base.css'
 *
 * Usage in vanilla apps (fs(up), fs(os)):
 *   Mirror this file manually; keep in sync.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  touch-action: manipulation;
}

h1 {
  user-select: none;
  -webkit-user-select: none;
}

::selection {
  background: var(--selection-bg);
  color: var(--text-1);
}
@media (prefers-color-scheme: dark) {
  ::selection {
    background: var(--selection-bg-dark);
  }
}

:root {
  --font-family: "ui-rounded", system-ui;
  --font-size: 18px;

  /* Accent / interactive: bright red */
  --interactive: #f00;
  --interactive-dot: #e00;
  --interactive-muted: rgba(255, 0, 0, 0.1);
  --interactive-ring: rgba(255, 0, 0, 0.2);

  /* Text scale */
  --text-1: #000;
  --text-2: #666;
  --text-3: #999;

  /* Surfaces */
  --bg: #fff;
  --bg-elevated: rgba(255, 255, 255, 0.8);
  --bg-subtle: #f0f0f0;
  --bg-popover: rgba(255, 255, 255, 1);

  /* Border */
  --border: rgba(0, 0, 0, 0.1);

  /* Layout */
  --gutter: 4rem;
  --half-gutter: 1rem;

  /* Focus: outline only (no box-shadow) — avoids clashing with UI elevation */
  --focus-outline-width: 2px;
  --focus-outline-color: var(--interactive);
  --focus-outline-offset: 2px;

  /* Selection */
  --selection-bg: rgba(255, 0, 0, 0.2);
  --selection-bg-dark: rgba(255, 0, 0, 0.4);

  /* App convenience */
  --background-selection: var(--bg-subtle);
  --green: #0acb00;
}

/* Narrow screens: tighter gutters */
@media (max-width: 500px) {
  :root {
    --gutter: 1rem;
    --half-gutter: 0.5rem;
  }
}

/* Wide-gamut P3 red */
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --interactive: color(display-p3 1 0.05 0);
      --interactive-dot: color(display-p3 1 0.08 0.02);
      --interactive-muted: color(display-p3 1 0.22 0.12 / 0.14);
      --interactive-ring: color(display-p3 1 0.2 0.1 / 0.38);
      --selection-bg: color(display-p3 1 0.2 0.12 / 0.3);
      --selection-bg-dark: color(display-p3 1 0.24 0.14 / 0.52);
    }
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text-1: #aaa;
    --text-2: #888;
    --text-3: #555;
    --bg: #111;
    --bg-elevated: rgba(30, 30, 30, 0.85);
    --bg-subtle: #222;
    --border: rgba(255, 255, 255, 0.1);
    --bg-popover: rgba(0, 0, 0, 1);
  }
}

/* Base HTML */
html,
body {
  height: 100%;

  color: var(--text-1);
  font-family: var(--font-family);
  font-size: var(--font-size);
  overflow: hidden;
  background: var(--bg-subtle) !important;
}

/* App root */
#app {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  accent-color: var(--interactive);
  -webkit-focus-ring-color: transparent;
}

[v-cloak] {
  display: none;
}

/* ── Accessibility ── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Strip UA blue ring; apps apply their own red ring below */
#app :focus {
  outline: none;
}

/* Firefox: remove inner dotted ring on button */
#app button::-moz-focus-inner {
  border: 0;
}

/* Narrow screens: disable tap-delay-workaround on elements that need real pan */
@media (max-width: 500px) {
  #app {
    user-select: none;
    -webkit-user-select: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

hr {
  border: none;
  margin: 0.5rem 0;
  height: 1px;
  width: 100%;
  background: var(--border);
  display: inline-block;
  font-size: 0rem;
  animation: fadeIn 0.3s ease-in-out both;
}

/* ── Layout utilities ── */

.pusher {
  flex: 1;
}
.pusher--right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.bottom-dim-gradient {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8rem;
  background: linear-gradient(
    to top,
    var(--bg) 0%,
    var(--bg) 3rem,
    transparent 100%
  );
  pointer-events: none;
}

.empty-todo-list-section {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  flex: 1;
}