/* Shared by the application, first paint and the plant encyclopedia. */
@layer reset, tokens, base, components, features, utilities;
@layer tokens {
  :root {
    color-scheme: light dark;
    --canvas: light-dark(#f2f4ef, #111914);
    --canvas-warm: light-dark(#eeefe8, #141e18);
    --surface: light-dark(#fbfcf9, #1a251e);
    --surface-raised: light-dark(#ffffff, #222e26);
    --surface-soft: light-dark(#e9eee8, #29372e);
    --surface-pressed: light-dark(#e1e9e1, #34473a);
    --surface-inverse: light-dark(#1b2821, #0b100d);
    --ink: light-dark(#17221c, #e5ede5);
    --ink-soft: light-dark(#35423a, #c6d2c8);
    --muted: light-dark(#5d685f, #aab9ad);
    --muted-soft: light-dark(#5f6d63, #9eafa3);
    --on-solid: light-dark(#ffffff, #102117);
    --switch-thumb: light-dark(#ffffff, #d5e2d8);
    --line: light-dark(#d5ddd5, #35463a);
    --line-strong: light-dark(#becabe, #4b6151);
    --line-soft: light-dark(#e5e9e4, #2c3b30);
    --line-control: light-dark(#7f8e82, #788d7e);
    --leaf: light-dark(#2f6b45, #9ccea8);
    --leaf-strong: light-dark(#245638, #b3dfba);
    --leaf-soft: light-dark(#dceadf, #2b4232);
    --leaf-faint: light-dark(#edf4ee, #23372a);
    --water: light-dark(#236b70, #87ceca);
    --water-bright: light-dark(#36817e, #91dbd3);
    --water-soft: light-dark(#d7efed, #23413e);
    --water-faint: light-dark(#edf7f6, #1a302c);
    --water-glow: light-dark(rgb(70 196 188 / 24%), rgb(103 200 189 / 20%));
    --sun: light-dark(#805b16, #e8c77c);
    --sun-soft: light-dark(#f3e8cf, #403820);
    --sun-glow: light-dark(rgb(243 232 207 / 90%), rgb(232 199 124 / 20%));
    --danger: light-dark(#a23d30, #f0a59b);
    --danger-soft: light-dark(#f5dfdc, #442e2a);
    --danger-strong: light-dark(#813027, #ffc1b7);
    --shadow-color: light-dark(rgb(23 34 28 / 8%), rgb(0 0 0 / 24%));
    --shadow-focus-color: light-dark(rgb(35 107 112 / 22%), rgb(135 206 202 / 25%));
    --shadow-1: 0 1px 2px var(--shadow-color), 0 5px 8px var(--shadow-color);
    --shadow-2: 0 2px 4px var(--shadow-color), 0 18px 44px var(--shadow-color);
    --shadow-focus: 0 0 0 4px var(--shadow-focus-color);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}
@layer base {
  html {
    min-height: 100%;
    background: var(--canvas);
  }

  body {
    min-height: 100dvh;
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: "Avenir Next", Avenir, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  }

  #root {
    min-height: 100dvh;
  }

  .startup-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    background: var(--canvas);
    transition: opacity 240ms cubic-bezier(.23, 1, .32, 1), visibility 240ms step-end;
  }

  .startup-panel {
    width: min(82vw, 248px);
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
  }

  .startup-mark {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-2);
  }

  .startup-mark img {
    width: 42px;
    height: 42px;
    display: block;
  }

  .startup-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 820;
  }

  .startup-status {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 650;
  }

  .startup-progress {
    position: relative;
    width: 92px;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
  }

  .startup-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: var(--leaf);
    animation: startupProgress 920ms cubic-bezier(.32, .72, 0, 1) infinite;
  }

  body.app-ready .startup-screen {
    visibility: hidden;
    opacity: 0;
  }

  @keyframes startupProgress {
    0% {
      transform: translateX(-115%);
    }
    100% {
      transform: translateX(240%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .startup-screen {
      transition: none;
    }

    .startup-progress::after {
      animation: none;
      transform: translateX(70%);
    }
  }
  html { accent-color: var(--leaf); caret-color: var(--leaf); scrollbar-color: var(--line-control) var(--canvas); }
}