# Template: PREMIUM

Audience: AI coding agents. Design language for the "premium feel" — exact values and recipes. Universal rules live in `../SKILL.md` and always apply. Project laws (`md-ui-developer`) always win. Every raw value below enters the codebase ONLY as a token in `src/styles/tokens.css`.

## Mood (calibrates every judgment call)

Quiet confidence. Expensive materials, restrained decoration. The app never shouts; it's tactile, grounded, physical. One moment of delight per flow — earned, not sprinkled. Think flagship banking/travel app, not casino. When in doubt: remove, mute, slow down.

## Surface + depth recipes

Elevation tokens (add to tokens.css, replace current near-invisible shadows at usage sites):

```css
--shadow-raised:   0 1px 2px rgb(16 24 40/.06), 0 4px 12px rgb(16 24 40/.06);   /* cards at rest */
--shadow-floating: 0 2px 4px rgb(16 24 40/.07), 0 12px 32px rgb(16 24 40/.10);  /* hover, popover, sticky bars */
--shadow-overlay:  0 4px 8px rgb(16 24 40/.08), 0 24px 64px rgb(16 24 40/.16);  /* dialogs, drawers */
--border-hairline: rgb(16 24 40/.08);        /* replaces opaque neutral-200 borders on surfaces */
--highlight-top:   inset 0 1px 0 rgb(255 255 255/.15);  /* tactile top-light on filled controls */
```

- Card at rest: `--shadow-raised` + `--border-hairline`. On hover (pointer devices): `--shadow-floating` + `translateY(-2px)`, 200ms. No border color change on hover.
- Note shadow color = `rgb(16 24 40 / a)` (ink-navy), NOT pure black — premium shadows are cool, never sooty.
- Glass system (existing `--glass-*` tokens): reserve for nav bars + hero overlays only. Glass card in a scrolling feed = reject.

## Gradient discipline

Exactly THREE gradients exist in this language:

```css
--gradient-action: linear-gradient(180deg, var(--color-brand-primary-600), var(--color-brand-primary-700)); /* primary buttons only */
--gradient-scrim:  linear-gradient(180deg, rgb(10 15 35/0) 40%, rgb(10 15 35/.55) 100%);                    /* text-over-image scrims only */
--gradient-foil:   linear-gradient(105deg, rgb(255 255 255/0) 30%, rgb(255 255 255/var(--shimmer-alpha, .22)) 50%, rgb(255 255 255/0) 70%); /* one-shot foil sweep band only (signature moment #2) */
```

Primary button = `--gradient-action` + `--highlight-top` + `--shadow-raised`; pressed = remove highlight + `scale(.98)`. `--gradient-foil` is a motion band, not a surface fill — one-shot sweep on discount badges/savings figures only, NEVER a static background, NEVER on loading UI. DO NOT add gradients to cards, backgrounds, text, or icons.

## Motion feel

- Easing: `--ease-emphasized` for entrances/spatial moves; plain ease-out for micro-feedback. NO bounce/overshoot anywhere except the single celebratory moment (purchase success) — premium restraint.
- Signature timing: local 200ms, page/shared-element 320ms, celebratory ≤900ms total.
- Hover lifts, press sinks: hover `translateY(-2px)` (only inside `@media (hover: hover)`), press `scale(.98)` at 120ms. Both, everywhere interactive.

## Typography voice

- Display (page titles, prices in hero): weight 700, tracking `-0.02em`, line-height tight. Heebo carries Hebrew warmth — don't fake-bold it past 700 except the wordmark.
- Body: weight 400, default tracking. Muted metadata: same size, muted color — NOT smaller+lighter+spaced (triple-muting kills legibility).
- Prices: the discounted price is the hero — display-size, 700, tabular. Original price: body-size, 400, strikethrough, muted. Never let the two compete.

## Color voice

- White/near-white surfaces dominate; brand blue appears ONLY on interactive elements and the single focal accent per screen.
- Savings/discount = the one place warm color is allowed (existing danger/warm ramp for urgency, brand for savings) — per SKILL.md, with meaning only.
- Empty states and illustrations: duotone (neutral + brand-100/200 tint). Never full-color clipart.

## Signature moments (the wow layer)

Premium spends its delight budget on exactly these, implemented per `Docs/ui-overhaul/` specs:
1. Shared-element deal-card → detail morph (spatial continuity — the flagship).
2. Foil shimmer on discount badges (once per view, slow, subtle).
3. Ambient dominant-color glow behind deal hero.
4. Choreographed purchase-success sequence (the ONE bounce allowed).
5. Scroll-linked card entrances (progressive enhancement).
6. Gyro/pointer tilt on the voucher QR card.
7. Countdown urgency morph (amber breathing < 1h).
8. Branded liquid pull-to-refresh.
9. Elevated public command palette.

Everything NOT on this list stays still and quiet. Adding an unlisted effect = breaking the language.

## Reject list (premium-specific)

```
// reject: bounce easing outside purchase success
// reject: glass surfaces in scrolling content
// reject: gradient anywhere except --gradient-action / --gradient-scrim / --gradient-foil
// reject: pure-black shadows
// reject: hover lift without @media (hover: hover) guard
// reject: more than one delight moment firing in a single viewport
// reject: decorative icons in body copy
```