@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scrollbar-gutter: stable; }
  body { margin: 0; min-block-size: 100dvh; }
  img, picture, video { max-inline-size: 100%; block-size: auto; }
  button, input, textarea, select { font: inherit; }
}

@layer tokens {
  @property --color-primary {
    syntax: "<color>"; inherits: true; initial-value: oklch(52% 0.24 5);
  }
  :root {
    color-scheme: light dark;
    accent-color: var(--color-primary);

    --font: sans-serif;
    --font-title: sans-serif;

    --font-size: 20px;
    --space-2xs: 0.3125rem;

    --line-height-body: 2;
    --line-height-heading: 1.5;
    --line-height-button: 1;

    --color-primary: light-dark(oklch(52% 0.24 5), oklch(70% 0.18 5));
    --color-primary-hover: color-mix(in oklab, var(--color-primary) 80%, black);

    --color-accent: oklch(58% 0.24 10);
    --color-accent-text: white;
    --color-accent-hover: color-mix(in oklab, var(--color-accent) 80%, black);

    --color-bg: light-dark(oklch(96% 0 0), oklch(20% 0 0));
    --color-bg-odd: light-dark(white, oklch(24% 0 0));
    --color-bg-alt: light-dark(oklch(88% 0 0), oklch(28% 0 0));
    --color-text: light-dark(oklch(0% 0 0), oklch(100% 0 0));

    --tp-dark: light-dark(oklch(0% 0 0 / 0.05), oklch(100% 0 0 / 0.08));

    --color-border: light-dark(oklch(0% 0 0 / 0.15), oklch(100% 0 0 / 0.25));
    --color-border-strong: light-dark(oklch(0% 0 0 / 0.30), oklch(100% 0 0 / 0.45));
    --color-field-bg: light-dark(white, oklch(24% 0 0));
    --color-placeholder: light-dark(oklch(55% 0 0), oklch(60% 0 0));

    --color-soft-border: light-dark(oklch(0% 0 0 / 0.15), oklch(100% 0 0 / 0.25));
    --color-soft-border-hover: light-dark(oklch(0% 0 0 / 0.30), oklch(100% 0 0 / 0.45));
    --color-soft-text: light-dark(oklch(47% 0 0), oklch(76% 0 0));

    --radius: 30px;
    --radius-sm: 12px;
    --radius-pill: 100px;
    --toucharea: 44px;

    --transition: 0.4s ease-in-out;
    --transition-fast: 0.15s ease-in-out;

    --padding:  30px;
    --section-padding: var(--padding);
    --button-padding-block:  calc(var(--padding) * 0.2);
    --button-padding-inline: calc(var(--padding) * 0.7);
    --gap: 20px;
    --field-padding-block:  calc(var(--padding) * 0.4);
    --field-padding-inline: calc(var(--padding) * 0.6);

    --measure: none;
  }

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

  @media (min-width: 56.25rem) {
    :root { --section-padding: calc(var(--padding) * 4); }
  }
}

@layer base {
  html { font-size: 100%; }
  body {
    font-family: var(--font);
    font-size: var(--font-size);
    line-height: var(--line-height-body);
    background: var(--color-bg);
    color: var(--color-text);
    padding: 0;
    -webkit-font-smoothing: antialiased;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-title);
    margin-block: 0 var(--padding);
    padding: 0;
    font-weight: 800;
    line-height: var(--line-height-heading);
    text-wrap: balance;
  }
  h1 { font-size: calc(var(--font-size) * 3); }
  h2 { font-size: calc(var(--font-size) * 2.5); }
  h3 { font-size: calc(var(--font-size) * 2); }
  h4 { font-size: calc(var(--font-size) * 1.6); }
  h5 { font-size: calc(var(--font-size) * 1.2); }
  h6 { font-size: calc(var(--font-size) * .8); }
  :where(p) {
    margin-block: 0 var(--padding);
    padding: 0;
    font-size: var(--font-size);
    text-wrap: pretty;
    max-inline-size: var(--measure);
  }
  :where(p):last-child { margin-block-end: 0; }
  :where(a) { color: var(--color-primary); text-decoration: none; }
  :where(a):hover { color: var(--color-primary-hover); }
  :where(ul) { margin: 0; padding: 0; list-style: none; }
  :where(fieldset) { margin: 0; padding: 0; border: 0; }
  :where(label) { cursor: pointer; }
  :where(section) { padding: var(--section-padding); }
  :where(section) :where(h1, h2) {
    font-size: calc(var(--font-size) * 5);
    line-height: var(--line-height-heading);
    margin-block-end: var(--padding);
  }
  :where(section) > :where(p) {
    font-size: var(--font-size);
    line-height: var(--line-height-body);
    opacity: 0.6;
  }
  @media (min-width: 56.25rem) {
    :where(section) :where(h1, h2) { font-size: calc(var(--font-size) * 4); }
  }
}

code { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95rem; padding: calc(var(--padding) / 3); border-radius:10px; background: var(--color-bg-alt); }
pre { margin:14px 0; padding:var(--padding); background:#222; color:#fff; border-radius:var(--radius); overflow:auto; font-size:1rem; }
pre code { background:none; padding:0; color:inherit; font-size:1em; }

table { width:100%; border-collapse:collapse; margin:12px 0 22px; font-size:1rem; }
th,td { text-align:left; padding:10px 20px; border-bottom:1px solid var(--color-bg-alt); vertical-align:top; }
th { font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
td:first-child { white-space:nowrap; }

@layer components {
  :where(.buttons) { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); }
  :where(button, .button) {
    font: inherit;
    font-size: var(--font-size);
    line-height: var(--line-height-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-block-size: var(--toucharea);
    padding-block:  var(--button-padding-block);
    padding-inline: var(--button-padding-inline);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--tp-dark);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: translate var(--transition), background-color var(--transition), box-shadow var(--transition);
  }
  @media (hover: hover) { :where(button, .button):hover { translate: 0 2px; } }
  :where(button, .button):focus-visible {
    outline: 3px solid color-mix(in oklab, var(--color-primary) 50%, transparent);
    outline-offset: 2px;
  }
  :where(button, .button):disabled,
  :where(button, .button)[aria-disabled="true"] { cursor: not-allowed; opacity: 0.4; }

  :where(button, .button).accent { background: var(--color-accent); color: var(--color-accent-text); }
  @media (hover: hover) { :where(button, .button).accent:hover { background: var(--color-accent-hover); } }

  :where(button, .button).soft {
    border: 2px solid var(--color-soft-border);
    background: transparent;
    color: var(--color-soft-text);
    padding-block:  calc(var(--button-padding-block) - 2px);
    padding-inline: calc(var(--button-padding-inline) - 2px);
  }
  @media (hover: hover) {
    :where(button, .button).soft:hover {
      background: var(--tp-dark);
      border-color: var(--color-soft-border-hover);
      color: var(--color-text);
    }
  }

  :where(button, .button).icon {
    inline-size: var(--toucharea);
    block-size: var(--toucharea);
    padding: 0;
  }
  :where(button, .button).lg {
    --button-padding-block:  calc(var(--padding) * .6);
    --button-padding-inline: calc(var(--padding) * 2);
  }
}

:where(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
  textarea,
  select
) {
  font: inherit;
  font-size: var(--font-size);
  line-height: var(--line-height-button);
  inline-size: 100%;
  min-block-size: var(--toucharea);
  padding-block:  var(--field-padding-block);
  padding-inline: var(--field-padding-inline);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-field-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
  textarea,
  select
)::placeholder { color: var(--color-placeholder); opacity: 1; }

@media (hover: hover) {
  :where(
    input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
    textarea,
    select
  ):hover:not(:disabled) { border-color: var(--color-border-strong); }
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
  textarea,
  select
):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--color-primary) 50%, transparent);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
  textarea,
  select
):disabled { cursor: not-allowed; opacity: 0.4; }

:where(textarea) { min-block-size: calc(var(--toucharea) * 3); resize: vertical; line-height: var(--line-height-body); }

:where(select) {
  appearance: none;
  padding-inline-end: calc(var(--field-padding-inline) + 1.5em);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - var(--field-padding-inline) - 0.8em) 50%,
    calc(100% - var(--field-padding-inline) - 0.4em) 50%;
  background-size: 0.4em 0.4em;
  background-repeat: no-repeat;
  cursor: pointer;
}

:where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1.25em;
  block-size: 1.25em;
  margin: 0;
  cursor: pointer;
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .center-items { display: flex; align-items: center; }
  .mb-1 { margin-block-end: var(--padding); }
  .mb-2 { margin-block-end: calc(var(--padding) * 2); }
  .text-muted { opacity: 0.65; }
  .bg-odd { background: var(--color-bg-odd); }
  .bg-alt { background: var(--color-bg-alt); }
  .no-bg  { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) { :where(button, .button) { border: 1px solid ButtonText; } }