theme.css

/* ─────────────────────────────────────────────────────────────
   OUR DATES — Y2K handheld device system
   Everything visual is decided here, once. Components consume
   these tokens and the primitives below; they don't invent values.
   ───────────────────────────────────────────────────────────── */

@theme {
  /* Colour ---------------------------------------------------
     ink      structural: every border, every hard shadow, all body text
     paper    the world behind the device
     card     surfaces that hold content
     hot      primary accent — FILLS AND BORDERS ONLY, never text on light
     deep     the accessible sibling of `hot`, for pink text on light
     lav      unscheduled ideas (a wish, not yet a plan)
     aqua     dates already lived — memories
     Contrast: hot (#FF5CA8) on paper (#FFE5F1) is ~2.2:1 and fails WCAG,
     which is exactly why `deep` exists. Pink text always uses `deep`. */
  --color-ink: #1a1033;
  --color-paper: #ffe5f1;
  --color-card: #fffdfe;
  --color-hot: #ff5ca8;
  --color-deep: #b31e67;
  --color-lav: #b8a6ff;
  --color-aqua: #5be0e6;
  /* Called-off dates. Desaturated on purpose: they stay visible as history
     without competing with the dates that are actually happening — but dark
     enough to clear 4.5:1 on card, which the first draft of this colour did not. */
  --color-mute: #6b6480;

  /* Type -----------------------------------------------------
     Pixel faces are unreadable in paragraphs, so the bitmap face is
     rationed: headings, day numbers, buttons. Prose gets a real face. */
  --font-display: 'Pixelify Sans', ui-monospace, monospace;
  --font-body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-util: 'Silkscreen', ui-monospace, monospace;

  /* Motion ---------------------------------------------------
     Pixel art does not interpolate. Nothing here eases smoothly —
     stepped timing is the single most era-accurate detail in the build. */
  --ease-chunk: steps(5, end);
  --ease-snap: steps(3, end);
}

@layer base {
  html {
    /* Stop iOS from silently inflating our carefully sized pixel type. */
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    /* Pixel faces must never be smoothed — antialiasing turns crisp
       bitmap edges into grey mush. */
    -webkit-font-smoothing: none;
    font-smooth: never;
    overscroll-behavior: none;
  }

  /* Body copy is the exception: it is NOT a pixel face, so it does want
     normal rendering. */
  p,
  input,
  textarea,
  .prose {
    -webkit-font-smoothing: antialiased;
  }

  /* Keyboard focus has to survive a design this loud. */
  :focus-visible {
    outline: 3px solid var(--color-ink);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--color-hot);
    color: var(--color-ink);
  }
}

@layer components {
  /* The core primitive: 3px ink border, hard offset shadow, zero blur.
     Every surface in the app is one of these. */
  .pixel-box {
    border: 3px solid var(--color-ink);
    background: var(--color-card);
    box-shadow: 4px 4px 0 var(--color-ink);
  }

  .pixel-box-sm {
    border: 2px solid var(--color-ink);
    background: var(--color-card);
    box-shadow: 2px 2px 0 var(--color-ink);
  }

  /* Buttons physically depress. The shadow collapses as the button
     travels into it, so the whole control keeps the same footprint. */
  .pixel-btn {
    font-family: var(--font-display);
    font-weight: 700;
    border: 3px solid var(--color-ink);
    background: var(--color-card);
    box-shadow: 4px 4px 0 var(--color-ink);
    transition:
      transform 90ms var(--ease-snap),
      box-shadow 90ms var(--ease-snap);
    /* 44px minimum touch target, non-negotiable on mobile. */
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
  }

  .pixel-btn:hover {
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 var(--color-ink);
  }

  .pixel-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--color-ink);
  }

  .pixel-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: 4px 4px 0 var(--color-ink);
  }

  .pixel-btn-primary {
    background: var(--color-hot);
    /* NOT --color-card: white on hot is 2.82:1 and fails AA. Ink clears it
       comfortably and suits the LCD look better. */
    color: var(--color-ink);
  }

  /* THE SIGNATURE — the app is a handheld gadget, not a document.
     `.device` is the moulded shell; `.screen` is the recessed display
     behind it, lit slightly and inset with a reverse shadow so the
     bezel reads as physically raised above it. */
  .device {
    border: 3px solid var(--color-ink);
    background: var(--color-hot);
    box-shadow: 6px 6px 0 var(--color-ink);
  }

  .screen {
    border: 3px solid var(--color-ink);
    background: var(--color-card);
    box-shadow: inset 3px 3px 0 rgb(26 16 51 / 0.14);
  }

  /* Inputs read as recessed slots cut into the case — the inverse of the
     raised button, so the two never get visually confused. */
  .pixel-input {
    font-family: var(--font-body);
    /* Never below 16px. iOS Safari zooms the whole page when you focus a
       smaller field, and it doesn't zoom back out afterwards. */
    font-size: 1rem;
    border: 3px solid var(--color-ink);
    background: var(--color-card);
    box-shadow: inset 3px 3px 0 rgb(26 16 51 / 0.12);
    min-height: 44px;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--color-ink);
  }

  .pixel-input::placeholder {
    color: rgb(26 16 51 / 0.6);
  }

  .pixel-input:focus {
    outline: 3px solid var(--color-hot);
    outline-offset: 0;
  }

  /* The layout reaches under the notch and the home indicator (viewport-fit=
     cover), so anything you actually touch has to be pushed back inside the
     safe area. `max()` keeps the normal padding on devices without insets. */
  .safe-frame {
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  /* For a bar already pinned to the bottom edge: only the inset, no extra. */
  .safe-bottom {
    padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
  }

  /* A bottom sheet on phones, a centred panel on desktop.
     Built on <dialog> so focus trapping, Escape-to-close and inertness of the
     page behind it are the browser's job rather than ours. */
  .sheet {
    border: 3px solid var(--color-ink);
    background: var(--color-card);
    padding: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88svh;
    margin: auto auto 0 auto; /* pinned to the bottom edge = thumb reach */
    box-shadow: 0 -4px 0 var(--color-ink);
  }

  .sheet::backdrop {
    background: rgb(26 16 51 / 0.55);
  }

  .sheet[open] {
    animation: sheet-up 180ms var(--ease-chunk);
  }

  @keyframes sheet-up {
    from {
      transform: translateY(24px);
    }
  }

  @media (min-width: 640px) {
    .sheet {
      max-width: 28rem;
      margin: auto;
      box-shadow: 6px 6px 0 var(--color-ink);
    }
  }

  /* Tiny all-caps bitmap labels — the device's printed legends. */
  .legend {
    font-family: var(--font-util);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* Today's cell. A marching dashed border, stepped so it ticks rather
     than glides — the one piece of ambient motion in the app. */
  .marquee-today {
    background-image: repeating-linear-gradient(
      90deg,
      var(--color-ink) 0 6px,
      transparent 6px 12px
    );
    background-size: 24px 3px;
    background-repeat: repeat-x;
    background-position: 0 0;
    animation: marquee 900ms var(--ease-chunk) infinite;
  }

  @keyframes marquee {
    to {
      background-position: 24px 0;
    }
  }

  /* The boot sequence: the single orchestrated motion moment. Content
     pops in stepped and staggered, like a device waking up. */
  .boot {
    animation: boot-in 240ms var(--ease-chunk) both;
  }

  @keyframes boot-in {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .beat {
    animation: beat 1.1s var(--ease-snap) infinite;
  }

  @keyframes beat {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.14);
    }
  }
}

/* A loud design owes people an exit. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .marquee-today {
    animation: none;
  }
}