/** * autowire — token additions * * tokens.css mirrors the upstream Yatovi design system verbatim and must not * be edited. Anything the design system does not yet name lives here, using * the same conventions: --color-* for the raw ramp, --fg-/--bg-/--border-* * for semantics, --component-property for component tokens. * * Load order: tokens.css → tokens-app.css → base.css → components.css → .css * * SHARED FILE — a byte-identical copy lives in the autowire-account repo. * Edit it here and run ./sync-design-system.sh from there; ./scripts-check.sh * fails on a hand-edited copy. See css/README.md. */ :root { /* ── STATUS RAMP ────────────────────────────────────────────────────── The design system has no success/warning/danger/info colours; the only status colours that existed were hardcoded hexes in the marketing site's .form-status rule. Those exact pairs are preserved here as tokens so the two codebases cannot drift. Every soft/ink pair clears 4.5:1. */ --color-success: #4C7A0F; --color-success-soft: #EEF8DD; /* the site's on-brand yellow-green, not a stock green */ --color-success-ink: #33500A; --color-warning: #E08A00; --color-warning-soft: #FFF4D6; --color-warning-ink: #7A5200; --color-danger: #C0392B; --color-danger-soft: #FDECEA; --color-danger-ink: #8C2016; --color-info: var(--color-ios-blue); --color-info-soft: #E8F1FF; --color-info-ink: #0A4B9E; --fg-success: var(--color-success-ink); --bg-success-soft: var(--color-success-soft); --fg-warning: var(--color-warning-ink); --bg-warning-soft: var(--color-warning-soft); --fg-danger: var(--color-danger-ink); --bg-danger-soft: var(--color-danger-soft); --fg-info: var(--color-info-ink); --bg-info-soft: var(--color-info-soft); --fg-neutral: var(--color-gray-850); --bg-neutral-soft: var(--color-gray-300); --border-success: var(--color-success); --border-warning: var(--color-warning); --border-danger: var(--color-danger); --border-info: var(--color-info); /* ── STATUS BADGES ──────────────────────────────────────────────────── The four badge tones every subscription state maps onto. Colour never carries meaning alone — the badge always has text too. */ --status-ok-bg: var(--color-brand); --status-ok-fg: var(--color-black); --status-neutral-bg: var(--color-gray-300); --status-neutral-fg: var(--color-gray-850); --status-off-bg: var(--color-dark); --status-off-fg: var(--color-white); --status-warn-bg: var(--color-warning-soft); --status-warn-fg: var(--color-warning-ink); /* ── ON-DARK SEMANTICS ──────────────────────────────────────────────── --fg-on-dark exists; the muted step did not. gray-700 on --color-dark is 3.46:1 and fails, so both muted roles resolve to gray-600 (7.8:1). */ --fg-on-dark-muted: var(--color-gray-600); --fg-on-dark-faint: var(--color-gray-600); --border-on-dark: rgba(255, 255, 255, 0.22); /* ── ACCESSIBLE TEXT ────────────────────────────────────────────────── --fg-secondary (#777) is 4.48:1 on white and misses AA below 18px; --fg-label (#858585) is 3.75:1. Anything smaller than 18px uses these. */ --fg-secondary-strong: var(--color-gray-800); /* 5.49:1 */ --fg-label-strong: var(--color-gray-800); /* ── WEB TYPE SCALE ─────────────────────────────────────────────────── The token scale in tokens.css is the mobile-app scale (h1 = 28px). The web pages run 40–76px, and the eyebrow letter-spacing (0.08em) has no token at all (--ls-wide is 0.01em). */ --text-hero: clamp(40px, 6vw, 68px); --text-h-page: clamp(30px, 4vw, 44px); --text-h-section: clamp(26px, 3vw, 36px); --text-h-sub: clamp(20px, 2.2vw, 24px); --text-h-card: 19px; --text-body-web: 17px; --text-eyebrow: 14px; --text-bignum: clamp(40px, 8vw, 52px); --lh-display: 1.1; /* display type is set tighter than --lh-snug */ --ls-eyebrow: 0.08em; /* ── LAYOUT RHYTHM ──────────────────────────────────────────────────── The marketing site's section padding was inline and non-responsive, so a 360px phone still paid 88px top and bottom. These fluid values replace it. --section-py, --section-py-compact and --text-h-section are the marketing scale. A denser surface turns them down in one place rather than redefining .section-inner — see the SURFACE DENSITY block in account.css. */ --wrap-max: 1180px; --wrap-pad: 32px; --wrap-pad-sm: 20px; --measure-prose: 800px; /* legal documents: a readable line length */ --header-h: 76px; --section-py: clamp(48px, 7vw, 88px); --section-py-compact: clamp(40px, 5vw, 64px); --section-py-band: clamp(36px, 4.5vw, 56px); --card-padding-web: 24px; --card-gap: var(--space-2); /* ── BUTTONS ────────────────────────────────────────────────────────── The system has exactly two button heights — 55px (page CTA) and 44px (nav/compact) — but only ever named the first one. */ --btn-h-md: 55px; --btn-px-md: 32px; --btn-h-sm: 44px; --btn-px-sm: 24px; --btn-secondary-bg-hover: var(--color-gray-200); /* ── INPUTS ─────────────────────────────────────────────────────────── --input-h is 68px, an app value that is far too tall for a web form. */ --input-h-web: 52px; --input-border-focus: var(--color-black); --input-border-invalid: var(--color-danger); --input-bg-disabled: var(--color-gray-100); /* ── BADGE / STATUS CHIP ────────────────────────────────────────────── */ --badge-h: 26px; --badge-px: 12px; --badge-fs: 13px; --badge-fw: var(--fw-medium); /* ── DEFINITION LIST (label ↔ value rows) ───────────────────────────── */ --dl-label-col: 220px; --dl-row-py: var(--space-3); --dl-row-gap: var(--space-4); --dl-label-fs: var(--text-body-s); --dl-label-fg: var(--fg-label-strong); --dl-value-fs: var(--text-body-m); --dl-value-fg: var(--fg-primary); /* ── DATA TABLE (the legal pages' term/definition tables) ───────────── */ --table-head-fg: var(--fg-secondary-strong); --table-head-fs: var(--text-mono-xs); --table-row-border: 1px solid var(--border-default); --table-cell-py: var(--space-3); --table-cell-px: var(--space-4); /* ── METER (Kontingent) ─────────────────────────────────────────────── */ --meter-h: 10px; --meter-track-bg: var(--color-gray-300); --meter-fill: var(--color-dark); /* NOT brand: 1.18:1 on white */ --meter-fill-spent: var(--color-gray-500); --meter-fill-warn: var(--color-warning); /* ── BANNER / INLINE MESSAGE ────────────────────────────────────────── */ --banner-radius: var(--radius-input); /* 12px, matches .form-status upstream */ --banner-py: 14px; --banner-px: 18px; /* ── OVERLAY / DIALOG ───────────────────────────────────────────────── */ --dialog-max-w: 560px; --dialog-radius: var(--radius-card); --dialog-pad: 28px; --backdrop: rgba(0, 0, 0, 0.55); /* ── FOCUS / MOTION / STATE ─────────────────────────────────────────── These were hardcoded literals in the upstream stylesheet. */ --focus-ring: 3px solid var(--color-black); --focus-ring-on-dark: 3px solid var(--color-brand); --focus-ring-offset: 2px; --transition-fast: 120ms ease; --transition-base: 200ms ease; --opacity-disabled: 0.6; --bg-skeleton: var(--color-gray-300); }