/*
 * Reset
 */

*,
*::before,
*::after {
  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;
}

input[type="password"],
input[type="text"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  color: inherit;
}

button {
  color: inherit;
}

ul {
  margin: 0.5em;
}

a {
  color: inherit;
  text-decoration: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0.5em 0;
  text-wrap: balance;
}

/*
 * Theme
 */

@font-face {
  font-family: "Sofia";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Sofia-Regular.ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

:root {
  /* TOKENS */
  --font-cursive: var(--font-title); /* TODO: refactor */

  --primary-hue: var(--brand-hue);

  --white: oklch(100% 0 0);

  --surface-20: oklch(100% calc(0.02 * var(--intensity)) var(--primary-hue) / 0.2);
  --surface-30: oklch(100% calc(0.03 * var(--intensity)) var(--primary-hue) / 0.3);
  --surface-40: oklch(100% calc(0.04 * var(--intensity)) var(--primary-hue) / 0.4);
  --surface-50: oklch(100% calc(0.05 * var(--intensity)) var(--primary-hue) / 0.5);
  --surface-70: oklch(100% calc(0.07 * var(--intensity)) var(--primary-hue) / 0.7);
  --surface-80: oklch(100% calc(0.08 * var(--intensity)) var(--primary-hue) / 0.8);
  --surface: oklch(100% calc(0.1 * var(--intensity)) var(--primary-hue));

  --content: oklch(25% calc(0.05 * var(--intensity)) var(--primary-hue));
  --content-subtle: oklch(60% calc(0.05 * var(--intensity)) var(--primary-hue));
  --content-subtle-40: oklch(60% calc(0.05 * var(--intensity)) var(--primary-hue) / 0.4);

  --line: var(--content-subtle);
  --line-dark: oklch(40% calc(0.05 * var(--intensity)) var(--primary-hue));

  --dark-transclucent-green: oklch(38% calc(0.06 * var(--intensity)) var(--brand-hue) / 0.5);
  --middle-green: oklch(50% calc(0.12 * var(--intensity)) var(--brand-hue));
  --bg-green: oklch(90% calc(0.23 * var(--intensity)) var(--brand-hue));
  --green-gray: oklch(90% calc(0.03 * var(--intensity)) var(--brand-hue) / 0.8);

  --shadow-color: 50% calc(0.12 * var(--intensity)) var(--brand-hue);
  /* https://www.joshwcomeau.com/shadow-palette/ */
  --shadow-medium: 0.2px 0.4px 0.6px oklch(var(--shadow-color) / 0.05),
    0.7px 1.2px 1.8px -0.4px oklch(var(--shadow-color) / 0.06),
    1.4px 2.3px 3.4px -0.7px oklch(var(--shadow-color) / 0.08),
    2.5px 4.2px 6.2px -1.1px oklch(var(--shadow-color) / 0.09),
    4.6px 7.7px 11.4px -1.5px oklch(var(--shadow-color) / 0.1);

  --shadow-inset: 0px 0px 0.3px oklch(var(--shadow-color) / 0.38) inset,
    0px 0px 0.9px -0.9px oklch(var(--shadow-color) / 0.36) inset,
    0px 0px 2.5px -1.8px oklch(var(--shadow-color) / 0.35) inset,
    0px 0px 6.3px -2.7px oklch(var(--shadow-color) / 0.34) inset;
}

/*
 * Global styles
 */

:root {
  --font-standard: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;

  --transition-time: 300ms;

  font-family: var(--font-standard);
  color: var(--content);

  margin: 0;
  min-height: 100vh;

  /* iOS notches */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@media screen and (max-width: 800px) {
  body {
    margin-top: 0.5rem;
    min-height: 100vh;
  }
}

/* Button */

button,
.button-like {
  margin: 0;
  padding: 0.5rem;
  display: inline-block;
  border: 1px solid var(--middle-green);
  border-radius: var(--radius);
  background-color: transparent;
  text-align: center;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1.2em;
  transition:
    box-shadow var(--transition-time),
    background-color var(--transition-time),
    transform var(--transition-time);
}

@media (hover: hover) {
  /* Don't apply those styles to touch devices */

  button:hover,
  .button-like:hover {
    box-shadow: var(--shadow-medium);
    background-color: var(--surface-30);
    transform: scale(1.02);
  }

  button:focus,
  .button-like:focus {
    outline: none;
    box-shadow: var(--shadow-medium);
    background-color: var(--surface-50);
    transform: scale(1.02);
  }

  button:active,
  button.active,
  .button-like:active,
  .button-like.active {
    box-shadow: var(--shadow-medium);
    background-color: var(--surface-80);
    transform: scale(1.03);
  }
}

/* Editable */

[contenteditable],
.editable {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;

  padding: 0.5rem;

  transition:
    opacity 300ms,
    box-shadow 300ms,
    background-color 300ms;
}

[contenteditable]:hover:not(:focus-within):not(:disabled),
[contenteditable]:focus-within:not(:disabled),
.editable:hover:not(:focus-within):not(:disabled),
.editable:focus-within:not(:disabled) {
  background-color: var(--surface-30);
  box-shadow: var(--shadow-inset);
}

[contenteditable]:focus-within:not(:disabled),
[contenteditable]:focus:not(:disabled),
.editable:focus-within:not(:disabled),
.editable:focus:not(:disabled) {
  background-color: var(--surface-50);
}

[contenteditable]:empty::before,
.editable::placeholder {
  color: var(--content-subtle-40);
}

[contenteditable]:empty::before,
.editable:empty::before {
  content: attr(placeholder);
}

[contenteditable]:empty:focus::before,
.editable:empty:focus::before {
  content: "";
}

[contenteditable]:disabled,
.editable:disabled {
  filter: blur(1px);
}