/* ==========================================================================
Tapin Next — Design Tokens
--------------------------------------------------------------------------
THE single source of truth for every visual decision in the Tapin Next
redesign. Every color, spacing value, type size, radius and shadow used
anywhere in the plugin's UI must reference a variable from this file.
Constraints honoured by this file:
- Zero draw-call cost: no JS, no class toggling. Dark mode is OS-driven
via prefers-color-scheme.
- RTL-first: all positional rules elsewhere must use logical properties
(inline-start/inline-end), so the token names below are direction-neutral.
- Hebrew-first typography: Heebo is primary, Assistant is the fallback,
system-ui is the last resort. See @font-face block.
- Pink stays pink in dark mode. Only neutrals and semantic surfaces shift.
- No @import. No build step. Drop this file into a
before any component CSS and the cascade does the rest.
Inventory resolution: the legacy plugin shipped THREE competing primaries
(#ff00ff magenta, #2a1a5e deep purple, #d946ef fuchsia). This file makes
the call:
- #E91E63 is the brand pink (refined from the harsh #ff00ff)
- #2A1A5E remains the deep brand purple (used in gradients + headings)
- the fuchsia is collapsed into the pink scale (no longer a separate hue)
File order: drop this first, then tapin-components.css, then surface CSS.
========================================================================== */
/* --------------------------------------------------------------------------
Heebo — loaded from Google Fonts.
We declare @font-face here so any stylesheet that loads tokens also gets
the font without needing a tag. The wiring agent may instead choose
to ship a + in for
faster perceived render; in that case this block is harmless (browsers
dedupe identical @font-face sources).
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://fonts.gstatic.com/s/heebo/v26/NGS6v5_NC0k9P9H4TbBzsE7C.woff2') format('woff2');
unicode-range: U+0590-05FF, U+0020-007E;
}
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://fonts.gstatic.com/s/heebo/v26/NGS6v5_NC0k9P9H4TbBzsE7C.woff2') format('woff2');
unicode-range: U+0590-05FF, U+0020-007E;
}
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://fonts.gstatic.com/s/heebo/v26/NGS6v5_NC0k9P9H4TbBzsE7C.woff2') format('woff2');
unicode-range: U+0590-05FF, U+0020-007E;
}
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://fonts.gstatic.com/s/heebo/v26/NGS6v5_NC0k9P9H4TbBzsE7C.woff2') format('woff2');
unicode-range: U+0590-05FF, U+0020-007E;
}
:root {
/* ========================================================================
COLORS — Brand
The pink IS the brand. Everything else supports it.
======================================================================== */
/* Primary pink scale — built around #E91E63, hue-shifted toward warm magenta.
Use --tapin-color-primary as the default "brand pink"; pick lighter/darker
stops only when contrast against a specific background needs it. */
--tapin-color-primary-50: #FFF1F6;
--tapin-color-primary-100: #FFE0EB;
--tapin-color-primary-200: #FFB3CF;
--tapin-color-primary-300: #FF80AE;
--tapin-color-primary-400: #F94F8A;
--tapin-color-primary-500: #E91E63; /* canonical brand pink */
--tapin-color-primary-600: #C81957;
--tapin-color-primary-700: #A0144A;
--tapin-color-primary-800: #780F38;
--tapin-color-primary-900: #500A26;
--tapin-color-primary: var(--tapin-color-primary-500);
--tapin-color-primary-hover: var(--tapin-color-primary-600);
--tapin-color-primary-active: var(--tapin-color-primary-700);
--tapin-color-primary-soft: var(--tapin-color-primary-50);
--tapin-color-on-primary: #FFFFFF;
/* Deep brand purple — kept from legacy SharedCss as the secondary anchor.
Used as the dark end of the signature gradient and for major headings. */
--tapin-color-purple-50: #F3F1FB;
--tapin-color-purple-100: #DDD7F1;
--tapin-color-purple-200: #B5A9E1;
--tapin-color-purple-300: #8C7BD1;
--tapin-color-purple-400: #5B47AC;
--tapin-color-purple-500: #3D2A85;
--tapin-color-purple-600: #2A1A5E; /* legacy --tapin-primary-color */
--tapin-color-purple-700: #20144A;
--tapin-color-purple-800: #170D36;
--tapin-color-purple-900: #0E0822;
--tapin-color-purple: var(--tapin-color-purple-600);
--tapin-color-on-purple: #FFFFFF;
/* Coral — the warm partner pink used in the secondary gradient. Picked so
that pink→coral feels like "energy" and pink→purple feels like "depth". */
--tapin-color-coral-400: #FF8A65;
--tapin-color-coral-500: #FF6B57;
--tapin-color-coral-600: #E0533F;
/* ========================================================================
COLORS — Signature gradients
Used for hero CTAs, the active tab indicator, featured-card borders,
and the brand glow.
======================================================================== */
--tapin-gradient-primary: linear-gradient(135deg, #E91E63 0%, #2A1A5E 100%);
--tapin-gradient-primary-soft: linear-gradient(135deg, #FFB3CF 0%, #B5A9E1 100%);
--tapin-gradient-coral: linear-gradient(135deg, #E91E63 0%, #FF6B57 100%);
--tapin-gradient-purple-deep: linear-gradient(180deg, #3D2A85 0%, #170D36 100%);
--tapin-gradient-sunrise: linear-gradient(135deg, #FF80AE 0%, #FF8A65 50%, #F94F8A 100%);
--tapin-gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #FFF1F6 100%);
/* ========================================================================
COLORS — Neutrals (zinc/slate hybrid, 11 stops 50→950)
Cool-leaning grays. Use these for every surface, border and text color
that is NOT semantic. Avoid #fff and #000 hard-coded in component CSS.
======================================================================== */
--tapin-color-neutral-50: #F8FAFC;
--tapin-color-neutral-100: #F1F5F9;
--tapin-color-neutral-200: #E2E8F0;
--tapin-color-neutral-300: #CBD5E1;
--tapin-color-neutral-400: #94A3B8;
--tapin-color-neutral-500: #64748B;
--tapin-color-neutral-600: #475569;
--tapin-color-neutral-700: #334155;
--tapin-color-neutral-800: #1E293B;
--tapin-color-neutral-900: #0F172A;
--tapin-color-neutral-950: #020617;
/* Semantic neutral aliases — components reference these, not the scale */
--tapin-color-bg: #FFFFFF;
--tapin-color-bg-soft: var(--tapin-color-neutral-50);
--tapin-color-bg-muted: var(--tapin-color-neutral-100);
--tapin-color-bg-inverse: var(--tapin-color-neutral-900);
--tapin-color-surface: #FFFFFF;
--tapin-color-surface-raised: #FFFFFF;
--tapin-color-surface-sunken: var(--tapin-color-neutral-50);
--tapin-color-border: var(--tapin-color-neutral-200);
--tapin-color-border-strong: var(--tapin-color-neutral-300);
--tapin-color-border-subtle: var(--tapin-color-neutral-100);
--tapin-color-text: var(--tapin-color-neutral-900);
--tapin-color-text-strong: var(--tapin-color-neutral-950);
--tapin-color-text-muted: var(--tapin-color-neutral-600);
--tapin-color-text-subtle: var(--tapin-color-neutral-500);
--tapin-color-text-inverse: #FFFFFF;
--tapin-color-text-on-brand: #FFFFFF;
/* ========================================================================
COLORS — Semantic (success / warning / danger / info)
Every semantic color ships a -bg / -fg / -border triplet so the same
token set can be used for pills, banners, focus rings and icons.
======================================================================== */
/* Success — emerald */
--tapin-color-success: #10B981;
--tapin-color-success-bg: #ECFDF5;
--tapin-color-success-fg: #065F46;
--tapin-color-success-border: #A7F3D0;
/* Warning — amber */
--tapin-color-warning: #F59E0B;
--tapin-color-warning-bg: #FFFBEB;
--tapin-color-warning-fg: #92400E;
--tapin-color-warning-border: #FDE68A;
/* Danger — red */
--tapin-color-danger: #EF4444;
--tapin-color-danger-bg: #FEF2F2;
--tapin-color-danger-fg: #991B1B;
--tapin-color-danger-border: #FECACA;
/* Info — sky-blue (distinct from primary pink so banners don't read as CTAs) */
--tapin-color-info: #0EA5E9;
--tapin-color-info-bg: #F0F9FF;
--tapin-color-info-fg: #075985;
--tapin-color-info-border: #BAE6FD;
/* ========================================================================
TYPOGRAPHY
======================================================================== */
--tapin-font-sans: 'Heebo', 'Assistant', 'Rubik', system-ui, -apple-system,
'Segoe UI', Arial, sans-serif;
--tapin-font-mono: ui-monospace, 'SF Mono', Menlo, 'Cascadia Mono',
Consolas, monospace;
/* Size scale — rem-based. The fluid sizes (clamp) only kick in for
headline-class sizes where a real responsive bump pays off. Body text
stays fixed so users' browser zoom is respected. */
--tapin-font-size-xs: 0.75rem; /* 12px */
--tapin-font-size-sm: 0.875rem; /* 14px */
--tapin-font-size-base: 1rem; /* 16px */
--tapin-font-size-lg: 1.125rem; /* 18px */
--tapin-font-size-xl: 1.25rem; /* 20px */
--tapin-font-size-2xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);
--tapin-font-size-3xl: clamp(1.875rem, 1.6rem + 1vw, 2.25rem);
--tapin-font-size-4xl: clamp(2.25rem, 1.85rem + 1.6vw, 3rem);
--tapin-font-size-5xl: clamp(3rem, 2.4rem + 2.4vw, 4rem);
--tapin-font-weight-regular: 400;
--tapin-font-weight-medium: 500;
--tapin-font-weight-semibold: 600;
--tapin-font-weight-bold: 700;
--tapin-line-height-tight: 1.2;
--tapin-line-height-snug: 1.35;
--tapin-line-height-normal: 1.5;
--tapin-line-height-relaxed: 1.65;
--tapin-letter-spacing-tight: -0.01em;
--tapin-letter-spacing-normal: 0;
--tapin-letter-spacing-wide: 0.02em;
/* ========================================================================
SPACING — 4px base scale
Use these for padding, margin, gap. Do NOT introduce arbitrary px values.
======================================================================== */
--tapin-space-0: 0;
--tapin-space-1: 0.25rem; /* 4px */
--tapin-space-2: 0.5rem; /* 8px */
--tapin-space-3: 0.75rem; /* 12px */
--tapin-space-4: 1rem; /* 16px */
--tapin-space-5: 1.25rem; /* 20px */
--tapin-space-6: 1.5rem; /* 24px */
--tapin-space-8: 2rem; /* 32px */
--tapin-space-10: 2.5rem; /* 40px */
--tapin-space-12: 3rem; /* 48px */
--tapin-space-16: 4rem; /* 64px */
--tapin-space-20: 5rem; /* 80px */
--tapin-space-24: 6rem; /* 96px */
/* ========================================================================
RADII
======================================================================== */
--tapin-radius-xs: 4px;
--tapin-radius-sm: 6px;
--tapin-radius-md: 10px;
--tapin-radius-lg: 14px;
--tapin-radius-xl: 20px;
--tapin-radius-2xl: 28px;
--tapin-radius-full: 9999px;
/* ========================================================================
SHADOWS
Layered, low-opacity, modern. Two-stop drops feel softer than single ones.
======================================================================== */
--tapin-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
--tapin-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04),
0 2px 4px rgba(15, 23, 42, 0.04);
--tapin-shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06),
0 2px 4px rgba(15, 23, 42, 0.04);
--tapin-shadow-lg: 0 10px 20px rgba(15, 23, 42, 0.08),
0 4px 8px rgba(15, 23, 42, 0.04);
--tapin-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.10),
0 8px 16px rgba(15, 23, 42, 0.04);
/* Brand glow — used on hover/focus of primary actions */
--tapin-shadow-glow: 0 0 0 4px rgba(233, 30, 99, 0.18);
--tapin-shadow-glow-strong: 0 8px 24px rgba(233, 30, 99, 0.35);
/* Focus ring — accessibility */
--tapin-shadow-focus-ring: 0 0 0 3px rgba(233, 30, 99, 0.35);
/* ========================================================================
TRANSITIONS
Use these for hover/active/focus state changes. Always ease-out — incoming
motion should feel snappy, outgoing motion should not draw attention.
======================================================================== */
--tapin-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
--tapin-transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1);
--tapin-transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);
--tapin-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
--tapin-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* ========================================================================
Z-INDEX SCALE
Use these, never raw numbers. Anything above modal must be exceptional.
======================================================================== */
--tapin-z-base: 1;
--tapin-z-dropdown: 100;
--tapin-z-sticky: 200;
--tapin-z-overlay: 900;
--tapin-z-modal: 1000;
--tapin-z-toast: 1100;
--tapin-z-tooltip: 1200;
/* ========================================================================
LAYOUT TOKENS
======================================================================== */
--tapin-container-max: 1200px;
--tapin-container-narrow: 820px;
--tapin-container-prose: 680px;
--tapin-control-height-sm: 36px;
--tapin-control-height-md: 44px; /* mobile-friendly minimum touch target */
--tapin-control-height-lg: 52px;
}
/* ==========================================================================
DARK MODE
Only neutrals + semantic backgrounds remap. The pink scale and gradients
stay identical (brand recognition > theme purity).
No JS toggle, no class flip — OS-driven via prefers-color-scheme.
========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
/* Neutrals invert: surfaces darken, text lightens */
--tapin-color-bg: #0B1220;
--tapin-color-bg-soft: #111A2E;
--tapin-color-bg-muted: #1A2540;
--tapin-color-bg-inverse: #F8FAFC;
--tapin-color-surface: #131C33;
--tapin-color-surface-raised: #1A2540;
--tapin-color-surface-sunken: #0B1220;
--tapin-color-border: #243355;
--tapin-color-border-strong: #334466;
--tapin-color-border-subtle: #1A2540;
--tapin-color-text: #E2E8F0;
--tapin-color-text-strong: #F8FAFC;
--tapin-color-text-muted: #94A3B8;
--tapin-color-text-subtle: #64748B;
--tapin-color-text-inverse: #0F172A;
/* Semantic tints darken; foregrounds lighten for contrast */
--tapin-color-success-bg: #052E22;
--tapin-color-success-fg: #6EE7B7;
--tapin-color-success-border: #065F46;
--tapin-color-warning-bg: #2E1F05;
--tapin-color-warning-fg: #FCD34D;
--tapin-color-warning-border: #92400E;
--tapin-color-danger-bg: #2A0B0B;
--tapin-color-danger-fg: #FCA5A5;
--tapin-color-danger-border: #991B1B;
--tapin-color-info-bg: #082A3F;
--tapin-color-info-fg: #7DD3FC;
--tapin-color-info-border: #075985;
/* Shadows deepen in dark mode (light shadows on dark surfaces are invisible) */
--tapin-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--tapin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4),
0 2px 4px rgba(0, 0, 0, 0.3);
--tapin-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5),
0 2px 4px rgba(0, 0, 0, 0.3);
--tapin-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.55),
0 4px 8px rgba(0, 0, 0, 0.3);
--tapin-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6),
0 8px 16px rgba(0, 0, 0, 0.3);
/* Brand glow stays pink — that's the point */
--tapin-shadow-glow: 0 0 0 4px rgba(233, 30, 99, 0.28);
--tapin-shadow-glow-strong: 0 8px 24px rgba(233, 30, 99, 0.45);
--tapin-shadow-focus-ring: 0 0 0 3px rgba(249, 79, 138, 0.55);
/* Surface gradient gets a dark variant so the pink-tint top doesn't glow white */
--tapin-gradient-surface: linear-gradient(180deg, #131C33 0%, #1A1230 100%);
}
}
/* ==========================================================================
Honour reduced-motion preferences — collapse transitions to instant.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--tapin-transition-fast: 0ms;
--tapin-transition-base: 0ms;
--tapin-transition-slow: 0ms;
}
}