/* Parkday design tokens v1.0. Wayside Foundry LLC. Generated from tokens.json. */
/* Light theme = Morning. Dark theme = Night. Default follows the OS; force with <html data-theme="light|dark">. */

@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-hyperlegible-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/atkinson-hyperlegible-latin-700-italic.woff2') format('woff2'); }
/* Metric-matched fallback keeps layout stable while the font loads. */
@font-face { font-family: 'Atkinson Hyperlegible Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }

:root {
  color-scheme: light dark;
  --pd-font: 'Atkinson Hyperlegible', 'Atkinson Hyperlegible Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pd-space-1: 4px;
  --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-14: 56px;
  --pd-radius-sm: 8px;
  --pd-radius-md: 12px;
  --pd-radius-lg: 16px;
  --pd-radius-xl: 24px;
  --pd-radius-pill: 999px;
  --pd-size-touch-target: 48px;
  --pd-size-touch-target-min: 44px;
  --pd-size-icon: 24px;
  --pd-size-icon-small: 20px;
  --pd-size-tab-bar: 64px;
  --pd-size-gutter: 16px;
  --pd-glass-blur: 20px;
  --pd-glass-saturate: 1.4;
  --pd-motion-fast: 120ms;
  --pd-motion-base: 200ms;
  --pd-easing: cubic-bezier(0.2, 0, 0, 1);
  --pd-type-display-size: 34px;
  --pd-type-display-line: 40px;
  --pd-type-display-weight: 700;
  --pd-type-display-tracking: -0.01em;
  --pd-type-title-size: 26px;
  --pd-type-title-line: 32px;
  --pd-type-title-weight: 700;
  --pd-type-title-tracking: -0.005em;
  --pd-type-heading-size: 20px;
  --pd-type-heading-line: 26px;
  --pd-type-heading-weight: 700;
  --pd-type-heading-tracking: 0;
  --pd-type-body-size: 17px;
  --pd-type-body-line: 26px;
  --pd-type-body-weight: 400;
  --pd-type-body-tracking: 0;
  --pd-type-body-strong-size: 17px;
  --pd-type-body-strong-line: 26px;
  --pd-type-body-strong-weight: 700;
  --pd-type-body-strong-tracking: 0;
  --pd-type-label-size: 15px;
  --pd-type-label-line: 20px;
  --pd-type-label-weight: 700;
  --pd-type-label-tracking: 0.01em;
  --pd-type-caption-size: 14px;
  --pd-type-caption-line: 20px;
  --pd-type-caption-weight: 400;
  --pd-type-caption-tracking: 0.01em;
  --pd-type-numeral-large-size: 44px;
  --pd-type-numeral-large-line: 48px;
  --pd-type-numeral-large-weight: 700;
  --pd-type-numeral-large-tracking: -0.02em;
  --pd-type-numeral-size: 22px;
  --pd-type-numeral-line: 28px;
  --pd-type-numeral-weight: 700;
  --pd-type-numeral-tracking: -0.01em;
  --pd-type-numeral-small-size: 17px;
  --pd-type-numeral-small-line: 22px;
  --pd-type-numeral-small-weight: 700;
  --pd-type-numeral-small-tracking: 0;
  --pd-background: #FBF6EE;
  --pd-surface: #FFFCF7;
  --pd-surface-sunken: #F3ECE0;
  --pd-glass: rgba(255, 252, 247, 0.88);
  --pd-glass-border: rgba(255, 255, 255, 0.70);
  --pd-scrim: rgba(20, 34, 58, 0.48);
  --pd-text: #14223A;
  --pd-text-secondary: #4A5268;
  --pd-border: #E3D9CA;
  --pd-border-strong: #7A8094;
  --pd-primary: #A8410A;
  --pd-primary-pressed: #8C3608;
  --pd-on-primary: #FFFFFF;
  --pd-primary-soft: #FCE6D6;
  --pd-on-primary-soft: #7E3108;
  --pd-accent: #F2762E;
  --pd-on-accent: #14223A;
  --pd-night: #14223A;
  --pd-focus: #1B5FD0;
  --pd-status-open-fg: #1E6158;
  --pd-status-open-bg: #DFF0EC;
  --pd-status-filling-up-fg: #6B4A00;
  --pd-status-filling-up-bg: #FAEFD2;
  --pd-status-watching-fg: #1C4D9A;
  --pd-status-watching-bg: #E2EBF8;
  --pd-status-opens-soon-fg: #583794;
  --pd-status-opens-soon-bg: #EEE7F8;
  --pd-status-alert-fg: #8E2453;
  --pd-status-alert-bg: #F9E3EC;
  --pd-status-closed-fg: #434950;
  --pd-status-closed-bg: #E6E5E1;
  --pd-status-unavailable-fg: #8A2E1F;
  --pd-status-unavailable-bg: #F6E2DD;
  --pd-shadow-card: 0 1px 2px rgba(20,34,58,0.06), 0 4px 16px rgba(20,34,58,0.06);
  --pd-shadow-float: 0 8px 32px rgba(20,34,58,0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pd-background: #0B1426;
    --pd-surface: #131F36;
    --pd-surface-sunken: #070E1C;
    --pd-glass: rgba(22, 35, 60, 0.86);
    --pd-glass-border: rgba(255, 255, 255, 0.10);
    --pd-scrim: rgba(0, 0, 0, 0.60);
    --pd-text: #EEF2F8;
    --pd-text-secondary: #B8C3D6;
    --pd-border: #253555;
    --pd-border-strong: #7D8BA6;
    --pd-primary: #FF9B52;
    --pd-primary-pressed: #F2843A;
    --pd-on-primary: #1A0E05;
    --pd-primary-soft: #3A2414;
    --pd-on-primary-soft: #FFC9A0;
    --pd-accent: #FF9B52;
    --pd-on-accent: #1A0E05;
    --pd-night: #0B1426;
    --pd-focus: #8DB6FF;
    --pd-status-open-fg: #86D3C4;
    --pd-status-open-bg: #10302C;
    --pd-status-filling-up-fg: #F0C865;
    --pd-status-filling-up-bg: #30270E;
    --pd-status-watching-fg: #A2C3F7;
    --pd-status-watching-bg: #17284A;
    --pd-status-opens-soon-fg: #CDB5F5;
    --pd-status-opens-soon-bg: #28203E;
    --pd-status-alert-fg: #F5A3C4;
    --pd-status-alert-bg: #3A1426;
    --pd-status-closed-fg: #C6CACF;
    --pd-status-closed-bg: #252B36;
    --pd-status-unavailable-fg: #F4A492;
    --pd-status-unavailable-bg: #391914;
    --pd-shadow-card: 0 1px 2px rgba(0,0,0,0.45);
    --pd-shadow-float: 0 8px 32px rgba(0,0,0,0.55);
  }
}

:root[data-theme="dark"] {
  --pd-background: #0B1426;
  --pd-surface: #131F36;
  --pd-surface-sunken: #070E1C;
  --pd-glass: rgba(22, 35, 60, 0.86);
  --pd-glass-border: rgba(255, 255, 255, 0.10);
  --pd-scrim: rgba(0, 0, 0, 0.60);
  --pd-text: #EEF2F8;
  --pd-text-secondary: #B8C3D6;
  --pd-border: #253555;
  --pd-border-strong: #7D8BA6;
  --pd-primary: #FF9B52;
  --pd-primary-pressed: #F2843A;
  --pd-on-primary: #1A0E05;
  --pd-primary-soft: #3A2414;
  --pd-on-primary-soft: #FFC9A0;
  --pd-accent: #FF9B52;
  --pd-on-accent: #1A0E05;
  --pd-night: #0B1426;
  --pd-focus: #8DB6FF;
  --pd-status-open-fg: #86D3C4;
  --pd-status-open-bg: #10302C;
  --pd-status-filling-up-fg: #F0C865;
  --pd-status-filling-up-bg: #30270E;
  --pd-status-watching-fg: #A2C3F7;
  --pd-status-watching-bg: #17284A;
  --pd-status-opens-soon-fg: #CDB5F5;
  --pd-status-opens-soon-bg: #28203E;
  --pd-status-alert-fg: #F5A3C4;
  --pd-status-alert-bg: #3A1426;
  --pd-status-closed-fg: #C6CACF;
  --pd-status-closed-bg: #252B36;
  --pd-status-unavailable-fg: #F4A492;
  --pd-status-unavailable-bg: #391914;
  --pd-shadow-card: 0 1px 2px rgba(0,0,0,0.45);
  --pd-shadow-float: 0 8px 32px rgba(0,0,0,0.55);
}

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

/* Type scale classes */
.pd-display { font-family: var(--pd-font); font-size: var(--pd-type-display-size); line-height: var(--pd-type-display-line); font-weight: var(--pd-type-display-weight); letter-spacing: var(--pd-type-display-tracking); }
.pd-title { font-family: var(--pd-font); font-size: var(--pd-type-title-size); line-height: var(--pd-type-title-line); font-weight: var(--pd-type-title-weight); letter-spacing: var(--pd-type-title-tracking); }
.pd-heading { font-family: var(--pd-font); font-size: var(--pd-type-heading-size); line-height: var(--pd-type-heading-line); font-weight: var(--pd-type-heading-weight); letter-spacing: var(--pd-type-heading-tracking); }
.pd-body { font-family: var(--pd-font); font-size: var(--pd-type-body-size); line-height: var(--pd-type-body-line); font-weight: var(--pd-type-body-weight); letter-spacing: var(--pd-type-body-tracking); }
.pd-body-strong { font-family: var(--pd-font); font-size: var(--pd-type-body-strong-size); line-height: var(--pd-type-body-strong-line); font-weight: var(--pd-type-body-strong-weight); letter-spacing: var(--pd-type-body-strong-tracking); }
.pd-label { font-family: var(--pd-font); font-size: var(--pd-type-label-size); line-height: var(--pd-type-label-line); font-weight: var(--pd-type-label-weight); letter-spacing: var(--pd-type-label-tracking); }
.pd-caption { font-family: var(--pd-font); font-size: var(--pd-type-caption-size); line-height: var(--pd-type-caption-line); font-weight: var(--pd-type-caption-weight); letter-spacing: var(--pd-type-caption-tracking); }
.pd-numeral-large { font-family: var(--pd-font); font-size: var(--pd-type-numeral-large-size); line-height: var(--pd-type-numeral-large-line); font-weight: var(--pd-type-numeral-large-weight); letter-spacing: var(--pd-type-numeral-large-tracking); font-variant-numeric: tabular-nums; }
.pd-numeral { font-family: var(--pd-font); font-size: var(--pd-type-numeral-size); line-height: var(--pd-type-numeral-line); font-weight: var(--pd-type-numeral-weight); letter-spacing: var(--pd-type-numeral-tracking); font-variant-numeric: tabular-nums; }
.pd-numeral-small { font-family: var(--pd-font); font-size: var(--pd-type-numeral-small-size); line-height: var(--pd-type-numeral-small-line); font-weight: var(--pd-type-numeral-small-weight); letter-spacing: var(--pd-type-numeral-small-tracking); font-variant-numeric: tabular-nums; }

/* Glass surface with honest fallback */
.pd-glass { background: var(--pd-glass); border: 1px solid var(--pd-glass-border); -webkit-backdrop-filter: blur(var(--pd-glass-blur)) saturate(var(--pd-glass-saturate)); backdrop-filter: blur(var(--pd-glass-blur)) saturate(var(--pd-glass-saturate)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pd-glass { background: var(--pd-surface); } }
@media (prefers-reduced-transparency: reduce) { .pd-glass { background: var(--pd-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Focus ring: always visible, never color-only on the control itself */
:focus-visible { outline: 3px solid var(--pd-focus); outline-offset: 2px; }

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