workbuddy_skills/open-design/design-systems/resend/tokens.css

/* ─────────────────────────────────────────────────────────────────────────
 * design-systems/resend/tokens.css
 *
 * Structured token bindings for "Resend" — the developer-first email
 * API whose marketing surface treats a pure-black canvas like a
 * gallery wall and lights every container with a single, icy blue-
 * tinted hairline.
 *
 * Brand identity in three sentences:
 *   1. Void-black (#000000) canvas with near-white (#f0f0f0) ink —
 *      theatrical darkness; the page is the stage and content
 *      performs on it without competing chrome.
 *   2. Frost borders (rgba(214, 235, 253, 0.19)) replace gray borders
 *      everywhere — every divider, button, card, and tab is a thin
 *      icy line on the void; depth is by border luminance, not by
 *      blur shadows that cannot cast against pure black.
 *   3. ABC Favorit (geometric sans) for display headings with
 *      aggressive negative tracking, Inter for body and UI, Commit
 *      Mono for code — one accent at a time (here: Resend Orange
 *      #ff801f) so the chromatic moment lands hard against the gray.
 *
 * Brand-specific schema decisions (each one bends a schema convention
 * to match Resend's voice rather than the cross-brand default):
 *
 *   1. `--bg` and `--surface` both bind to `#000000`. DESIGN.md §7 is
 *      explicit: "Don't lighten the background above #000000 — the
 *      pure black void is non-negotiable." Cards on Resend do not
 *      lift via fill; they read by their frost border alone. Setting
 *      `--surface` to the same void as `--bg` honors that rule and
 *      forces every card-like component to express elevation through
 *      `--border` / `--elev-ring`, not through tinted backgrounds.
 *      `--surface-warm` aliases to `--surface` because the brand has
 *      no warm tier — there is no second background color anywhere.
 *
 *   2. `--border` is `rgba(214, 235, 253, 0.19)` — the literal
 *      "frost border" alpha named in DESIGN.md §1 as "the signature"
 *      of the entire system. Binding the slot to the alpha (not a
 *      solid hex) lets `--elev-ring` (`0 0 0 1px var(--border)`)
 *      reproduce the icy line by default, and lets every component
 *      reach the same value via `border: 1px solid var(--border)`.
 *      `--border-soft` drops to `rgba(217, 237, 254, 0.145)` for
 *      inner row separators that should not compete with the
 *      container's outer frost edge.
 *
 *   3. `--fg` is `#f0f0f0`, not `#ffffff`. DESIGN.md §2 names this
 *      the "Near White" — a deliberately softened text tier that
 *      lets pure white (`#ffffff`) stay reserved for the maximum-
 *      emphasis moments DESIGN.md describes as "link highlights"
 *      and the white-pill CTA. The four-level foreground ramp
 *      (`#f0f0f0 → #a1a4a5 → #5c5c5c → #464a4d`) maps directly onto
 *      DESIGN.md §2's documented neutral scale (Near White, Silver,
 *      Mid Gray, Dark Gray) so `--fg-2` and `--meta` are
 *      independently bound rather than aliased.
 *
 *   4. `--accent` is Resend Orange (`#ff801f`, "Orange 10" in
 *      DESIGN.md §2). Resend's product surface uses a multi-color
 *      accent system (orange/green/blue/yellow/red), but the shared
 *      schema slot must pick one — and Orange 10 is the only entry
 *      DESIGN.md prefixes with "primary orange accent". The blue
 *      and green variants live as semantic / inline values in
 *      components.html; promoting any of them to a second accent
 *      slot would require a C-extension, which the brand contract
 *      defers until ≥2 brands need the same name. `--accent-on` is
 *      `#000000` because saturated orange against black reads best
 *      with black labels (DESIGN.md §4 confirms the white-pill
 *      pattern is for `#ffffff` solid backgrounds, not for the
 *      orange accent fill).
 *
 *   5. `--accent-hover` brightens toward white (10%) and
 *      `--accent-active` darkens toward black (12%) — the inverse
 *      of the schema's default mid-luminance pattern. On Resend's
 *      void canvas, a "pressed" state reads as a small recession
 *      into the dark, while a "lifted" hover reads as a luminance
 *      step up. This matches the Linear / dark-system convention
 *      and avoids the schema default's all-darken pattern that
 *      would make the orange disappear into the void on hover.
 *
 *   6. Semantic colors come straight from DESIGN.md §2's multi-
 *      color accent scale — `--success: #11ff99` (Green 4),
 *      `--warn: #ffc53d` (Yellow 9), `--danger: #ff2047` (Red 5).
 *      These are the saturated source values; components that want
 *      the documented "12–42% opacity" tints reach them via
 *      `color-mix(in oklab, var(--success), transparent 80%)` in
 *      situ, keeping the alpha-blend decision at the component
 *      layer rather than in the token slot.
 *
 *   7. Type scale is documented in DESIGN.md §3: 96px display,
 *      56px section, 24px feature title, 20px sub-heading, 18px
 *      body-large, 16px body, 14px caption, 12px small. The schema
 *      has 8 slots; `--text-2xl` is bound to `36px` as the
 *      intermediate that bridges 24px (feature title) to 56px
 *      (section heading) — DESIGN.md does not enumerate this stop,
 *      but a 24 → 56 jump without a mid-tier would force every H2
 *      to either undershoot or overshoot. `--leading-tight: 1.0`
 *      matches the documented Display Hero rhythm; `--leading-body:
 *      1.5` matches the documented Body / Body Large / Feature
 *      Title leading.
 *
 *   8. `--tracking-display` is `-0.05em`, derived from DESIGN.md
 *      §3 Section Heading (`-2.8px at 56px = -0.05em`). ABC Favorit
 *      compresses harder than Domaine Display (`-0.01em` at 96px),
 *      so binding the slot to the ABC Favorit characteristic value
 *      gives every display-tier element the brand's "engineered
 *      masthead" feel. The hero in components.html can opt back
 *      into the gentler Domaine tracking inline if needed.
 *
 *   9. `--font-display` lists ABC Favorit first, with Inter as the
 *      structural fallback. Inter is documented in DESIGN.md §3 as
 *      the body / UI font, but it shares the geometric voice well
 *      enough to carry display weight when ABC Favorit is not
 *      loaded — far better than falling through to a generic system
 *      sans. Domaine Display (the editorial serif hero font) is
 *      deliberately not in the stack: it is a paid Klim Type
 *      Foundry face whose absence would surface as a jarring serif
 *      drop. Heroes that want Domaine layer it in via
 *      `font-family: "Domaine Display", var(--font-display)` at the
 *      component level.
 *
 *  10. Section rhythm is generous: 120px desktop, 80px tablet, 48px
 *      phone. DESIGN.md §5 names "Cinematic black space" with "80–
 *      120px+ vertical spacing between sections" as a defining
 *      property — "the black background IS the whitespace". 120px
 *      desktop sits at the top of that documented range.
 *
 *  11. `--radius-sm` is `4px` (DESIGN.md "Sharp": buttons-ghost,
 *      inputs); `--radius-md` is `8px` (tabs / content blocks);
 *      `--radius-lg` is `16px` (feature cards / images / main
 *      buttons); `--radius-pill` is `9999px` (primary CTAs / tags
 *      / badges). The 24px "Section" radius from DESIGN.md is
 *      component-specific (large panels) and reached inline rather
 *      than via the shared schema.
 *
 *  12. `--elev-raised` layers the documented `rgba(176, 199, 217,
 *      0.145) 0 0 0 1px` ring shadow with the subtle drop from
 *      DESIGN.md §6 Level 2. On pure black, opaque blur shadows
 *      vanish — the ring carries the edge, and the soft drop adds
 *      just enough atmospheric tint to read as "lifted" against
 *      the void. Never strip the ring when overriding this token.
 *
 *  13. `--focus-ring` is a sharp 2px ring at `var(--accent)`, not
 *      the schema's 3px alpha glow. DESIGN.md §6 Level 3 documents
 *      a heavy 8px black focus ring that works in product context
 *      (against non-black surroundings); on this brand fixture the
 *      black canvas would swallow that ring, so we substitute the
 *      orange accent at 2px — sharp, engineered, legible against
 *      both the void and any card surface.
 *
 *  14. `--container-max` caps at `1200px` with generous 32px
 *      desktop gutters — Resend's marketing pages center contained
 *      content in vast dark space, treating the gutter as part of
 *      the gallery margin rather than as edge-bleed.
 *
 * Source contracts:
 *   - Standard token names: design-systems/_schema/tokens.schema.ts
 *   - A2 fallback parity:   design-systems/_schema/defaults.css
 *   - Lint enforcement:     apps/daemon/src/lint-artifact.ts
 *
 * Keep this file additive: never invent token names not also
 * documented in DESIGN.md or the schema. ABC Favorit, Domaine
 * Display, and Commit Mono are paid faces — the stacks list
 * defensible OS fallbacks so artifacts render legibly even when
 * the brand faces are not loaded.
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface (3 levels — schema slot) ─────────────────────────────
   * The void is the canvas. DESIGN.md §7: "Don't lighten the
   * background above #000000 — the pure black void is non-
   * negotiable." `--surface` matches `--bg` because cards on Resend
   * read by their frost border alone, not by a tinted fill.
   * `--surface-warm` aliases to surface — the brand has no second
   * background color anywhere. */
  --bg: #000000;
  --surface: #000000;
  --surface-warm: var(--surface);          /* alias — Resend has no warm tier */

  /* ─── Foreground ramp (4 levels) ──────────────────────────────────
   * Near White → Silver → Mid Gray → Dark Gray, the documented
   * neutral scale from DESIGN.md §2. `#f0f0f0` instead of `#ffffff`
   * matters — pure white is reserved for the white-pill CTA and link
   * highlights; the softened near-white keeps body type calm against
   * the void. All four tiers are independently bound (not aliased)
   * because DESIGN.md names four distinct neutral roles: primary
   * text, secondary / link-muted, hover / caption, tertiary /
   * quaternary timestamp. */
  --fg: #f0f0f0;                           /* Near White — primary text, button labels */
  --fg-2: #a1a4a5;                         /* Silver — secondary text, muted links */
  --muted: #5c5c5c;                        /* Mid Gray — captions, hover, subtle emphasis */
  --meta: #464a4d;                         /* Dark Gray — tertiary text, timestamps */

  /* ─── Border (2 levels) ──────────────────────────────────────────
   * Frost-as-border is THE signature: `rgba(214, 235, 253, 0.19)`
   * at 1px replaces every gray border in the system. Binding
   * `--border` to the alpha (not a solid hex) lets `--elev-ring`
   * reproduce the icy line by default, and lets
   * `border: 1px solid var(--border)` paint the same value when a
   * real CSS border is structurally required (e.g. the bottom edge
   * of the sticky nav per DESIGN.md §4). `--border-soft` drops to
   * `0.145` alpha for inner row separators that must not compete
   * with the container's outer frost edge. */
  --border: rgba(214, 235, 253, 0.19);     /* signature frost border alpha */
  --border-soft: rgba(217, 237, 254, 0.145); /* inner row separator — lighter frost */

  /* ─── Accent ─────────────────────────────────────────────────────
   * Resend Orange (Orange 10 from DESIGN.md §2). Hard cap of ≤2
   * visible uses per screen — DESIGN.md §7 forbids cross-mixing
   * accent colors within a single component. The multi-color
   * scale (green/blue/yellow/red) lives at the semantic / inline
   * layer; only the orange slot rides on `--accent`.
   *
   * `--accent-on` is BLACK, not white — saturated #ff801f against
   * black reads cleanest with black labels (the white-pill CTA in
   * DESIGN.md §4 uses #ffffff fill with #000000 text, not the
   * orange accent). Hover brightens 10% toward white, active
   * darkens 12% toward black — the inverse of the schema's all-
   * darken default, matching the dark-theme convention where
   * "pressed" reads as recession into the void. */
  --accent: #ff801f;                       /* Resend Orange — primary chromatic accent */
  --accent-on: #000000;                    /* black label on saturated orange fill */
  --accent-hover: color-mix(in oklab, var(--accent), white 10%);
  --accent-active: color-mix(in oklab, var(--accent), black 12%);

  /* ─── Semantic ───────────────────────────────────────────────────
   * Saturated source values from DESIGN.md §2's multi-color accent
   * scale. Components reach the documented 12–42% opacity tints
   * via `color-mix(in oklab, var(--success), transparent 80%)` in
   * situ, keeping the alpha-blend decision at the component layer. */
  --success: #11ff99;                      /* Green 4 — emerald success indicator */
  --warn: #ffc53d;                         /* Yellow 9 — warm gold warning */
  --danger: #ff2047;                       /* Red 5 — error / destructive */

  /* ─── Typography ─────────────────────────────────────────────────
   * Three-font editorial hierarchy from DESIGN.md §3. ABC Favorit
   * carries display; Inter carries body and UI; Commit Mono
   * carries code and technical labels. Domaine Display (the
   * editorial serif hero face) is intentionally not in the
   * `--font-display` stack — it is a paid Klim Type Foundry face
   * whose absence would surface as a jarring serif drop. Heroes
   * that want Domaine layer it in via `font-family: "Domaine
   * Display", var(--font-display)` at the component level. */
  --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
   * 12 / 14 / 16 / 18 / 20 / 24 / 56 / 96 are all documented; the
   * 36px `--text-2xl` is the synthesized intermediate that bridges
   * 24px feature-title to 56px section-heading. Without it, every
   * H2 would have to undershoot at 24 or overshoot at 56 and the
   * type rhythm would jump. */
  --text-xs: 12px;                         /* Small — tags, meta, fine print */
  --text-sm: 14px;                         /* Caption, button, nav link */
  --text-base: 16px;                       /* Body — standard reading */
  --text-lg: 20px;                         /* Sub-heading — ABC Favorit */
  --text-xl: 24px;                         /* Feature Title — Inter weight 500 */
  --text-2xl: 36px;                        /* Synthesized H2 — bridges 24 → 56 */
  --text-3xl: 56px;                        /* Section Heading — ABC Favorit */
  --text-4xl: 96px;                        /* Display Hero — Domaine / ABC Favorit */

  /* Leading + tracking.
   * --leading-body 1.5: DESIGN.md body / feature-title / body-large.
   * --leading-tight 1.0: DESIGN.md Display Hero (96px).
   * --tracking-display -0.05em: ABC Favorit Section Heading
   *   (-2.8px / 56px). Harder compression than Domaine's -0.01em;
   *   binding the slot to the ABC Favorit value gives display tiers
   *   the brand's "engineered masthead" feel. */
  --leading-body: 1.5;
  --leading-tight: 1.0;
  --tracking-display: -0.05em;

  /* ─── Spacing ────────────────────────────────────────────────────
   * Standard 4px-grid base scale. DESIGN.md §5 also documents 5px,
   * 6px, 7px, 10px, 30px, 40px micro-tiers — those are too fine to
   * belong in the shared schema and are inlined per-component when
   * needed (button padding `5px 12px`, etc.). The 4/8/12/16/20/
   * 24/32/48 tier covers the structural rhythm. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Section rhythm — DESIGN.md §5: "Cinematic black space" with
   * 80–120px+ vertical padding between sections. 120px desktop sits
   * at the top of the documented range, dropping to 80px tablet
   * (still generous) and 48px phone (the documented mobile floor). */
  --section-y-desktop: 120px;
  --section-y-tablet: 80px;
  --section-y-phone: 48px;

  /* ─── Radius ─────────────────────────────────────────────────────
   * DESIGN.md §5 radius scale: 4 / 6 / 8 / 10 / 12 / 16 / 24 / 9999.
   * We bind the four schema tiers to: 4 (sharp — ghost button,
   * inputs), 8 (standard — tabs, content), 16 (large — feature
   * cards, images, main buttons), 9999 (pill — primary CTAs, tags,
   * badges). The 24px "Section" radius is component-specific (large
   * panels) and reached inline. */
  --radius-sm: 4px;                        /* Sharp — ghost button, input */
  --radius-md: 8px;                        /* Standard — tab, content block */
  --radius-lg: 16px;                       /* Large — feature card, image, main button */
  --radius-pill: 9999px;                   /* Pill — primary CTA, tag, badge */

  /* ─── Elevation (3 levels) ───────────────────────────────────────
   * Resend barely uses shadows — DESIGN.md §6: "On a pure black
   * background, traditional shadows are invisible — you can't cast
   * a shadow into the void. Instead, Resend creates depth through
   * its signature frost borders."
   *
   *   --elev-flat    no shadow (page background, text blocks)
   *   --elev-ring    the signature frost hairline (most surfaces)
   *   --elev-raised  ring + subtle drop for true "lifted" feel
   *
   * `--elev-raised` layers the documented `rgba(176, 199, 217, 0.145)
   * 0 0 0 1px` ring with the §6 Level 2 subtle drop. Never strip
   * the ring when overriding — it is the edge mechanism that lets
   * a card read against the void at all. */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised:
    0 0 0 1px rgba(176, 199, 217, 0.145),
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 1px 2px -1px rgba(0, 0, 0, 0.4);

  /* ─── Focus ring ─────────────────────────────────────────────────
   * Sharp 2px ring at `var(--accent)`, NOT the schema's 3px alpha
   * glow. DESIGN.md §6 documents an 8px black ring that works in
   * product context (against non-black surroundings); on this
   * brand fixture the black canvas would swallow that ring, so we
   * substitute the orange accent at 2px — sharp, engineered,
   * legible against both the void and any card surface. */
  --focus-ring: 0 0 0 2px var(--accent);

  /* ─── Motion ─────────────────────────────────────────────────────
   * Two durations + one easing curve. Resend's micro-states are
   * quick and unobtrusive — pill buttons crossfade to white glass,
   * frost borders intensify on focus, no choreographed entrances. */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ─── Layout ─────────────────────────────────────────────────────
   * 1200px max content width — DESIGN.md §5 "Centered content with
   * generous max-width". Gutters stay wide on desktop (32px) so
   * the gallery margin around the void canvas reads as intentional
   * framing; mobile narrows to 16px to preserve readable measure. */
  --container-max: 1200px;
  --container-gutter-desktop: 32px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;
}