/*
 * 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 {
  --color-bg: #f5f3f0;
  --color-surface: #ffffff;
  --color-surface-alt: #edebe7;
  --color-text: #2a2730;
  --color-text-muted: #75727e;
  --color-text-subtle: #adaab2;
  --color-accent: #d97757;
  --color-accent-hover: #c0663e;
  --color-accent-tint: rgba(217, 119, 87, 0.08);
  --color-destroy: #c25050;

  --gradient-accent: linear-gradient(135deg, #d97757 0%, #c97b6e 100%);
  --gradient-display: linear-gradient(135deg, #d97757 0%, #9d86b8 100%);
  --gradient-soft: linear-gradient(135deg, #edebe7 0%, #e2e0dc 100%);

  --shadow-card:
    0 0 0 1px rgba(42, 39, 48, 0.03),
    0 0.2em 1.2em -0.4em rgba(42, 39, 48, 0.1),
    0 0.4em 2em -0.6em rgba(42, 39, 48, 0.12);
  --shadow-lift:
    0 0 0 1px rgba(42, 39, 48, 0.03),
    0 0.3em 1.6em -0.4em rgba(42, 39, 48, 0.15),
    0 0.6em 2.8em -0.8em rgba(42, 39, 48, 0.18);
  --shadow-modal:
    0 0 0 1px rgba(42, 39, 48, 0.04),
    0 0.5em 2em -0.5em rgba(42, 39, 48, 0.2),
    0 1em 4em -1em rgba(42, 39, 48, 0.25);

  /* The planner's measure, in two numbers because they do different jobs.
     max is how wide the stack is allowed to get on a large screen; min is the
     width its columns are sized to fill, and so the point below which it starts
     scrolling sideways rather than shrinking further. Read by the stack, the
     sticky header row and the rail in the page header — they must resolve to
     the same tracks or the columns drift apart. */
  --planner-max-width: 120ch;
  --planner-min-width: 100ch;

  --space-xs: 0.35em;
  --space-sm: 0.65em;
  --space-md: 1em;
  --space-lg: 1.75em;
  --space-xl: 3em;
  --space-2xl: 4.5em;

  /* The colour and sticker chips in a form row. One number so they cannot
     drift apart, and in rem because both live inside buttons, which take the
     UA's font rather than the page's. */
  --chip-size: 1.25rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 2.5em;

  --color-col-blue: #5b8def;
  --color-col-green: #4caf6f;
  --color-col-red: #e8705a;
  --color-col-purple: #9b6dd1;
  /* Kept for columns created under older palettes; no longer offered. */
  --color-col-amber: #e0a040;
  --color-col-rose: #c9679b;
  --color-col-teal: #4db8a8;
}

html {
  background-color: var(--color-bg);
}

/* Text that is there for screen readers only — a control whose visible form is
   a swatch or an icon still needs a name. */
.visually-hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Installed as a PWA there is no browser chrome above the page, so anything
   pinned to the top has to clear the status bar itself. */
@media (display-mode: standalone) {
  .month-menu-wrapper,
  .public,
  .settings-container {
    padding-top: env(safe-area-inset-top);
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

body {
  background-color: var(--color-bg);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 100%;
  line-height: 1.45;
  color: var(--color-text);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}