/* ============================================================================ TAPN™ Entry — Token Layer Source of truth: MASTER_DESIGN.md v1.0 (TAPN-master-design-system) Every value below is transcribed from the design document. Nothing here is invented. Where the document is silent, this file is silent — see the OPEN GAPS block at the foot of the file. This file defines tokens ONLY. It styles nothing and changes no component. Loading it alone is a no-op on rendering. Load order: first, before any other stylesheet. Naming: every token is --tapn-* prefixed. The nine legacy prefixes already in the codebase (--e360-, --ev-, --cx-, --pv-, --ac-, --primary, --teal, --font-, --tapn-) are NOT touched here. Aliasing them onto these tokens is the first act of the migration, not part of this file, because aliasing changes rendering. ========================================================================= */ :root { /* ========================================================================== COLOR — MASTER_DESIGN.md § colors ====================================================================== */ /* Brand & accent -------------------------------------------------------- */ --tapn-primary: #0fbbb3; /* fills: CTA, mark, active step */ --tapn-on-primary: #ffffff; --tapn-primary-hover: #3fcfc8; /* lightens rather than darkens */ --tapn-primary-focus: #0da49d; --tapn-primary-pressed: #0a8a84; --tapn-primary-soft: #e6f7f6; /* active step chip, badges, banner */ --tapn-primary-tint: #f2fbfa; /* large wash areas */ --tapn-primary-ink: #0b8f89; /* teal AS TEXT on white — never fill */ /* Text ------------------------------------------------------------------ */ --tapn-ink: #0e1b26; /* headlines, card titles, nav, labels */ --tapn-ink-muted: #4a5c68; /* body copy, descriptions, subhead */ --tapn-ink-subtle: #7b8b95; /* inactive step labels, meta */ --tapn-ink-tertiary: #a6b3ba; /* footer body, disabled */ /* Surface --------------------------------------------------------------- */ --tapn-canvas: #fbfdfd; /* default ground */ --tapn-canvas-wash: #f2faf9; /* teal gradient origin, top-left */ --tapn-surface-1: #ffffff; /* cards, nav, secondary buttons */ --tapn-surface-2: #f7fafa; /* inactive step chips, inset areas */ --tapn-surface-3: #eef4f4; /* inactive step numerals */ --tapn-hairline: #e6ecec; /* used sparingly — shadow separates */ --tapn-hairline-strong: #d4dedd; /* Materials ------------------------------------------------------------- */ --tapn-scrim: rgba(14, 27, 38, 0.45); --tapn-material-chrome: rgba(255, 255, 255, 0.72); --tapn-material-edge: rgba(255, 255, 255, 0.60); /* Inverse — the footer, and per the doc the only dark surface ------------ */ --tapn-inverse-canvas: #0e1b26; --tapn-inverse-surface-1: #17262f; --tapn-inverse-ink: #fbfdfd; /* Semantic — reserve for true status surfaces --------------------------- */ --tapn-semantic-success: #1f9d55; --tapn-semantic-warning: #c98a12; --tapn-semantic-danger: #d24b4b; /* ========================================================================== TYPOGRAPHY — MASTER_DESIGN.md § typography Sizes are rem so that layout scales with the user's base font size. Tracking is size-specific by design: large text tightens, body sits at 0, small text opens. A single global letter-spacing is wrong somewhere. ====================================================================== */ /* Families -------------------------------------------------------------- */ --tapn-font-sans: Nunito, "Nunito Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --tapn-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Weights — 400 / 600 / 700 / 800 only. Nunito has no 900. --------------- */ --tapn-weight-regular: 400; --tapn-weight-medium: 600; --tapn-weight-bold: 700; --tapn-weight-display: 800; /* display-xl — hero headline, split navy/teal */ --tapn-display-xl-size: 5.5rem; --tapn-display-xl-fluid: clamp(2.5rem, 6vw, 5.5rem); --tapn-display-xl-weight: 800; --tapn-display-xl-leading: 1.05; --tapn-display-xl-tracking: -0.028em; /* display-lg — section headlines */ --tapn-display-lg-size: 3.5rem; --tapn-display-lg-fluid: clamp(2rem, 4.5vw, 3.5rem); --tapn-display-lg-weight: 800; --tapn-display-lg-leading: 1.10; --tapn-display-lg-tracking: -0.025em; /* display-md — sub-sections, kiosk welcome type */ --tapn-display-md-size: 2.5rem; --tapn-display-md-weight: 800; --tapn-display-md-leading: 1.15; --tapn-display-md-tracking: -0.02em; /* headline — pricing titles, CTA banner */ --tapn-headline-size: 1.75rem; --tapn-headline-weight: 700; --tapn-headline-leading: 1.20; --tapn-headline-tracking: -0.014em; /* card-title — feature card title */ --tapn-card-title-size: 1.25rem; --tapn-card-title-weight: 700; --tapn-card-title-leading: 1.30; --tapn-card-title-tracking: -0.01em; /* subhead — hero subhead */ --tapn-subhead-size: 1.375rem; --tapn-subhead-weight: 400; --tapn-subhead-leading: 1.50; --tapn-subhead-tracking: -0.005em; /* body-lg — card body, check rows. The system's default body. */ --tapn-body-lg-size: 1.125rem; --tapn-body-lg-weight: 400; --tapn-body-lg-leading: 1.60; --tapn-body-lg-tracking: 0; /* body */ --tapn-body-size: 1rem; --tapn-body-weight: 400; --tapn-body-leading: 1.60; --tapn-body-tracking: 0; /* body-sm — footer, meta */ --tapn-body-sm-size: 0.875rem; --tapn-body-sm-weight: 400; --tapn-body-sm-leading: 1.55; --tapn-body-sm-tracking: 0.005em; /* caption — captions, step numerals */ --tapn-caption-size: 0.75rem; --tapn-caption-weight: 400; --tapn-caption-leading: 1.40; --tapn-caption-tracking: 0.01em; /* nav-link — top-nav links */ --tapn-nav-link-size: 1.0625rem; --tapn-nav-link-weight: 600; --tapn-nav-link-leading: 1.20; --tapn-nav-link-tracking: 0; /* button — section CTAs */ --tapn-button-size: 1.0625rem; --tapn-button-weight: 700; --tapn-button-leading: 1.20; --tapn-button-tracking: 0; /* button-sm — nav buttons */ --tapn-button-sm-size: 0.9375rem; --tapn-button-sm-weight: 700; --tapn-button-sm-leading: 1.20; --tapn-button-sm-tracking: 0; /* eyebrow — uppercase section eyebrow. Always uppercase, teal, +0.15em. */ --tapn-eyebrow-size: 0.8125rem; --tapn-eyebrow-weight: 700; --tapn-eyebrow-leading: 1.30; --tapn-eyebrow-tracking: 0.15em; --tapn-eyebrow-transform: uppercase; /* step-label — process-strip labels */ --tapn-step-label-size: 1.0625rem; --tapn-step-label-weight: 700; --tapn-step-label-leading: 1.20; --tapn-step-label-tracking: 0; /* vibrant-label — text over translucent chrome. Weight bump + tracking. */ --tapn-vibrant-label-size: 0.9375rem; --tapn-vibrant-label-weight: 600; --tapn-vibrant-label-leading: 1.20; --tapn-vibrant-label-tracking: 0.01em; /* mono — code, version IDs */ --tapn-mono-size: 0.8125rem; --tapn-mono-weight: 400; --tapn-mono-leading: 1.50; --tapn-mono-tracking: 0; /* ========================================================================== SHAPE — MASTER_DESIGN.md § rounded Note the deliberate split the doc calls out: marketing CTAs are `pill`; in-product buttons are `md` (14px). `pill` and `full` share a value; the distinction is semantic, so use the one that names your intent. ====================================================================== */ --tapn-radius-xs: 6px; /* small chips, inline tags */ --tapn-radius-sm: 10px; /* icon tiles in kiosk UI */ --tapn-radius-md: 14px; /* form inputs, in-product buttons */ --tapn-radius-lg: 18px; /* step chips, kiosk screen cards */ --tapn-radius-xl: 24px; /* feature, pricing, testimonial cards */ --tapn-radius-xxl: 32px; /* CTA banner, sheets */ --tapn-radius-pill: 9999px; /* marketing CTAs, status badges, nav btns */ --tapn-radius-full: 9999px; /* step numerals, check circles, avatars */ /* ========================================================================== SPACING — MASTER_DESIGN.md § spacing Base unit 4px, expressed in rem so spacing scales with type. ====================================================================== */ --tapn-space-xxs: 0.25rem; --tapn-space-xs: 0.5rem; --tapn-space-sm: 0.75rem; --tapn-space-md: 1rem; --tapn-space-lg: 1.5rem; --tapn-space-xl: 2rem; --tapn-space-xxl: 3rem; --tapn-space-section: 7.5rem; /* 120px between sections */ /* Layout constants stated in prose in § Layout ------------------------- */ --tapn-content-max: 77.5rem; /* ~1240px max content width */ --tapn-gutter: 2rem; /* doc says 2–3rem; low end as the default */ /* ========================================================================== ELEVATION — MASTER_DESIGN.md § shadows Nine shadows, not seven. Wide and low-opacity: 24–80px blur at 5–18% alpha. Never tight or dark — on a near-white ground that reads cheap. Bigger surfaces read as thicker; scale shadow with surface size. ====================================================================== */ --tapn-shadow-card: 0 2px 24px rgba(14, 27, 38, 0.06); --tapn-shadow-card-hover: 0 8px 32px rgba(14, 27, 38, 0.10); --tapn-shadow-card-lifted: 0 16px 48px rgba(14, 27, 38, 0.12); --tapn-shadow-cta: 0 4px 16px rgba(15, 187, 179, 0.24); /* teal glow */ --tapn-shadow-cta-pressed: 0 1px 6px rgba(15, 187, 179, 0.20); --tapn-shadow-button-white: 0 2px 10px rgba(14, 27, 38, 0.06); --tapn-shadow-chrome: 0 1px 24px rgba(14, 27, 38, 0.05); --tapn-shadow-sheet: 0 -8px 48px rgba(14, 27, 38, 0.12); --tapn-shadow-kiosk: 0 32px 80px rgba(14, 27, 38, 0.18); /* Level 7 focus — 3px primary-focus at 40%, 2px offset ----------------- */ --tapn-focus-ring-width: 3px; --tapn-focus-ring-offset: 2px; --tapn-focus-ring-color: rgba(13, 164, 157, 0.40); --tapn-focus-ring: 0 0 0 var(--tapn-focus-ring-offset) var(--tapn-surface-1), 0 0 0 calc(var(--tapn-focus-ring-offset) + var(--tapn-focus-ring-width)) var(--tapn-focus-ring-color); /* ========================================================================== MOTION — MASTER_DESIGN.md § motion Springs are described by bounce + duration (Motion/Framer), which map to Apple's damping + response. bounce 0 == damping 1.0, so damping = 1 - bounce. Both forms are exposed: the *-bounce/*-duration pair for Motion-style APIs, the *-damping/*-response pair for the codebase's own spring engine. Duration is NOT a duration for a spring — settle time emerges from the parameters. The value is `response`. ====================================================================== */ /* spring-default — critically damped. House default, non-gestural. */ --tapn-spring-default-bounce: 0; --tapn-spring-default-duration: 0.35s; --tapn-spring-default-damping: 1.0; --tapn-spring-default-response: 0.35; /* spring-move — repositioning an element. */ --tapn-spring-move-bounce: 0; --tapn-spring-move-duration: 0.4s; --tapn-spring-move-damping: 1.0; --tapn-spring-move-response: 0.4; /* spring-momentum — ONLY after a flick, throw, or drag release. */ --tapn-spring-momentum-bounce: 0.2; --tapn-spring-momentum-duration: 0.4s; --tapn-spring-momentum-damping: 0.8; --tapn-spring-momentum-response: 0.4; /* spring-sheet — drawers and sheets. */ --tapn-spring-sheet-bounce: 0.2; --tapn-spring-sheet-duration: 0.3s; --tapn-spring-sheet-damping: 0.8; --tapn-spring-sheet-response: 0.3; /* spring-rotate */ --tapn-spring-rotate-bounce: 0.2; --tapn-spring-rotate-duration: 0.4s; --tapn-spring-rotate-damping: 0.8; --tapn-spring-rotate-response: 0.4; /* press — fires on pointerdown, never on click. */ --tapn-press-scale: 0.97; --tapn-press-duration: 100ms; --tapn-press-easing: ease-out; /* hover — discrete state change, so a CSS transition is correct here. */ --tapn-hover-duration: 180ms; --tapn-hover-easing: cubic-bezier(0.32, 0.72, 0, 1); /* Standard curves — mirror these on reversible transitions. */ --tapn-ease-out-standard: cubic-bezier(0.32, 0.72, 0, 1); --tapn-ease-in-standard: cubic-bezier(1, 0, 0.68, 0.28); /* Gesture physics — consumed by JS, exposed here as the single source. */ --tapn-deceleration-rate: 0.998; --tapn-rubberband-constant: 0.55; --tapn-gesture-threshold: 10px; /* Reduced-motion equivalent — a gentler substitute, not an absence. */ --tapn-reduced-motion-fade: 200ms ease; /* ========================================================================== COMPONENT GEOMETRY — MASTER_DESIGN.md § components Only the values the document states that are not derivable from the scales above. Colors, type, radii and shadows for these components compose from the tokens already defined and are not duplicated here. The document expresses these paddings in px while § Typography requires rem ("Never express type or section spacing in fixed px"). That is an internal contradiction in the doc — see OPEN GAPS. Converted at 16px base, preserving the stated proportions. ====================================================================== */ --tapn-button-padding-y: 1.125rem; /* 18px */ --tapn-button-padding-x: 2.5rem; /* 40px */ --tapn-button-sm-padding-y: 0.75rem; /* 12px */ --tapn-button-sm-padding-x: 1.625rem; /* 26px */ --tapn-button-tertiary-padding-x: 2rem; /* 32px */ --tapn-feature-card-padding: 2.5rem; /* 40px */ --tapn-pricing-card-padding: 2rem; /* 32px */ --tapn-testimonial-card-padding:2.5rem; /* 40px */ --tapn-kiosk-card-padding: 1.5rem; /* 24px */ --tapn-sheet-padding: 2rem; /* 32px */ --tapn-cta-banner-padding: 4rem; /* 64px */ --tapn-step-chip-padding-y: 1.25rem; /* 20px */ --tapn-step-chip-padding-x: 1.5rem; /* 24px */ --tapn-step-number-size: 1.625rem; /* 26px */ --tapn-input-padding-y: 0.875rem; /* 14px */ --tapn-input-padding-x: 1.125rem; /* 18px */ --tapn-status-badge-padding-y: 0.25rem; /* 4px */ --tapn-status-badge-padding-x: 0.75rem; /* 12px */ --tapn-nav-height: 5.5rem; /* 88px */ --tapn-footer-padding-y: 5rem; /* 80px */ --tapn-footer-padding-x: 2rem; /* 32px */ /* Touch targets — § Responsive Behavior. Hit padding is invisible and extends beyond the visual bounds. */ --tapn-target-desktop: 3.375rem; /* 54px CTA pills at desktop */ --tapn-target-touch: 3rem; /* 48px floor on mobile, inputs */ --tapn-target-chip: 2.75rem; /* 44px step chips */ --tapn-hit-padding: 0.625rem; /* ~10px invisible hit padding */ /* Contrast escape hatch — inert by default. Components may declare `border: var(--tapn-contrast-border)` unconditionally; it resolves to `0 solid transparent` normally and to a real hairline under prefers-contrast: more. Declared here, not only inside the query, so the value always resolves. */ --tapn-contrast-border-width: 0; --tapn-contrast-border: 0 solid transparent; } /* ============================================================================ ACCESSIBILITY — MASTER_DESIGN.md § 13 Three independent signals. These retune tokens only; they style nothing. Because components read these variables, the adaptation propagates without any component needing its own media query. ========================================================================= */ /* Reduced motion means a gentler, non-vestibular equivalent — not the absence of feedback. Springs collapse toward instant, overshoot is dropped entirely, and opacity/color changes that aid comprehension are kept. */ @media (prefers-reduced-motion: reduce) { :root { --tapn-spring-default-duration: 0.001s; --tapn-spring-move-duration: 0.001s; --tapn-spring-momentum-duration: 0.001s; --tapn-spring-sheet-duration: 0.001s; --tapn-spring-rotate-duration: 0.001s; --tapn-spring-default-response: 0.001; --tapn-spring-move-response: 0.001; --tapn-spring-momentum-response: 0.001; --tapn-spring-sheet-response: 0.001; --tapn-spring-rotate-response: 0.001; /* Bounce is earned by a gesture; under reduced motion it is never earned. */ --tapn-spring-momentum-bounce: 0; --tapn-spring-sheet-bounce: 0; --tapn-spring-rotate-bounce: 0; --tapn-spring-momentum-damping: 1.0; --tapn-spring-sheet-damping: 1.0; --tapn-spring-rotate-damping: 1.0; --tapn-hover-duration: 0ms; } } /* Translucent chrome goes solid, blur off. */ @media (prefers-reduced-transparency: reduce) { :root { --tapn-material-chrome: var(--tapn-surface-1); --tapn-material-edge: var(--tapn-surface-1); --tapn-scrim: rgba(14, 27, 38, 0.60); } } /* The one context where TAPN's no-borders rule is suspended: card shadows are replaced with a 1px hairline-strong border, and body text moves from ink-muted to full ink. */ @media (prefers-contrast: more) { :root { --tapn-ink-muted: var(--tapn-ink); --tapn-ink-subtle: #46555f; --tapn-ink-tertiary: #46555f; --tapn-hairline: var(--tapn-hairline-strong); --tapn-shadow-card: none; --tapn-shadow-card-hover: none; --tapn-shadow-card-lifted: none; --tapn-shadow-button-white:none; --tapn-shadow-chrome: none; /* Overrides the inert default declared in the base :root above. */ --tapn-contrast-border-width: 1px; --tapn-contrast-border: 1px solid var(--tapn-hairline-strong); } } /* ============================================================================ OPEN GAPS — values this codebase needs that MASTER_DESIGN.md does not define. Deliberately NOT invented here. Each is listed so the doc can be extended and this file updated, rather than the palette being quietly widened. 1. CATEGORICAL DATA-VIZ PALETTE. event_analytics.php, dashboard_coordinator.php and coordinator_events.php need >=5 mutually distinguishable series colors. The doc defines exactly three non-brand hues (success/warning/danger), which is not enough and is semantically wrong for a chart series. No token defined. 2. `waitlisted` STATUS. event_analytics.php:272 encodes a waitlisted state. The doc's semantic set has no slot for it. No token defined. 3. CUSTOMER / WHITE-LABEL THEMING. hub/index.php:223-224 and hub/admin.php:304-305 inject per-event primary_color and secondary_color from the database. The doc has no concept of a customer-themed surface, no rule for which regions a customer color may occupy, and no contrast floor for a customer-supplied hue. No token defined. 4. DISABLED STATE. No component in the doc specifies a disabled appearance. The codebase has roughly 30. No token defined. 5. ERROR / VALIDATION STYLING. The doc requires inline validation on text-input but specifies only the semantic-danger swatch — no field border, background, or message treatment. No token defined. 6. TOOL-SURFACE TIER. The doc describes marketing and kiosk tiers. hub/admin is a dense internal editor that is neither. Per Q3 it conforms to the standard tokens above; no separate tier is defined. 7. INTERNAL CONTRADICTION — component padding units. § components states paddings in px (e.g. button-primary "18px 40px") while § typography requires rem and forbids fixed px for type and section spacing. Converted to rem above at a 16px base, preserving proportions. 8. SHADOW COUNT. § shadows defines nine shadows. All nine are above. 9. pill AND full ARE THE SAME VALUE. Both are 9999px, so the distinction cannot be enforced mechanically. Both are defined so intent is still expressed at the call site. ========================================================================= */