/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
:root {
  --rose: #fff0f3;
  --lavender: #f4e9e9;
  --papaya: #ffefd3;
  --purple: #271531;
  --night: #101116;
  --seasalt: #f9f7f9;
  --post_it__size: 120pt;
  --ink: var(--purple);
  --font: "Host Grotesk", sans-serif;
  --font-title: "Caveat Brush", cursive;
  --red: color-mix(in srgb, var(--ink) 50%, red);
  --ink-10: color-mix(in srgb, var(--ink) 10%, transparent);
  --ink-30: color-mix(in srgb, var(--ink) 30%, transparent);
  --ink-50: color-mix(in srgb, var(--ink) 50%, transparent);
  --ink-70: color-mix(in srgb, var(--ink) 70%, transparent);

  --trash-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E");
}

body {
  font-family: var(--font);
  margin: 0;
}


.handwrite {
  font-family: var(--font-title) !important;
  font-size: xx-large !important;
}

input.ghost {
  appearance: none;
  border: none;
  background: transparent;

  font: inherit;
  color: inherit;

  padding: 0;
  margin: 0;

  outline: none;
  box-shadow: none;

  cursor: text;
}

input.ghost:hover {
  text-decoration: underline;
}

.dragging { opacity: 0.5; }