@import "common.css";

/* THEMES */

:root {
  --site-max-inline-size: var(--container-11);
  --font-family-mono: "IBM Plex Mono", monospace;
}

.frame {
  display: none;
}

.paragraph {
  background: var(--color-surface-mid);
}

[data-theme="default"] {
  --font-family-heading: futura-pt, sans-serif;
  --heading-letter-spacing: -0.035ch;
  font-family: var(--font-sans-system);
  --border-radius-2: 0.25rem;
  --border-form-input: 1px solid var(--color-outline);
  --border-radius-form-input: var(--border-radius-2);

  --color-surface-lowest: light-dark(
    var(--color-light-surface-lowest),
    var(--color-dark-surface-lowest)
  );
  --color-surface-mid: light-dark(
    var(--color-light-surface-mid),
    var(--color-dark-surface-mid)
  );
  --color-surface-highest: light-dark(
    var(--color-light-surface-highest),
    var(--color-dark-surface-highest)
  );
  --color-on-surface: light-dark(
    var(--color-light-on-surface),
    var(--color-dark-on-surface)
  );
  --color-on-surface-variant: light-dark(
    var(--color-light-on-surface-variant),
    var(--color-dark-on-surface-variant)
  );
  --color-outline: light-dark(
    var(--color-light-outline),
    var(--color-dark-outline)
  );
  --color-outline-variant: light-dark(
    var(--color-light-outline-variant),
    var(--color-dark-outline-variant)
  );
  --color-primary: light-dark(
    var(--color-light-primary),
    var(--color-dark-primary)
  );
  --color-form-input: var(--color-on-surface);
  --color-form-input-background: var(--color-surface-lowest);
}

[data-theme="default"] .default-image {
  display: block;
}

[data-theme="monster-mash"] {
  --font-family-heading: "cheddar-gothic-serif", sans-serif;
  --font-family-body: "Source Serif 4", serif;
  --line-height-fine: 1.15;
  --heading-letter-spacing: 0;
  --button-letter-spacing: 0.05ch;
  --border-radius-1: 0;
  --border-radius-2: 0;
  --border-radius-3: 0;
  --border-radius-4: 0;
  --outline-width: 4px;
  --border-form-input: 1px solid var(--color-outline);
  --border-radius-form-input: var(--border-radius-2);

  font-family: var(--font-family-body);

  --color-green: #5fb369;
  --color-pink: #d566cd;
  --color-purple: #ae26a4;
  --color-light-black: #0e0405;
  --color-dark-black: #141214;
  --color-offwhite: #d6dbc7;
  --color-white: #e5eee1;

  --color-surface-lowest: light-dark(
    var(--color-white),
    var(--color-dark-black)
  );
  --color-surface-mid: light-dark(var(--color-offwhite), #33332a);
  --color-surface-highest: light-dark(#c7c6a5, #525241);
  --color-on-surface: light-dark(var(--color-light-black), var(--color-white));
  --color-on-surface-variant: light-dark(#312c31, var(--color-offwhite));
  --color-outline: light-dark(var(--color-light-black), var(--color-white));
  --color-outline-variant: light-dark(
    var(--color-light-black),
    var(--color-white)
  );
  --color-primary: var(--color-green);
  --color-on-primary: var(--color-dark-black);
  --color-dark-primary-container: #244828;
  --color-secondary: var(--color-pink);
  --color-tertiary: var(--color-purple);
  --outline: var(--outline-width) solid var(--color-outline);
  --outline-variant: var(--outline-width) solid var(--color-outline-variant);
  --color-form-input: var(--color-on-surface);
  --color-form-input-background: var(--color-surface-lowest);
}

[data-theme="monster-mash"] .monster-mash-image {
  display: block;
  border: var(--outline);
}

[data-theme="monster-mash"] .benefit-card {
  border: var(--outline);
}

[data-theme="monster-mash"].browser-content .card {
  border: var(--outline);
}

[data-theme="monster-mash"] .paragraph {
  background: light-dark(#4d1148, #3d0c39);
}

[data-theme="western"] {
  --font-family-heading: "kiln-sans-spiked", sans-serif;
  --font-family-body: "brandon-grotesque", sans-serif;
  --border-radius-1: 0;
  --border-radius-2: 0;
  --border-radius-3: 0;
  --border-radius-4: 0;
  --border-form-input: 1px solid var(--color-outline);
  --border-radius-form-input: var(--border-radius-2);

  font-family: var(--font-family-body);

  --color-orange: #e45c09;
  --color-bronze: #896124;
  --color-blue: #1e4556;
  --color-black: #0e0405;
  --color-brown: #432d25;
  --color-light-grey: #b5b0aa;
  --color-mid-grey: #685b45;

  --color-surface-lowest: light-dark(#f0e9df, #1f1508);
  --color-surface-mid: light-dark(#ded2c1, #3d2a0f);
  --color-surface-highest: light-dark(#ccbea9, #5c3e14);
  --color-on-surface: light-dark(var(--color-black), #f0e9df);
  --color-on-surface-variant: light-dark(var(--color-brown), #ccbea9);
  --color-outline: var(--color-bronze);
  --color-outline-variant: var(--color-bronze);
  --color-primary: var(--color-orange);
  --color-on-primary: var(--color-black);
  --color-dark-primary-container: var(--color-brown);
  --color-secondary: #3997bf;
  --color-tertiary: #d96d46;
  --color-form-input: var(--color-on-surface);
  --color-form-input-background: var(--color-surface-lowest);
  --western-shadow: 0.6rem 0.6rem 0px 0px
    light-dark(var(--color-black), var(--color-mid-grey));
  --grid-paper-background: light-dark(#c4a170, #5c3e14);
}

[data-theme="western"] .western-image {
  display: block;
  box-shadow: var(--western-shadow);
}

[data-theme="western"] .benefit-card {
  box-shadow: var(--western-shadow);
}

[data-theme="western"] .paragraph {
  background: var(--color-blue);
}

/* STYLES */

.home-page {
  --region-space: var(--space-8-9);
  font-size: var(--step-4);
}

.home-page h1 {
  font-size: clamp(3.3592rem, 2.8078rem + 2.4507vw, 4.7684rem);
}

/* TODO: should this be a utility class? */
.flex-column {
  display: flex;
  flex-direction: column;
}

.main-cta {
  font-family: var(--font-family-heading);
  /* TODO: is there a better approach than a magic number? */
  --grid-auto-target-width: 12.5rem;
  justify-content: center;
}

.the-stakes,
.guide-split {
  --uneven-split-fixed-width: var(--container-3);
}

.guide-split {
  /* TODO: should this be a utility class? Seems handy with uneven-split */
  flex-direction: row-reverse;
}

.bento-box {
  color: var(--color-on-surface-variant);
  background: var(--bento-box-background, var(--color-surface-highest));
  padding: var(--space-6-7);
  border-radius: var(--border-radius-4);
}

.bento-box h2 {
  color: var(--color-on-surface);
}

.the-stakes .bento-box {
  color-scheme: dark;
  --bento-box-background: var(--color-surface-lowest);
}

.grid-paper {
  position: relative;
  padding: var(--space-5-6);
}

.grid-paper svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  width: 100%;
  height: 100%;
  stroke: var(--color-outline);
  background: var(--grid-paper-background, var(--color-surface-highest));
  border-radius: var(--border-radius-4);
}

.benefit {
  display: flex;
  flex-direction: column;
  gap: var(--space-5-6);
}

.benefit > *:first-child {
  max-inline-size: var(--container-6);
}

.benefit:not(.benefit-fluid) > *:last-child {
  align-self: end;
  max-inline-size: 100%;
}

.benefit-card {
  --card-background: var(--color-surface-lowest);
  box-shadow: var(--shadow-4);
}

.benefit-code {
  color-scheme: dark;
  font-size: var(--step-3);
  color: var(--color-on-surface-variant);
}

.benefit-code pre,
.benefit-code code {
  background-color: var(--color-surface-lowest);
}

.benefit-code pre {
  box-shadow: var(--shadow-5);
  border-radius: var(--border-radius-3);
}

.benefit-code .tag {
  color: var(--color-tertiary, #b477cfff);
}

.benefit-code .key {
  color: var(--color-secondary, #d07277ff);
}

.benefit-code .value {
  color: var(--color-primary);
}

.benefit-code .text {
  color: var(--color-on-surface);
}

/* TODO: combine this with the version in the docs */
.benefit-layout-demo {
  --switcher-size: var(--container-4);

  position: relative;
  overflow: auto;
  resize: horizontal;
  color-scheme: dark;
  padding: var(--space-4-5);
  background-color: var(--color-surface-lowest);
  border-radius: var(--border-radius-3);
  inline-size: 100%;
  min-inline-size: 12rem;
  min-block-size: var(--container-1);
}

.benefit-layout-demo li {
  background: var(--color-primary-container);
  border: 4px solid var(--color-primary);
  border-radius: var(--border-radius-2);
  min-block-size: 4rem;
}

.benefit-layout-demo li:not(.uneven-split-main-width) {
  min-inline-size: 6rem;
}

@media (width > 56rem) {
  .benefit-layout-demo {
    padding-block-end: var(--space-6);
  }

  .benefit-layout-demo::after {
    position: absolute;
    content: "Resize me!";
    color-scheme: light;
    bottom: 0.3rem;
    right: 1rem;
    padding: var(--space-1);
    color: var(--color-on-surface);
    background-color: var(--color-surface-mid);
    border-radius: var(--border-radius-1);
    font-size: var(--step-1);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
  }
}

.background-noise {
  position: relative;
}

.background-noise::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url(/images/noise.webp);
  background-repeat: repeat;
  background-size: 180px;
  opacity: 4%;
}

.background-noise > * {
  position: relative;
}

.marketing-paragraph {
  background: var(--color-surface-lowest);
  padding: var(--space-6-7);
  border-radius: var(--border-radius-4);
  --max-content-inline-size: 50ch;
}

.footer {
  color-scheme: dark;
  color: var(--color-on-surface);
  background: var(--color-surface-lowest);
  padding-block: var(--space-7-8);
}

.footer-links {
  padding-block-end: var(--space-2-3);
  border-block-end: var(--outline);
}

.footer-links a {
  font-family: var(--font-family-mono);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.browser-window {
  --browser-border-radius: 0.5rem;
  --browser-window-border: 1px solid var(--color-outline-variant);

  font-size: var(--step-2);
  border: var(--browser-window-border);
  border-radius: var(--browser-border-radius);
  background: var(--color-surface-lowest);
  box-shadow: var(--shadow-4);
}

.browser-head {
  display: flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.5625em;
  border-block-end: var(--browser-window-border);
}

.browser-head .circle {
  display: inline-block;
  height: 0.75em;
  width: 0.75em;
  flex-shrink: 0;
  border-radius: var(--border-radius-full);
  background-color: var(--color-surface-highest);
}

.browser-head .url {
  font-family: var(--font-sans-system);
  border-radius: 0.3333em;
  background: var(--color-surface-mid);
  flex-grow: 999;
  font-size: 0.8125em;
  text-align: center;
  padding-block: 0.125em;
  padding-inline: 0.5em;
  margin-inline-start: 2em;
  margin-inline-end: 3em;
}

.browser-main {
  position: relative;
  pointer-events: none;
}

.browser-content {
  font-size: var(--step-2);
  color: var(--color-on-surface);
  background: var(--color-surface-lowest);
  border-radius: 0 0 var(--browser-border-radius) var(--browser-border-radius);
}

.browser-content button {
  display: block;
  inline-size: 100%;
}

.clipped-preview {
  position: absolute;
  inset: 0;
  clip-path: circle(47% at 50% 100%);
}

.clipped-preview-base {
  position: absolute;
  inset: 0;
  clip-path: circle(41% at 84% 2%);
}