/* Pawnda design tokens v1. Hand-maintained in lockstep with ios/PawndaOwner/DesignTokens.swift:
   every --pd-* name maps one to one to a Color.pd / PDSpace / PDRadius name. Change both together. */

:root {
  color-scheme: light;

  /* Brand violet: 400 film violet, 600 deck violet, 950 deck night */
  --pd-brand-25: #FAFAFE;
  --pd-brand-50: #F2F0FB;
  --pd-brand-100: #EAE6FF;
  --pd-brand-200: #D8D0FE;
  --pd-brand-300: #BDADFB;
  --pd-brand-400: #8B7CF0;
  --pd-brand-500: #7260E2;
  --pd-brand-600: #5B4DC7;
  --pd-brand-700: #4B3FB0;
  --pd-brand-800: #402F8E;
  --pd-brand-900: #2E2368;
  --pd-brand-950: #191636;

  /* Neutral: violet-cast gray, 950 film night */
  --pd-neutral-0: #FFFFFF;
  --pd-neutral-50: #F5F5F9;
  --pd-neutral-100: #EDECF2;
  --pd-neutral-200: #DFDEE7;
  --pd-neutral-300: #C9C8D5;
  --pd-neutral-400: #A1A0AF;
  --pd-neutral-500: #807E8F;
  --pd-neutral-600: #686678;
  --pd-neutral-700: #4F4D5F;
  --pd-neutral-800: #363446;
  --pd-neutral-900: #211F31;
  --pd-neutral-950: #0F0D1A;
  --pd-paper: #F7F6F3;

  /* Home (owner-logged data) */
  --pd-home-50: #EAF9FD;  --pd-home-100: #D3F2FA; --pd-home-200: #A8E2F1; --pd-home-300: #71CADF; --pd-home-400: #3EAFC7;
  --pd-home-500: #1293AB; --pd-home-600: #007A8E; --pd-home-700: #006475; --pd-home-800: #024E5C;
  /* Success (vet-confirmed, good) */
  --pd-success-50: #ECFAEF;  --pd-success-100: #D6F4DD; --pd-success-200: #AEE8BC; --pd-success-300: #7CD595; --pd-success-400: #4DBF74;
  --pd-success-500: #259F56; --pd-success-600: #128243; --pd-success-700: #116B37; --pd-success-800: #10542B;
  /* Warning (unverified, due, waiting) */
  --pd-warning-50: #FFF5E9;  --pd-warning-100: #FFE8CD; --pd-warning-200: #FFD09D; --pd-warning-300: #FFB568; --pd-warning-400: #FF9D36;
  --pd-warning-500: #E58200; --pd-warning-600: #B45309; --pd-warning-700: #92400E; --pd-warning-800: #763C00;
  /* Danger (urgent, destructive) */
  --pd-danger-50: #FFF2F2;  --pd-danger-100: #FFE2E3; --pd-danger-200: #FFC7CA; --pd-danger-300: #FF9EA6; --pd-danger-400: #F56B7C;
  --pd-danger-500: #E32C55; --pd-danger-600: #BE123C; --pd-danger-700: #9F1239; --pd-danger-800: #89132F;

  /* Backgrounds */
  --pd-bg-canvas: var(--pd-paper);
  --pd-bg-surface: var(--pd-neutral-0);
  --pd-bg-raised: var(--pd-neutral-0);
  --pd-bg-sunken: var(--pd-neutral-50);
  --pd-bg-inverse: var(--pd-brand-950);
  --pd-bg-night: var(--pd-neutral-950);
  --pd-bg-rail: var(--pd-brand-950);
  --pd-bg-rail-active: #2A2550;
  --pd-fill-hover: rgba(25, 22, 54, 0.045);
  --pd-fill-pressed: rgba(25, 22, 54, 0.08);
  --pd-fill-selected: var(--pd-brand-50);
  --pd-track: var(--pd-neutral-100);
  --pd-scrim: rgba(15, 13, 26, 0.48);
  --pd-night-glow: radial-gradient(60% 60% at 70% 15%, rgba(139, 124, 240, 0.30), transparent 70%);

  /* Text */
  --pd-text-primary: var(--pd-brand-950);
  --pd-text-secondary: var(--pd-neutral-700);
  --pd-text-tertiary: var(--pd-neutral-600);
  --pd-text-disabled: var(--pd-neutral-400);
  --pd-text-inverse: #FFFFFF;
  --pd-text-on-brand: #FFFFFF;
  --pd-text-link: var(--pd-brand-600);
  --pd-text-link-hover: var(--pd-brand-700);
  --pd-text-on-night: #EAE8F7;
  --pd-text-on-night-secondary: #B9B6CB;
  --pd-text-on-night-tertiary: #A9A3D9;

  /* Borders and focus */
  --pd-border-subtle: rgba(25, 22, 54, 0.07);
  --pd-border-default: rgba(25, 22, 54, 0.11);
  --pd-border-strong: rgba(25, 22, 54, 0.20);
  --pd-card-outline: var(--pd-brand-200); /* violet outline on a highlighted card (iOS cardOutline) */
  --pd-border-input: #8F8D9C;
  --pd-focus: var(--pd-brand-500);
  --pd-ring-input: 0 0 0 1px var(--pd-brand-600), 0 0 0 4px rgba(114, 96, 226, 0.22);

  /* Action */
  --pd-action-primary: var(--pd-brand-600);
  --pd-action-primary-hover: var(--pd-brand-700);
  --pd-action-primary-pressed: var(--pd-brand-800);
  --pd-action-tint: var(--pd-brand-50);
  --pd-action-tint-hover: var(--pd-brand-100);
  --pd-action-tint-text: var(--pd-brand-700);
  --pd-action-disabled-bg: var(--pd-neutral-100);
  --pd-action-disabled-text: var(--pd-neutral-400);

  /* AI: Pawnda speaking */
  --pd-ai-fg: var(--pd-brand-600);
  --pd-ai-text: var(--pd-brand-700);
  --pd-ai-glyph: var(--pd-brand-500);
  --pd-ai-surface: #F8F7FE;
  --pd-ai-tint: var(--pd-brand-50);
  --pd-ai-border: var(--pd-brand-200);
  --pd-ai-gradient: linear-gradient(120deg, #7260E2 0%, #A07CF0 55%, #C58BEF 100%);

  /* Provenance and states */
  --pd-home-fg: var(--pd-home-600);       --pd-home-text: var(--pd-home-700);       --pd-home-tint: var(--pd-home-50);       --pd-home-border: var(--pd-home-200);       --pd-home-mark: var(--pd-home-500);
  --pd-success-fg: var(--pd-success-600); --pd-success-text: var(--pd-success-700); --pd-success-tint: var(--pd-success-50); --pd-success-border: var(--pd-success-200); --pd-success-mark: var(--pd-success-500);
  --pd-warning-fg: var(--pd-warning-600); --pd-warning-text: var(--pd-warning-700); --pd-warning-tint: var(--pd-warning-50); --pd-warning-border: var(--pd-warning-200); --pd-warning-mark: var(--pd-warning-500);
  --pd-danger-fg: var(--pd-danger-600);   --pd-danger-text: var(--pd-danger-700);   --pd-danger-tint: var(--pd-danger-50);   --pd-danger-border: var(--pd-danger-200);   --pd-danger-mark: var(--pd-danger-500);
  --pd-info-fg: var(--pd-neutral-700);    --pd-info-text: var(--pd-neutral-700);    --pd-info-tint: var(--pd-neutral-50);    --pd-info-border: var(--pd-border-default);
  --pd-streak: var(--pd-warning-500);

  /* Data viz (validated, see section 3.4) */
  --pd-viz-1: #7260E2; --pd-viz-2: #1293AB; --pd-viz-3: #E0782F; --pd-viz-4: #D0508C;
  --pd-viz-level-1: #A39DF4; --pd-viz-level-2: #8A7EEF; --pd-viz-level-3: #745FE1; --pd-viz-level-4: #5F4AC3; --pd-viz-level-5: #4A369E;
  --pd-viz-grid: var(--pd-border-subtle);
  --pd-viz-axis: var(--pd-border-default);
  --pd-viz-label: var(--pd-text-tertiary);

  /* Type families */
  --pd-font-display: "Rubik", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --pd-font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pd-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type: marketing */
  --pd-type-mk-display-1: 700 clamp(40px, 3.2vw + 18px, 64px) / 1.04 var(--pd-font-display);
  --pd-type-mk-display-2: 700 clamp(30px, 1.8vw + 18px, 44px) / 1.1 var(--pd-font-display);
  --pd-type-mk-title: 600 22px / 28px var(--pd-font-display);
  --pd-type-mk-lead: 400 20px / 30px var(--pd-font-text);
  --pd-type-mk-body-lg: 400 18px / 28px var(--pd-font-text);
  --pd-type-mk-body: 400 16px / 26px var(--pd-font-text);
  --pd-type-mk-body-sm: 400 14px / 22px var(--pd-font-text);
  --pd-type-mk-overline: 600 13px / 16px var(--pd-font-text);
  --pd-type-mk-caption: 500 13px / 18px var(--pd-font-text);
  /* Type: product UI (portal, auth) */
  --pd-type-ui-page-title: 600 24px / 32px var(--pd-font-display);
  --pd-type-ui-title: 600 20px / 28px var(--pd-font-text);
  --pd-type-ui-section: 600 16px / 24px var(--pd-font-text);
  --pd-type-ui-headline: 600 14px / 20px var(--pd-font-text);
  --pd-type-ui-body: 400 14px / 20px var(--pd-font-text);
  --pd-type-ui-reading: 400 14px / 22px var(--pd-font-text);
  --pd-type-ui-body-sm: 400 13px / 18px var(--pd-font-text);
  --pd-type-ui-label: 500 12px / 16px var(--pd-font-text);
  --pd-type-ui-label-strong: 600 12px / 16px var(--pd-font-text);
  --pd-type-ui-overline: 600 11px / 16px var(--pd-font-text);
  --pd-type-ui-metric: 600 24px / 28px var(--pd-font-text);
  --pd-type-ui-metric-lg: 600 32px / 36px var(--pd-font-text);
  --pd-tracking-display: -0.025em;
  --pd-tracking-title: -0.015em;
  --pd-tracking-overline: 0.06em;
  --pd-tracking-overline-mk: 0.08em;

  /* Space (4 pt base) */
  --pd-space-0-5: 2px; --pd-space-1: 4px; --pd-space-1-5: 6px; --pd-space-2: 8px; --pd-space-3: 12px; --pd-space-4: 16px;
  --pd-space-5: 20px; --pd-space-6: 24px; --pd-space-8: 32px; --pd-space-10: 40px; --pd-space-12: 48px; --pd-space-16: 64px; --pd-space-24: 96px;

  /* Sizes */
  --pd-size-control-sm: 32px; --pd-size-control-md: 40px; --pd-size-control-lg: 48px;
  --pd-size-chip: 22px; --pd-size-tap: 44px;
  --pd-size-icon-sm: 16px; --pd-size-icon-md: 20px; --pd-size-icon-lg: 24px;

  /* Radius */
  --pd-radius-xs: 4px; --pd-radius-sm: 8px; --pd-radius-md: 12px; --pd-radius-lg: 16px; --pd-radius-xl: 20px; --pd-radius-2xl: 28px; --pd-radius-full: 9999px;

  /* Elevation */
  --pd-shadow-1: 0 1px 2px rgba(15, 13, 26, 0.05), 0 1px 1px rgba(15, 13, 26, 0.03);
  --pd-shadow-2: 0 8px 24px -8px rgba(15, 13, 26, 0.18), 0 2px 6px rgba(15, 13, 26, 0.06);
  --pd-shadow-3: 0 24px 64px -16px rgba(15, 13, 26, 0.32), 0 8px 20px -8px rgba(15, 13, 26, 0.12);
  --pd-shadow-glow: 0 8px 24px -6px rgba(91, 77, 199, 0.45);

  /* Motion */
  --pd-duration-instant: 80ms; --pd-duration-fast: 140ms; --pd-duration-base: 220ms;
  --pd-duration-slow: 320ms; --pd-duration-slower: 480ms; --pd-duration-count: 800ms; --pd-duration-spring: 470ms;
  --pd-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --pd-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --pd-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --pd-ease-spring: linear(0, 0.051 4.2%, 0.167 8.3%, 0.31 12.5%, 0.454 16.7%, 0.586 20.8%, 0.699 25%, 0.79 29.2%, 0.86 33.3%, 0.913 37.5%, 0.951 41.7%, 0.977 45.8%, 0.993 50%, 1.003 54.2%, 1.009 58.3%, 1.011 62.5%, 1.011 66.7%, 1.009 75%, 1.006 83.3%, 1.003 91.7%, 1);
}

@supports not (transition-timing-function: linear(0, 1)) {
  :root { --pd-ease-spring: var(--pd-ease-enter); }
}

/* Dark theme. Phase 1: opt-in via <html data-theme="dark">.
   Phase 2 (after no literal colors remain): also apply under
   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ...same block... } } */
:root[data-theme="dark"] {
  color-scheme: dark;
  --pd-bg-canvas: #0F0D1A;
  --pd-bg-surface: #161524;
  --pd-bg-raised: #1E1C2E;
  --pd-bg-sunken: #110F1D;
  --pd-bg-inverse: #EAE8F7;
  --pd-bg-rail: #0B0A14;
  --pd-bg-rail-active: #221E3D;
  --pd-fill-hover: rgba(234, 232, 247, 0.06);
  --pd-fill-pressed: rgba(234, 232, 247, 0.10);
  --pd-fill-selected: rgba(139, 124, 240, 0.16);
  --pd-track: #272538;
  --pd-scrim: rgba(0, 0, 0, 0.60);

  --pd-text-primary: #EAE8F7;
  --pd-text-secondary: #B9B6CB;
  --pd-text-tertiary: #8F8BA5;
  --pd-text-disabled: #5E5B72;
  --pd-text-inverse: #0F0D1A;
  --pd-text-link: var(--pd-brand-300);
  --pd-text-link-hover: var(--pd-brand-200);

  --pd-border-subtle: rgba(234, 232, 247, 0.07);
  --pd-border-default: rgba(234, 232, 247, 0.11);
  --pd-border-strong: rgba(234, 232, 247, 0.20);
  --pd-card-outline: var(--pd-brand-400);
  --pd-border-input: #726E8A;
  --pd-focus: var(--pd-brand-400);

  --pd-action-primary: var(--pd-brand-600);
  --pd-action-primary-hover: var(--pd-brand-500);
  --pd-action-primary-pressed: var(--pd-brand-700);
  --pd-action-tint: rgba(139, 124, 240, 0.16);
  --pd-action-tint-hover: rgba(139, 124, 240, 0.24);
  --pd-action-tint-text: var(--pd-brand-300);
  --pd-action-disabled-bg: #272538;
  --pd-action-disabled-text: #5E5B72;

  --pd-ai-fg: var(--pd-brand-300);
  --pd-ai-text: var(--pd-brand-300);
  --pd-ai-glyph: var(--pd-brand-400);
  --pd-ai-surface: #1D1B33;
  --pd-ai-tint: rgba(139, 124, 240, 0.16);
  --pd-ai-border: rgba(139, 124, 240, 0.32);

  --pd-home-fg: #71CADF;    --pd-home-text: #71CADF;    --pd-home-tint: rgba(18, 147, 171, 0.16); --pd-home-border: rgba(18, 147, 171, 0.34); --pd-home-mark: #249CB4;
  --pd-success-fg: #7CD595; --pd-success-text: #7CD595; --pd-success-tint: rgba(37, 159, 86, 0.16); --pd-success-border: rgba(37, 159, 86, 0.34);
  --pd-warning-fg: #FFB568; --pd-warning-text: #FFB568; --pd-warning-tint: rgba(229, 130, 0, 0.16); --pd-warning-border: rgba(229, 130, 0, 0.34);
  --pd-danger-fg: #FF9EA6;  --pd-danger-text: #FF9EA6;  --pd-danger-tint: rgba(227, 44, 85, 0.16);  --pd-danger-border: rgba(227, 44, 85, 0.34);  --pd-danger-mark: #F56B7C;
  --pd-info-fg: #B9B6CB;    --pd-info-text: #B9B6CB;    --pd-info-tint: rgba(234, 232, 247, 0.06); --pd-info-border: rgba(234, 232, 247, 0.11);

  --pd-viz-1: #8878EA; --pd-viz-2: #249CB4; --pd-viz-3: #D97230; --pd-viz-4: #D4558E;
  --pd-viz-level-1: #5445A6; --pd-viz-level-2: #6756C8; --pd-viz-level-3: #7A6AE2; --pd-viz-level-4: #8F83F2; --pd-viz-level-5: #ABA5FA;

  --pd-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --pd-shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --pd-shadow-3: 0 24px 64px -16px rgba(0, 0, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --pd-shadow-glow: 0 8px 28px -6px rgba(139, 124, 240, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pd-duration-instant: 0ms; --pd-duration-fast: 120ms; --pd-duration-base: 120ms;
    --pd-duration-slow: 120ms; --pd-duration-slower: 120ms; --pd-duration-count: 0ms; --pd-duration-spring: 120ms;
    --pd-ease-spring: linear;
  }
}