/*
 * Light-only Pico theme for the current Impact Distillery design.
 * Brand values live in brand.css; this file maps them to Pico variables.
 */

:root,
[data-theme="light"] {
  color-scheme: light;
  --theme-font-family-display: "Playfair", Georgia, "Times New Roman", serif;
  --theme-font-family-serif:
    "Source Serif 4", Georgia, "Times New Roman", serif;
  --theme-font-size-serif: 1.02em;
  --theme-font-size-mono: 0.9em;
  --pico-font-family-sans-serif:
    "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    Helvetica, Arial, "Helvetica Neue", sans-serif,
    var(--pico-font-family-emoji);
  --pico-font-family-monospace:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace, var(--pico-font-family-emoji);
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-background-color: var(--brand-white);
  --pico-color: var(--brand-black);
  --pico-muted-color: var(--brand-gray-600);
  --pico-muted-border-color: var(--brand-gray-200);
  --pico-h1-color: var(--brand-black);
  --pico-h2-color: var(--brand-black);
  --pico-h3-color: var(--brand-black);
  --pico-h4-color: var(--brand-black);
  --pico-h5-color: var(--brand-black);
  --pico-h6-color: var(--brand-black);
  --pico-primary: var(--brand-black);
  --pico-primary-background: var(--brand-black);
  --pico-primary-border: var(--brand-black);
  --pico-primary-underline: rgb(0 0 0 / 0.45);
  --pico-primary-hover: var(--brand-black);
  --pico-primary-hover-background: var(--brand-color-yellow);
  --pico-primary-hover-border: var(--brand-color-yellow);
  --pico-primary-hover-underline: var(--brand-black);
  --pico-primary-focus: rgb(0 0 0 / 0.2);
  --pico-primary-inverse: var(--brand-white);
  --pico-secondary: var(--brand-black);
  --pico-secondary-background: var(--brand-black);
  --pico-secondary-border: var(--brand-black);
  --pico-secondary-hover: var(--brand-black);
  --pico-secondary-hover-background: var(--brand-color-yellow);
  --pico-secondary-hover-border: var(--brand-color-yellow);
  --pico-secondary-focus: rgb(0 0 0 / 0.16);
  --pico-secondary-inverse: var(--brand-white);
  --pico-contrast: var(--brand-black);
  --pico-contrast-background: var(--brand-black);
  --pico-contrast-border: var(--brand-black);
  --pico-contrast-hover: var(--brand-black);
  --pico-contrast-hover-background: var(--brand-color-yellow);
  --pico-contrast-hover-border: var(--brand-color-yellow);
  --pico-contrast-inverse: var(--brand-white);
  --pico-card-background-color: var(--brand-white);
  --pico-card-sectioning-background-color: var(--brand-gray-100);
  --pico-card-border-color: var(--brand-gray-200);
  --pico-form-element-background-color: var(--brand-white);
  --pico-form-element-selected-background-color: var(--brand-gray-200);
  --pico-form-element-border-color: var(--brand-gray-400);
  --pico-form-element-color: var(--brand-black);
  --pico-form-element-placeholder-color: var(--brand-gray-500);
  --pico-form-element-active-background-color: var(--brand-white);
  --pico-code-background-color: var(--brand-gray-100);
  --pico-code-color: var(--brand-gray-800);
  --pico-mark-background-color: var(--brand-color-yellow);
  --pico-mark-color: var(--brand-black);
  --pico-table-border-color: var(--brand-gray-200);
  --pico-dropdown-background-color: var(--brand-white);
  --pico-dropdown-border-color: var(--brand-gray-200);
  --pico-dropdown-hover-background-color: var(--brand-gray-100);
  --pico-progress-background-color: var(--brand-gray-200);
  --pico-progress-color: var(--brand-black);
  --theme-paper-background-color: var(--brand-white);
  --theme-paper-border-color: var(--brand-gray-200);
  --theme-paper-shadow: none;
  --theme-footer-background-color: var(--brand-black);
  --theme-footer-border-color: var(--brand-black);
}

:where(a[href]:not([role="button"])) {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

:where(a[href]:not([role="button"])):is(:hover, :focus-visible) {
  color: var(--brand-color-teal);
  text-decoration-color: currentcolor;
}

button,
input:is([type="submit"], [type="button"], [type="reset"]),
[role="button"] {
  border-radius: 999rem;
}

button,
input:is([type="submit"], [type="button"], [type="reset"]),
[role="button"] {
  border-color: var(--brand-black);
  background: var(--brand-black);
  color: var(--brand-white);
}

button:not([disabled]):is(:hover, :focus-visible),
input:is([type="submit"], [type="button"], [type="reset"]):not([disabled]):is(
    :hover,
    :focus-visible
  ),
[role="button"]:not([aria-disabled="true"]):is(:hover, :focus-visible) {
  border-color: var(--brand-color-yellow);
  background: var(--brand-color-yellow);
  color: var(--brand-black);
}

code,
kbd,
pre,
samp {
  font-size: var(--theme-font-size-mono);
}

h1 {
  --pico-font-size: clamp(2.75rem, 6vw, 5rem);
  --pico-font-weight: 800;
  font-family: var(--theme-font-family-display);
  line-height: 1.05;
}

h2 {
  --pico-font-size: clamp(1.8rem, 3vw, 2.5rem);
  --pico-typography-spacing-top: calc(var(--pico-spacing) * 3);
  font-family: var(--theme-font-family-serif);
  font-weight: 700;
}

h3 {
  --pico-font-size: 1.35rem;
  --pico-font-weight: 600;
  font-family: var(--pico-font-family-sans-serif);
  font-weight: 600;
}

h4 {
  --pico-font-size: 1.15rem;
  --pico-font-weight: 600;
}