@layer porchlight {
  @layer reset, tokens, themes, base, layout, components, utilities, enhancements, print;
}

@layer porchlight.reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  :where(html) {
    color-scheme: light dark;
    text-size-adjust: 100%;
  }

  :where(body) {
    min-block-size: 100dvb;
    margin: 0;
  }

  :where(img, svg, video, canvas) {
    block-size: auto;
    max-inline-size: 100%;
    display: block;
  }

  :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
  }

  :where(button, [role="button"], input, select, textarea, summary) {
    touch-action: manipulation;
  }

  :where(table) {
    border-collapse: separate;
    border-spacing: 0;
  }

  :where([hidden]) {
    display: none !important;
  }
}

@layer porchlight.tokens {
  @property --pl-motion-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }

  @property --pl-radius-control {
    syntax: "<length>";
    inherits: true;
    initial-value: 8px;
  }

  @property --pl-focus-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 2px;
  }

  @property --pl-gauge-value {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }

  :root {
    --pl-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
      Cantarell, "Noto Sans", sans-serif;
    --pl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      monospace;
    --pl-font-weight-normal: 400;
    --pl-font-weight-medium: 500;
    --pl-font-weight-semibold: 600;
    --pl-font-weight-bold: 700;
    --pl-font-weight-black: 900;
    --pl-text-2xs: clamp(.65rem, .62rem + .08vi, .7188rem);
    --pl-text-xs: clamp(.75rem, .72rem + .1vi, .8125rem);
    --pl-text-sm: clamp(.875rem, .84rem + .1vi, .9375rem);
    --pl-text-md: 1rem;
    --pl-text-lg: clamp(1.125rem, 1.05rem + .25vi, 1.25rem);
    --pl-text-xl: clamp(1.25rem, 1.1rem + .55vi, 1.625rem);
    --pl-text-2xl: clamp(1.5rem, 1.2rem + 1vi, 2rem);
    --pl-text-3xl: clamp(1.875rem, 1.4rem + 1.6vi, 2.75rem);
    --pl-text-display: clamp(2.5rem, 1.8rem + 3vi, 4.5rem);
    --pl-leading-tight: 1.15;
    --pl-leading-snug: 1.3;
    --pl-leading-normal: 1.5;
    --pl-leading-loose: 1.7;
    --pl-tracking-tighter: -.03em;
    --pl-tracking-tight: -.015em;
    --pl-tracking-normal: 0em;
    --pl-tracking-wide: .04em;
    --pl-tracking-wider: .06em;
    --pl-font-feature-numeric: "tnum" 1, "lnum" 1, "zero" 1;
    --pl-font-feature-code: "zero" 1, "cv02" 1, "cv11" 1;
    --pl-space-0: 0;
    --pl-space-1: .25rem;
    --pl-space-2: .5rem;
    --pl-space-3: .75rem;
    --pl-space-4: 1rem;
    --pl-space-5: 1.25rem;
    --pl-space-6: 1.5rem;
    --pl-space-8: 2rem;
    --pl-space-10: 2.5rem;
    --pl-space-12: 3rem;
    --pl-radius-xs: .25rem;
    --pl-radius-sm: .375rem;
    --pl-radius-md: .5rem;
    --pl-radius-lg: .75rem;
    --pl-radius-xl: 1rem;
    --pl-radius-2xl: 1.5rem;
    --pl-radius-3xl: 2rem;
    --pl-radius-pill: 999rem;
    --pl-radius-control: var(--pl-radius-md);
    --pl-duration-1: calc(.12s * var(--pl-motion-scale));
    --pl-duration-2: calc(.18s * var(--pl-motion-scale));
    --pl-duration-3: calc(.26s * var(--pl-motion-scale));
    --pl-duration-enter: calc(.22s * var(--pl-motion-scale));
    --pl-duration-exit: calc(.16s * var(--pl-motion-scale));
    --pl-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --pl-ease-emphasized: cubic-bezier(.2, 0, 0, 1.2);
    --pl-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --pl-ease-decelerate: cubic-bezier(0, 0, .2, 1);
    --pl-ease-accelerate: cubic-bezier(.4, 0, 1, 1);
    --pl-z-base: 0;
    --pl-z-raised: 10;
    --pl-z-sticky: 100;
    --pl-z-overlay: 1000;
    --pl-z-toast: 1100;
    --pl-brand-1: oklch(97% .02 82);
    --pl-brand-2: oklch(89% .05 82);
    --pl-brand-3: oklch(80% .09 82);
    --pl-brand-4: oklch(70% .13 82);
    --pl-brand-5: oklch(63% .15 82);
    --pl-brand-6: oklch(56% .14 82);
    --pl-brand-7: oklch(48% .11 82);
    --pl-brand-8: oklch(39% .07 82);
    --pl-brand-9: oklch(29% .04 82);
    --pl-color-bg: light-dark(oklch(98% .005 60), oklch(14% .008 55));
    --pl-color-surface: light-dark(oklch(100% 0 0), oklch(18% .008 55));
    --pl-color-surface-2: light-dark(oklch(94% .008 60), oklch(22% .012 55));
    --pl-color-text: light-dark(oklch(20% .012 55), oklch(96% .008 60));
    --pl-color-text-muted: light-dark(oklch(46% .015 55), oklch(72% .012 55));
    --pl-color-text-faint: light-dark(oklch(48% .015 55), oklch(68% .012 55));
    --pl-color-border: light-dark(oklch(80% .015 55 / .75), oklch(45% .012 55 / .3));
    --pl-color-border-overlay: transparent;
    --pl-color-accent: light-dark(var(--pl-brand-7), var(--pl-brand-4));
    --pl-color-accent-text: light-dark(#fff, oklch(16% .01 55));
    --pl-color-accent-hover: color-mix(in oklab,
      var(--pl-color-accent),
      oklch(16% .01 55) 10%);
    --pl-color-danger: oklch(60% .22 25);
    --pl-color-danger-bg: light-dark(oklch(96% .04 25), oklch(22% .08 25));
    --pl-color-danger-text: light-dark(oklch(36% .18 25), oklch(90% .06 25));
    --pl-color-success: oklch(58% .18 150);
    --pl-color-success-bg: light-dark(oklch(96% .04 150), oklch(22% .08 150));
    --pl-color-success-text: light-dark(oklch(34% .15 150), oklch(82% .15 150));
    --pl-color-warning: oklch(62% .19 75);
    --pl-color-warning-bg: light-dark(oklch(96% .06 75), oklch(24% .09 75));
    --pl-color-warning-text: light-dark(oklch(40% .17 75), oklch(84% .15 75));
    --pl-opacity-disabled: .5;
    --pl-accent-bar-width: 3px;
    --pl-color-scrim: oklch(0% 0 0 / .55);
    --pl-overlay-popover-bg: light-dark(oklch(100% 0 0), oklch(19% .01 55));
    --pl-menu-row-min-block-size: 2.25rem;
    --pl-menu-row-padding-inline: var(--pl-space-3);
    --pl-menu-row-radius: var(--pl-radius-sm);
    --pl-menu-row-hover-bg: light-dark(oklch(93% .008 60), oklch(25% .012 55));
    --pl-menu-row-icon-size: 1rem;
    --pl-control-block-size: 2.5rem;
    --pl-control-padding-inline: var(--pl-space-4);
    --pl-control-gap: var(--pl-space-2);
    --pl-control-border-width: 1px;
    --pl-control-radius: var(--pl-radius-control);
    --pl-focus-color: light-dark(oklch(52% .14 82), oklch(72% .13 82));
    --pl-focus-offset: 2px;
    --pl-focus-size: 2px;
    --pl-focus-glow-opacity: 85%;
    --pl-backdrop-blur: 12px;
    --pl-backdrop-saturate: 160%;
    --pl-backdrop-blur-strong: 20px;
    --pl-backdrop-saturate-strong: 180%;
    --pl-backdrop-blur-scrim: 4px;
    --pl-backdrop-saturate-scrim: 80%;
    --pl-shadow-bevel: inset 0 1px 0
      light-dark(oklch(100% 0 0 / .7), oklch(100% 0 0 / .08));
    --pl-shadow-inset: inset 0 1px 2px oklch(0% 0 0 / .08);
    --pl-shadow-1: 0 1px 2px oklch(0% 0 0 / .08), 0 1px 4px oklch(30% .04 40 / .06),
      var(--pl-shadow-bevel);
    --pl-shadow-2: 0 4px 8px oklch(0% 0 0 / .08), 0 8px 24px oklch(25% .06 40 / .12),
      inset 0 1px 0 oklch(100% 0 0 / .06);
    --pl-shadow-3: 0 8px 16px oklch(0% 0 0 / .1),
      0 24px 64px oklch(20% .08 40 / .18),
      inset 0 1px 0 oklch(100% 0 0 / .08);
    --pl-shadow-glow: 0 0 0 4px
      color-mix(in oklab, var(--pl-color-accent), transparent 72%);
  }
}

@layer porchlight.themes {
  :where([data-pl-theme="light"]) {
    color-scheme: light;
  }

  :where([data-pl-theme="dark"]) {
    color-scheme: dark;
  }

  :where([data-pl-palette="slate"]) {
    --pl-brand-1: oklch(97% .015 250);
    --pl-brand-2: oklch(89% .035 250);
    --pl-brand-3: oklch(80% .065 250);
    --pl-brand-4: oklch(70% .1 250);
    --pl-brand-5: oklch(62% .12 250);
    --pl-brand-6: oklch(54% .12 250);
    --pl-brand-7: oklch(46% .1 250);
    --pl-brand-8: oklch(37% .07 250);
    --pl-brand-9: oklch(27% .04 250);
    --pl-color-bg: light-dark(oklch(97.5% .006 250), oklch(14% .015 250));
    --pl-color-surface: light-dark(oklch(100% 0 0), oklch(18% .018 250));
    --pl-color-surface-2: light-dark(oklch(94% .01 250), oklch(22% .022 250));
    --pl-color-text: light-dark(oklch(20% .015 250), oklch(96% .008 250));
    --pl-color-text-muted: light-dark(oklch(46% .018 250), oklch(72% .015 250));
    --pl-color-border: light-dark(oklch(80% .015 250 / .75), oklch(45% .015 250 / .3));
    --pl-color-accent: light-dark(var(--pl-brand-7), var(--pl-brand-4));
    --pl-color-accent-text: light-dark(#fff, oklch(16% .01 250));
  }

  :where([data-pl-palette="zinc"]) {
    --pl-brand-1: oklch(97% .005 285);
    --pl-brand-2: oklch(89% .01 285);
    --pl-brand-3: oklch(80% .015 285);
    --pl-brand-4: oklch(68% .02 285);
    --pl-brand-5: oklch(58% .025 285);
    --pl-brand-6: oklch(48% .025 285);
    --pl-brand-7: oklch(38% .02 285);
    --pl-brand-8: oklch(28% .015 285);
    --pl-brand-9: oklch(18% .01 285);
    --pl-color-bg: light-dark(oklch(98% 0 0), oklch(13% 0 0));
    --pl-color-surface: light-dark(oklch(100% 0 0), oklch(17% 0 0));
    --pl-color-surface-2: light-dark(oklch(93.5% 0 0), oklch(21% 0 0));
    --pl-color-text: light-dark(oklch(18% 0 0), oklch(96% 0 0));
    --pl-color-text-muted: light-dark(oklch(44% 0 0), oklch(72% 0 0));
    --pl-color-border: light-dark(oklch(78% 0 0 / .75), oklch(42% 0 0 / .35));
    --pl-color-accent: light-dark(oklch(22% 0 0), oklch(92% 0 0));
    --pl-color-accent-text: light-dark(#fff, oklch(15% 0 0));
  }

  :where([data-pl-palette="midnight"]) {
    --pl-brand-1: oklch(97% .02 275);
    --pl-brand-2: oklch(88% .05 275);
    --pl-brand-3: oklch(78% .09 275);
    --pl-brand-4: oklch(68% .15 275);
    --pl-brand-5: oklch(60% .19 275);
    --pl-brand-6: oklch(52% .18 275);
    --pl-brand-7: oklch(44% .15 275);
    --pl-brand-8: oklch(34% .1 275);
    --pl-brand-9: oklch(24% .06 275);
    --pl-color-bg: light-dark(oklch(97% .01 270), oklch(11% .022 265));
    --pl-color-surface: light-dark(oklch(100% 0 0), oklch(15% .025 265));
    --pl-color-surface-2: light-dark(oklch(93% .015 270), oklch(19% .03 265));
    --pl-color-text: light-dark(oklch(18% .02 270), oklch(96% .01 270));
    --pl-color-text-muted: light-dark(oklch(44% .025 270), oklch(74% .02 270));
    --pl-color-border: light-dark(oklch(78% .02 270 / .75), oklch(40% .025 265 / .35));
    --pl-color-accent: light-dark(var(--pl-brand-7), var(--pl-brand-4));
    --pl-color-accent-text: light-dark(#fff, oklch(14% .02 275));
  }

  :where([data-pl-palette="emerald"]) {
    --pl-brand-1: oklch(97% .025 155);
    --pl-brand-2: oklch(90% .055 155);
    --pl-brand-3: oklch(81% .09 155);
    --pl-brand-4: oklch(71% .13 155);
    --pl-brand-5: oklch(61% .16 155);
    --pl-brand-6: oklch(52% .15 155);
    --pl-brand-7: oklch(43% .12 155);
    --pl-brand-8: oklch(34% .08 155);
    --pl-brand-9: oklch(24% .04 155);
    --pl-color-bg: light-dark(oklch(98% .006 155), oklch(13.5% .012 155));
    --pl-color-surface: light-dark(oklch(100% 0 0), oklch(17.5% .014 155));
    --pl-color-surface-2: light-dark(oklch(94% .01 155), oklch(21.5% .018 155));
    --pl-color-text: light-dark(oklch(19% .015 155), oklch(96% .008 155));
    --pl-color-text-muted: light-dark(oklch(44% .02 155), oklch(73% .015 155));
    --pl-color-border: light-dark(oklch(79% .015 155 / .75), oklch(42% .015 155 / .32));
    --pl-color-accent: light-dark(var(--pl-brand-7), var(--pl-brand-4));
    --pl-color-accent-text: light-dark(#fff, oklch(14% .02 155));
  }

  :where([data-pl-density="compact"]) {
    --pl-control-block-size: 2rem;
    --pl-control-padding-inline: var(--pl-space-3);
    --pl-control-gap: var(--pl-space-1);
  }

  :where([data-pl-density="dense"]) {
    --pl-control-block-size: 1.75rem;
    --pl-control-padding-inline: var(--pl-space-2);
    --pl-control-gap: var(--pl-space-1);
    --pl-space-2: .375rem;
    --pl-space-3: .5rem;
    --pl-space-4: .75rem;
    --pl-space-5: .875rem;
    --pl-space-6: 1rem;
    --pl-space-8: 1.5rem;
    --pl-space-10: 1.75rem;
    --pl-space-12: 2rem;
    --pl-text-sm: .8125rem;
    --pl-text-xs: .6875rem;
  }

  :where([data-pl-density="comfortable"]) {
    --pl-control-block-size: 2.5rem;
  }

  :where([data-pl-density="touch"]) {
    --pl-control-block-size: 2.75rem;
    --pl-control-padding-inline: var(--pl-space-5);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --pl-motion-scale: 0;
      scroll-behavior: auto;
    }

    *, :before, :after, ::backdrop {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --pl-color-surface-2: light-dark(oklch(90% .012 60), oklch(30% .014 55));
      --pl-color-border: light-dark(oklch(64% .018 55 / .95), oklch(72% .014 55 / .78));
      --pl-focus-size: 3px;
      --pl-focus-glow-opacity: 75%;
    }
  }

  @media (forced-colors: active) {
    :root {
      --pl-color-bg: Canvas;
      --pl-color-surface: Canvas;
      --pl-color-surface-2: Canvas;
      --pl-color-text: CanvasText;
      --pl-color-text-muted: CanvasText;
      --pl-color-border: ButtonBorder;
      --pl-color-accent: Highlight;
      --pl-color-accent-text: HighlightText;
      --pl-focus-color: Highlight;
      --pl-shadow-1: none;
      --pl-shadow-2: none;
      --pl-shadow-3: none;
    }
  }
}

@layer porchlight.base {
  :where(html) {
    font-family: var(--pl-font-sans);
    background: var(--pl-color-bg);
    color: var(--pl-color-text);
    accent-color: var(--pl-color-accent);
  }

  :where(body) {
    font-size: var(--pl-text-md);
    line-height: var(--pl-leading-normal);
    background: var(--pl-color-bg);
    color: var(--pl-color-text);
    text-rendering: optimizelegibility;
  }

  :where(a) {
    color: var(--pl-color-accent);
    text-underline-offset: .18em;
    text-decoration-thickness: .08em;
  }

  :where(a:hover) {
    color: var(--pl-color-accent-hover);
  }

  :where(:focus-visible) {
    outline: var(--pl-focus-size) solid var(--pl-focus-color);
    outline-offset: var(--pl-focus-offset);
  }

  :where(h1, h2, h3, h4) {
    line-height: var(--pl-leading-tight);
    text-wrap: balance;
    letter-spacing: var(--pl-tracking-tight);
    margin-block: 0;
  }

  :where(h1) {
    font-weight: var(--pl-font-weight-black, 900);
    letter-spacing: var(--pl-tracking-tighter);
  }

  :where(h2) {
    font-weight: var(--pl-font-weight-bold, 700);
    letter-spacing: var(--pl-tracking-tight);
  }

  :where(p) {
    text-wrap: pretty;
  }

  :where(p, ul, ol, dl, figure, blockquote) {
    margin-block: 0;
  }

  :where(code, kbd, samp, pre) {
    font-family: var(--pl-font-mono);
    font-feature-settings: var(--pl-font-feature-code);
  }

  :where() {
    background: color-mix(in oklab, var(--pl-color-accent), transparent 60%);
  }
}