/* Design tokens. Every colour, size and duration the page uses is named here. */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0b0a0a;
  --bg-veil: rgba(8, 7, 7, 0.55);
  --card: rgba(22, 21, 22, 0.72);
  --card-bar: rgba(255, 255, 255, 0.07);
  --card-edge: rgba(255, 255, 255, 0.08);
  --panel: rgba(36, 40, 52, 0.55);
  --panel-edge: rgba(255, 255, 255, 0.06);
  --field: rgba(255, 255, 255, 0.075);
  --field-hover: rgba(255, 255, 255, 0.11);
  --field-focus: rgba(255, 255, 255, 0.14);
  --chip: rgba(255, 255, 255, 0.09);
  --chip-hover: rgba(255, 255, 255, 0.15);

  /* Ink */
  --ink: #f4f2ef;
  --ink-2: rgba(244, 242, 239, 0.72);
  --ink-3: rgba(244, 242, 239, 0.46);
  --ink-4: rgba(244, 242, 239, 0.26);

  /* Accent: the selection blue from the design; swap here for the estate green (#2f9169). */
  --accent: #4d7fd6;
  --accent-strong: #3c69bf;
  --accent-ink: #ffffff;
  --accent-soft: rgba(77, 127, 214, 0.22);
  --accent-ring: rgba(77, 127, 214, 0.55);

  /* Semantic */
  --ok: #3ba874;
  --ok-soft: rgba(59, 168, 116, 0.18);
  --danger: #e0655d;
  --danger-soft: rgba(224, 101, 93, 0.16);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-xs: 0.6875rem;   /* 11 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-md: 0.9375rem;   /* 15 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: clamp(1.75rem, 2.4vw, 2.25rem);
  --tracking-caps: 0.22em;
  --tracking-wide: 0.42em;

  /* Shape and space */
  --r-card: 22px;
  --r-panel: 18px;
  --r-field: 999px;
  --r-btn: 14px;
  --gutter: 16px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 40px;
  --card-max: 700px;
  --wordmark-w: clamp(200px, 20vw, 420px);
  --font-display: "Raleway", "Inter", system-ui, sans-serif;
  --tagline-span: 1.65; /* tagline width as a multiple of the wordmark width, from the design */
  --day-size: 32px;

  /* Motion */
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --shadow-card: 0 30px 80px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-btn: 0 8px 24px rgba(77, 127, 214, 0.35);
}

@media (prefers-contrast: more) {
  :root {
    --card: rgba(16, 15, 16, 0.94);
    --ink-2: rgba(244, 242, 239, 0.86);
    --ink-3: rgba(244, 242, 239, 0.66);
    --card-edge: rgba(255, 255, 255, 0.18);
  }
}