Workflow-App/Workflow/app/globals.css

/* app/globals.css
 *
 * Airbnb design-system token block (per the active design system
 * contract). Every color, type scale, spacing value, radius, and
 * shadow is bound to var(--*) — NEVER hardcode hex outside this
 * :root block. Tailwind's color config maps utility classes onto
 * these variables.
 *
 * Token provenance: design-systems/airbnb/tokens.css, pasted
 * verbatim per system policy.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* ─── Surface (3 levels) ──────────────────────────────────────── */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-warm: #f7f7f7;

  /* ─── Foreground ramp (4 levels) ──────────────────────────────── */
  --fg: #222222;
  --fg-2: #3f3f3f;
  --muted: #6a6a6a;
  --meta: #929292;

  /* ─── Border (2 levels) ───────────────────────────────────────── */
  --border: #dddddd;
  --border-soft: #ebebeb;

  /* ─── Accent (Rausch coral-pink, single-accent discipline) ────── */
  --accent: #ff385c;
  --accent-on: #ffffff;
  --accent-hover: #e31c5f;
  --accent-active: #e00b41;

  /* ─── Semantic ────────────────────────────────────────────────── */
  --success: #008a05;
  --warn: #c47700;
  --danger: #c13515;

  /* ─── Typography — fonts ──────────────────────────────────────── */
  --font-display:
    "Airbnb Cereal VF", "Airbnb Cereal App", Circular,
    -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
  --font-body:
    "Airbnb Cereal VF", "Airbnb Cereal App", Circular,
    -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco,
    Consolas, monospace;

  /* ─── Typography — type scale ─────────────────────────────────── */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 44px;

  /* ─── Typography — leading & tracking ─────────────────────────── */
  --leading-body: 1.43;
  --leading-tight: 1.2;
  --tracking-display: -0.02em;

  /* ─── Spacing ─────────────────────────────────────────────────── */
  --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 ──────────────────────────────────────────── */
  --section-y-desktop: 64px;
  --section-y-tablet: 48px;
  --section-y-phone: 32px;

  /* ─── Radius ──────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* ─── Elevation ───────────────────────────────────────────────── */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised:
    rgba(0, 0, 0, 0.02) 0 0 0 1px,
    rgba(0, 0, 0, 0.04) 0 2px 6px 0,
    rgba(0, 0, 0, 0.1) 0 4px 8px 0;

  /* ─── Focus ring (Ink Black per DESIGN.md §6) ─────────────────── */
  --focus-ring: 0 0 0 2px var(--fg);

  /* ─── Motion ──────────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ─── Layout ──────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-gutter-desktop: 40px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;
}

/* ─── Dark theme ────────────────────────────────────────────────────
 * Activated by next-themes setting `data-theme="dark"` on <html>.
 * Token-for-token override of :root — same names, tuned values.
 * Slightly warm dark (not pure black) so cards still feel like cards.
 * Accent is softened so the coral-pink doesn't burn on dark; semantic
 * colours are brightened (WCAG-friendly against dark backgrounds).
 * ─────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg: #0e0e0e;
  --surface: #171717;
  --surface-warm: #1f1f1f;

  --fg: #f5f5f5;
  --fg-2: #d4d4d4;
  --muted: #a3a3a3;
  --meta: #737373;

  --border: #2e2e2e;
  --border-soft: #262626;

  --accent: #ff5a7a;
  --accent-on: #ffffff;
  --accent-hover: #ff7a92;
  --accent-active: #ff9aaa;

  --success: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;

  /* Shadow swaps black→white at very low alpha so cards still feel
   * raised. The 1px top hairline stays black to keep the "ink" feel. */
  --elev-raised:
    rgba(255, 255, 255, 0.04) 0 1px 0 0,
    rgba(0, 0, 0, 0.4) 0 4px 12px 0;
}

/* Smooth theme transitions for the chrome that always shows. Component-
 * level Tailwind `transition-colors` handles the rest. Keep the
 * duration short so toggle feels instant. */
html {
  transition: background-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}

/* Form controls need explicit colours — browsers default to light. */
input,
textarea,
select {
  background-color: var(--surface);
  color: var(--fg);
  border-color: var(--border);
}
input::placeholder,
textarea::placeholder {
  color: var(--meta);
}
/* Autofill paints over our background; force the theme colour in both
 * modes so it doesn't break the surface. */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
}

/* ─── Base reset + typography ─────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--motion-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent);
  color: var(--accent-on);
}

/* Container helpers (consistent with --container-max + per-device gutter) */
.container-x {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter-phone);
}
@media (min-width: 800px) {
  .container-x {
    padding-inline: var(--container-gutter-tablet);
  }
}
@media (min-width: 1128px) {
  .container-x {
    padding-inline: var(--container-gutter-desktop);
  }
}

/* Section vertical rhythm — desktop down to phone */
.section-y {
  padding-block: var(--section-y-phone);
}
@media (min-width: 800px) {
  .section-y { padding-block: var(--section-y-tablet); }
}
@media (min-width: 1128px) {
  .section-y { padding-block: var(--section-y-desktop); }
}

/* Print styles — hide nav, footer, back button */
@media print {
  nav, footer, .no-print { display: none !important; }
  body { background: white !important; color: black !important; }
  .bg-surface { background: white !important; border-color: #ccc !important; }
  .bg-surface-warm { background: #f9f9f9 !important; }
  .container-x { max-width: 100% !important; padding: 0 !important; }
  a { color: inherit !important; text-decoration: none !important; }
  button { display: none !important; }
}