/* Pet PT design tokens — docs/DESIGN.md §3. Light is the default; dark applies under
   prefers-color-scheme and :root[data-theme="dark"]. Every other stylesheet uses these names only. */
:root {
  color-scheme: light;

  /* Colour */
  --pt-bg: #FBFBFA;
  --pt-surface: #FFFFFF;
  --pt-surface-2: #F3F3F1;
  --pt-border: #E4E4E1;
  --pt-text: #1B1B18;
  --pt-text-muted: #5F5F5A;
  --pt-accent: #4F46E5;
  --pt-accent-hover: #4338CA;
  --pt-on-accent: #FFFFFF;
  --pt-accent-soft: #EEF2FF;
  /* Selected row/table-row fill: accent-soft in light; a low-chroma mix in dark so selection reads quiet, not purple. */
  --pt-selected: #EEF2FF;
  --pt-success: #15803D;
  --pt-warning: #B45309;
  --pt-danger: #B91C1C;
  --pt-on-danger: #FFFFFF;
  --pt-info: var(--pt-accent);
  --pt-focus: 0 0 0 2px var(--pt-bg), 0 0 0 4px var(--pt-accent);
  --pt-shadow-1: 0 1px 2px rgb(0 0 0 / .06);
  --pt-shadow-2: 0 8px 24px rgb(0 0 0 / .12);
  /* Soft fills for status pills and toasts (derived from the status colours). */
  --pt-success-soft: #DCFCE7;
  --pt-warning-soft: #FEF3C7;
  --pt-danger-soft: #FEE2E2;
  --pt-scrim: rgb(27 27 24 / .4);
  /* Hero surface tint (docs/UI.md §11): accent-soft fading into the card surface. */
  --pt-hero-tint: linear-gradient(135deg, var(--pt-accent-soft), var(--pt-surface) 62%);
  --pt-hover: rgb(27 27 24 / .04);

  /* Icons (docs/UI.md §3) */
  --pt-icon-sm: 16px;
  --pt-icon: 20px;
  --pt-icon-lg: 24px;
  --pt-icon-stroke: 1.5;

  /* Spacing */
  --pt-space-1: 4px;
  --pt-space-2: 8px;
  --pt-space-3: 12px;
  --pt-space-4: 16px;
  --pt-space-5: 24px;
  --pt-space-6: 32px;
  --pt-space-7: 48px;
  --pt-space-8: 64px;
  --pt-tap: 44px;
  --pt-row: 56px;
  --pt-tile: 44px;
  --pt-tabbar: 56px;
  --pt-dock: 64px;
  --pt-strip: 28px;
  --pt-strip-badge: 22px;
  --pt-topbar: 52px;
  --pt-sidebar: 240px;
  --pt-content-max: 1120px;
  --pt-form-max: 720px;
  --pt-screen-margin: var(--pt-space-4);

  /* Radius */
  --pt-radius-sm: 6px;
  --pt-radius-md: 10px;
  --pt-radius-lg: 16px;
  --pt-radius-pill: 999px;

  /* Type */
  --pt-font: ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
  --pt-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* docs/UI.md §1: hierarchy through type and spacing, not size. 2xs is pills, eyebrows and tab labels only. */
  --pt-text-2xs: 11px; --pt-line-2xs: 14px;
  --pt-text-xs: 12px;  --pt-line-xs: 16px;
  --pt-text-sm: 13px;  --pt-line-sm: 18px;
  --pt-text-md: 14px;  --pt-line-md: 20px;
  --pt-text-lg: 15px;  --pt-line-lg: 22px;
  --pt-text-xl: 20px;  --pt-line-xl: 26px;
  --pt-text-2xl: 24px; --pt-line-2xl: 30px;
  --pt-text-3xl: 32px; --pt-line-3xl: 38px;
  --pt-text-note: 15px; --pt-line-note: 24px;
  --pt-weight-body: 400;
  --pt-weight-medium: 500;
  --pt-weight-title: 600;

  /* Motion */
  --pt-dur-fast: 150ms;
  --pt-dur-med: 200ms;
  --pt-dur-page: 250ms;
  --pt-ease: cubic-bezier(.2, 0, 0, 1);
  --pt-ease-out: cubic-bezier(.4, 0, 1, 1);

  /* Safe areas */
  --pt-safe-top: env(safe-area-inset-top, 0px);
  --pt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pt-safe-left: env(safe-area-inset-left, 0px);
  --pt-safe-right: env(safe-area-inset-right, 0px);
}

@media (min-width: 768px) {
  :root { --pt-screen-margin: var(--pt-space-6); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pt-bg: #17171B;
    --pt-surface: #1E1E23;
    --pt-surface-2: #26262C;
    --pt-border: #303036;
    --pt-text: #F2F2F0;
    --pt-text-muted: #A3A39F;
    --pt-accent: #818CF8;
    --pt-accent-hover: #A5B4FC;
    --pt-on-accent: #17171B;
    --pt-accent-soft: #2A2B4A;
    --pt-selected: #2A2B3D;
    --pt-success: #4ADE80;
    --pt-warning: #FBBF24;
    --pt-danger: #F87171;
    --pt-on-danger: #17171B;
    --pt-shadow-1: 0 1px 2px rgb(0 0 0 / .5);
    --pt-shadow-2: 0 8px 24px rgb(0 0 0 / .6);
    --pt-success-soft: #14321F;
    --pt-warning-soft: #3A2A0C;
    --pt-danger-soft: #3F1A1A;
    --pt-scrim: rgb(0 0 0 / .6);
    --pt-hover: rgb(255 255 255 / .05);
    --pt-hero-tint: linear-gradient(135deg, var(--pt-accent-soft), var(--pt-surface) 70%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --pt-bg: #17171B;
  --pt-surface: #1E1E23;
  --pt-surface-2: #26262C;
  --pt-border: #303036;
  --pt-text: #F2F2F0;
  --pt-text-muted: #A3A39F;
  --pt-accent: #818CF8;
  --pt-accent-hover: #A5B4FC;
  --pt-on-accent: #17171B;
  --pt-accent-soft: #2A2B4A;
  --pt-selected: #2A2B3D;
  --pt-success: #4ADE80;
  --pt-warning: #FBBF24;
  --pt-danger: #F87171;
  --pt-on-danger: #17171B;
  --pt-shadow-1: 0 1px 2px rgb(0 0 0 / .5);
  --pt-shadow-2: 0 8px 24px rgb(0 0 0 / .6);
  --pt-success-soft: #14321F;
  --pt-warning-soft: #3A2A0C;
  --pt-danger-soft: #3F1A1A;
  --pt-scrim: rgb(0 0 0 / .6);
  --pt-hover: rgb(255 255 255 / .05);
  --pt-hero-tint: linear-gradient(135deg, var(--pt-accent-soft), var(--pt-surface) 70%);
}

/* Cross-document view transitions (SPEC: named headers, cards, avatars). */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--pt-dur-page);
  animation-timing-function: var(--pt-ease);
}
::view-transition-group(*) {
  animation-duration: var(--pt-dur-page);
  animation-timing-function: var(--pt-ease);
}
::view-transition-old(vt-header),
::view-transition-new(vt-header) {
  animation-duration: var(--pt-dur-page);
  height: 100%;
  object-fit: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pt-dur-fast: 0ms;
    --pt-dur-med: 0ms;
    --pt-dur-page: 0ms;
  }
  /* Opacity-only: no geometry morphing, and the default cross-fade completes instantly. */
  ::view-transition-group(*) { animation: none !important; }
  ::view-transition-image-pair(*) { isolation: auto; }
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0ms !important;
    mix-blend-mode: normal;
  }
}