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`. */
  /* `ink` did three jobs that only coincide in light mode: every border,
     every hard shadow, and all body text. On a dark ground those diverge —
     text must go light while shadows stay dark — so they are three tokens.
     Here all three are the same value, which is what makes the split a
     no-op on this palette. */
  --color-line: #1a1033;
  --color-text: #1a1033;
  --color-shadow: #1a1033;
  /* Text drawn ON a saturated fill. In this palette it coincides with
     `text`; on a dark theme it must not, because body text goes light
     while the fills stay bright. */
  --color-on-fill: #1a1033;
  /* The moulded case, and what is printed on it. A token rather than reusing
     `hot`, so a theme can change the shell without the title going with it —
     and so the contrast gate can actually check the pairing. */
  --color-bezel: #ff5ca8;
  --color-on-bezel: #1a1033;
  /* The hairline between flat agenda rows and between overflow-menu items.
     Not a border in the structural sense — it separates repeated items rather
     than enclosing a surface, which is why it is a fifth of the ink rather
     than the full `line`. Its own token because a dark theme needs it to go
     light, and it was hardcoded in DateCard where no theme could reach it. */
  --color-rule: rgb(26 16 51 / 0.2);
  --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 Variable', ui-monospace, monospace;
  --font-body: 'Space Grotesk Variable', 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);
}

/* The default palette needs an explicit selector as well as :root, so a
   swatch can scope itself with data-theme="pink" and preview that palette
   while a different one is applied. Custom properties inherit, so a block
   that declares nothing would simply inherit the active theme instead.

   These repeat the @theme values, which is a drift risk — themes.test.ts
   asserts the two stay identical. */
[data-theme='pink'] {
  --color-line: #1a1033;
  --color-text: #1a1033;
  --color-shadow: #1a1033;
  --color-on-fill: #1a1033;
  --color-bezel: #ff5ca8;
  --color-on-bezel: #1a1033;
  --color-rule: rgb(26 16 51 / 0.2);
  --color-paper: #ffe5f1;
  --color-card: #fffdfe;
  --color-hot: #ff5ca8;
  --color-deep: #b31e67;
  --color-lav: #b8a6ff;
  --color-aqua: #5be0e6;
  --color-mute: #6b6480;
}

@layer base {
  html {
    /* Stop iOS from silently inflating our carefully sized pixel type. */
    -webkit-text-size-adjust: 100%;
    /* Scrollbars, form controls and the overscroll gutter are drawn by the
       browser, not by us, and they follow this rather than our tokens. Left at
       the default, a dark theme gets a white scrollbar down its side. Themes
       override it. */
    color-scheme: light;
    /* Thumb, then track. Token-driven, so it follows whatever theme is on. */
    scrollbar-color: var(--color-line) var(--color-card);
  }

  body {
    background-color: var(--color-paper);
    color: var(--color-text);
    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 {
    /* `text`, not `line`. On a dark theme `line` is deliberately a muted
       mid-tone so borders do not glow, which is exactly wrong for a focus
       ring. `text` is the highest-contrast foreground in every palette, and
       it is the same #1A1033 as `line` on the default one, so nothing moves
       there. */
    outline: 3px solid var(--color-text);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--color-hot);
    /* On a saturated fill, so it takes the on-fill role. Migrating this to
       `text` was wrong: on a dark theme body text is bone and the fill is
       still bright, which is the same light-on-light failure the gate caught
       on the buttons and badges. */
    color: var(--color-on-fill);
  }
}

@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-line);
    background: var(--color-card);
    box-shadow: 4px 4px 0 var(--color-shadow);
  }

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

  /* 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-line);
    background: var(--color-card);
    /* Set, not inherited. A button inside a coloured banner (the update and
       install pills) otherwise took the banner's on-fill text — near-black —
       onto a card that is dark purple on Halloween, and read at 1.2:1. */
    color: var(--color-text);
    box-shadow: 4px 4px 0 var(--color-shadow);
    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;
  }

  /* Only where a pointer can actually hover. On a phone a tap leaves :hover
     stuck on until you touch something else, so every button you had just
     pressed stayed sunk a pixel with a thinner shadow. Tailwind's `hover:`
     variant guards this already; a hand-written rule has to do it itself. */
  @media (hover: hover) {
    .pixel-btn:hover {
      transform: translate(1px, 1px);
      box-shadow: 3px 3px 0 var(--color-shadow);
    }
  }

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

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

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

  /* 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-line);
    background: var(--color-bezel);
    box-shadow: 6px 6px 0 var(--color-shadow);
  }

  .screen {
    border: 3px solid var(--color-line);
    background: var(--color-card);
    box-shadow: inset 3px 3px 0 color-mix(in srgb, var(--color-shadow) 14%, transparent);
  }

  /* 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-line);
    background: var(--color-card);
    box-shadow: inset 3px 3px 0 color-mix(in srgb, var(--color-shadow) 12%, transparent);
    min-height: 44px;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--color-text);
  }

  .pixel-input::placeholder {
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
  }

  .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));
  }

  /* The update / install nudges. At the screen's bottom edge they respect the
     home indicator; above the tab bar (`data-dock`, set by Home) the bar has
     already done that, so they sit just over it with no extra padding. */
  .nudges {
    bottom: 0.75rem;
    padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
  }

  :root[data-dock] .nudges {
    bottom: calc(var(--dock-h) + 0.5rem);
    padding-bottom: 0;
  }

  /* 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-line);
    background: var(--color-card);
    /* The UA stylesheet gives <dialog> `color: CanvasText`, which resets the
       inherited colour rather than letting body's through. On the light
       palette CanvasText is black and passes for ink, so this went unnoticed;
       on a dark theme every sheet rendered black text on a dark card at
       1.24:1. Set it explicitly. */
    color: var(--color-text);
    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-shadow);
  }

  .sheet::backdrop {
    background: color-mix(in srgb, var(--color-shadow) 55%, transparent);
  }

  .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-shadow);
    }
  }

  /* The season greeting: a full-screen stage with a `.sheet` card inside it,
     rather than a sheet itself. Anything inside a dialog paints above the
     dialog's own background, so the only way to put the bat sky BEHIND the
     card is to make the dialog transparent and give the card its own box. */
  .season {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    overflow: hidden;
  }

  .season[open] {
    display: flex;
    flex-direction: column;
  }

  .season::backdrop {
    background: color-mix(in srgb, var(--color-shadow) 88%, transparent);
  }

  .season-card {
    animation: sheet-up 180ms var(--ease-chunk);
  }

  /* The greeting arrives in beats rather than as one slab: ornament, the
     headline, the story, what changed, then the way out. It shows once a
     year, which is the only kind of moment a stagger is worth its wait. */
  /* `backwards`, not `both`: hold the start state through the delay, then let
     go. A forwards fill pins `transform: none` over everything, and the
     "let's go" button stopped sinking when pressed. */
  .rise {
    animation: boot-in 240ms var(--ease-chunk) backwards;
  }
  .rise-1 {
    animation-delay: 100ms;
  }
  .rise-2 {
    animation-delay: 200ms;
  }
  .rise-3 {
    animation-delay: 300ms;
  }
  .rise-4 {
    animation-delay: 400ms;
  }

  .bat-sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .bat-moon {
    position: absolute;
    top: max(1.5rem, env(safe-area-inset-top));
    right: 1.5rem;
  }

  /* Duration and delay come inline, per bat. The path hops in steps like a
     handheld sprite and dips between waypoints so the flight isn't a ruler. */
  .bat {
    position: absolute;
    left: 0;
    animation-name: bat-fly;
    animation-timing-function: steps(5);
    animation-iteration-count: infinite;
  }

  .bat-reverse {
    animation-direction: reverse;
  }

  /* Further away: smaller (set inline) and dimmer. */
  .bat-far {
    opacity: 0.55;
  }

  @keyframes bat-fly {
    0% {
      transform: translate(-48px, 0);
    }
    25% {
      transform: translate(25vw, -14px);
    }
    50% {
      transform: translate(50vw, 8px);
    }
    75% {
      transform: translate(75vw, -10px);
    }
    100% {
      transform: translate(calc(100vw + 48px), 0);
    }
  }

  /* Two frames, one visible at a time. The rate varies per bat (`--flap`)
     so the flock doesn't flap in lockstep. */
  .bat-frame-a {
    animation: flap-a var(--flap, 320ms) steps(1) infinite;
  }

  .bat-frame-b {
    opacity: 0;
    animation: flap-b var(--flap, 320ms) steps(1) infinite;
  }

  @keyframes flap-a {
    50% {
      opacity: 0;
    }
  }

  @keyframes flap-b {
    50% {
      opacity: 1;
    }
  }

  /* 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-text) 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.
     `.boot` is the case arriving; `.boot-late` is what sits on the screen,
     one beat behind it. The gap is the whole point — without it the shell
     and its contents arrive as one flat object, and a handheld that wakes
     all at once doesn't read as a device powering on. Used once per load,
     which is the only place a stagger earns its cost. */
  .boot {
    animation: boot-in 240ms var(--ease-chunk) both;
  }

  .boot-late {
    animation: boot-in 240ms var(--ease-chunk) both;
    animation-delay: 100ms;
  }

  @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);
    }
  }
}

/* ── Halloween ──────────────────────────────────────────────────────────
   Dark. `line` and `text` go bone so they read on a dark ground, and the hard
   offset shadow becomes pumpkin — on near-black a darker shadow does nothing,
   so it glows instead of receding.

   `deep` is LIGHTER than `hot` here, which is not a mistake. "Hot is fills
   only because it fails as text" is a light-mode fact: on a dark ground the
   vivid accent passes comfortably and a dark sibling is what fails. The token
   keeps its ROLE — the sibling that is safe as text — and inverts its
   lightness to do so. */
[data-theme='halloween'] {
  color-scheme: dark;
  --color-paper: #0b0616;
  --color-card: #2a1a47;
  /* Borders are a mid purple, NOT the text colour. `line` is every 3px border
     in the app, so setting it to bone outlined the whole device in near-white
     and the thing read as a diagram. Splitting line from text is pointless if
     both end up the same value. */
  --color-line: #5b3e8f;
  --color-text: #f2e9dc;
  --color-shadow: #05020c;
  --color-hot: #ff7518;
  --color-deep: #ffa05c;
  --color-lav: #b388ff;
  --color-aqua: #7cfc5a;
  --color-mute: #9a8fb5;
  --color-on-fill: #180d2a;
  --color-bezel: #3a2560;
  --color-on-bezel: #f2e9dc;
  --color-rule: rgb(242 233 220 / 0.22);
}

/* The insets fake a recess by DARKENING the top-left. On a dark surface that
   reads as a bulge — the metaphor inverts — so they lighten here instead. */
/* Three surfaces, not one. The default palette gets away with the screen and
   its content sharing a colour because near-black borders draw every edge;
   with mid-purple borders that collapses into mush, and a calendar cell
   becomes indistinguishable from the grid behind it. So the screen drops to
   the darkest value and the surfaces sitting on it keep `card`. */
[data-theme='halloween'] .screen {
  background: var(--color-paper);
}

[data-theme='halloween'] .screen {
  box-shadow: inset 3px 3px 0 color-mix(in srgb, var(--color-line) 14%, transparent);
}

[data-theme='halloween'] .pixel-input {
  box-shadow: inset 3px 3px 0 color-mix(in srgb, var(--color-line) 12%, transparent);
}

/* 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;
  }

  /* Shortened to one iteration, a bat would finish off-screen and snap back
     to the left edge. Hold them still, scattered across the sky instead. */
  .bat,
  .bat-frame-a,
  .bat-frame-b {
    animation: none !important;
  }

  .bat {
    transform: translateX(var(--bat-rest));
  }

  /* The durations collapse above, but delays don't — without this the
     greeting would sit blank for up to 400ms and then appear all at once. */
  .rise {
    animation-delay: 0s !important;
  }
}