/* ==========================================================================
RECREATE DESIGN SYSTEM, TOKENS (SYSTEM LAYER)
--------------------------------------------------------------------------
Brand-neutral. This file holds structure: neutrals, scales, semantics,
spacing, shadows, motion. It does NOT define the brand identity.
Load order in any project:
the system
one brand (the knobs)
the UI
A brand file sets the "brand contract": --rc-brand (+700/300/100),
--rc-accent (+700/300/100), the fonts, and optionally warmer neutrals or
rounder radii. Everything else derives from those. See brand-recreate.css.
========================================================================== */
:root {
/* ----------------------------------------------------------------------
DEFAULT NEUTRALS (a brand may override any of these for warmth/cool)
---------------------------------------------------------------------- */
--rc-white: #ffffff;
--rc-paper: #fbfbfc; /* app canvas */
--rc-mist: #f3f3f6; /* subtle section fill */
--rc-fog: #e7e7ec; /* hairline / divider */
--rc-steel: #9a9aa6; /* muted UI text, disabled */
--rc-slate: #54545f; /* secondary text */
--rc-ink: #131318; /* primary text */
--rc-void: #0a0a0d; /* deepest black, dark surfaces */
--rc-success: #11a37f;
--rc-warning: #e8a93b;
--rc-danger: #e23c3c;
/* ----------------------------------------------------------------------
SEMANTIC SURFACES & TEXT (components reference THESE, never raw values)
--rc-brand / --rc-accent come from the loaded brand file.
---------------------------------------------------------------------- */
--rc-bg: var(--rc-paper);
--rc-bg-elevated: var(--rc-white);
--rc-bg-sunken: var(--rc-mist);
--rc-bg-inverse: var(--rc-void);
--rc-text: var(--rc-ink);
--rc-text-muted: var(--rc-slate);
--rc-text-subtle: var(--rc-steel);
--rc-text-inverse: var(--rc-white);
--rc-text-brand: var(--rc-brand); /* links / accents */
--rc-text-spark: var(--rc-accent); /* the small pop, used sparingly */
--rc-on-brand: var(--rc-white); /* text/icon on a brand-colored fill */
--rc-on-accent: var(--rc-white); /* text/icon on an accent-colored fill (set to ink for light accents like yellow) */
--rc-border: var(--rc-fog);
--rc-border-strong: var(--rc-ink);
--rc-focus-ring: var(--rc-brand-300);
/* ----------------------------------------------------------------------
TYPOGRAPHY (font families come from the brand file; these are fallbacks)
---------------------------------------------------------------------- */
--rc-font-body: system-ui, -apple-system, sans-serif;
--rc-font-serif: Georgia, "Times New Roman", serif;
--rc-font-mono: ui-monospace, "SFMono-Regular", monospace;
--rc-font-display: system-ui, sans-serif;
/* Fluid type scale, 1.250 (major third) */
--rc-text-2xs: 0.6875rem;
--rc-text-xs: 0.75rem;
--rc-text-sm: 0.875rem;
--rc-text-md: 1rem;
--rc-text-lg: 1.125rem;
--rc-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
--rc-text-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
--rc-text-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem);
--rc-text-4xl: clamp(2.8rem, 1.9rem + 4.3vw, 5rem);
--rc-text-5xl: clamp(3.6rem, 2rem + 7.4vw, 8rem);
--rc-leading-tight: 0.96;
--rc-leading-snug: 1.12;
--rc-leading-normal: 1.55;
--rc-leading-relaxed:1.75;
--rc-tracking-tight: -0.03em;
--rc-tracking-snug: -0.01em;
--rc-tracking-wide: 0.16em;
--rc-tracking-mega: 0.28em;
--rc-weight-regular: 400;
--rc-weight-medium: 500;
--rc-weight-semi: 600;
--rc-weight-bold: 700;
/* ----------------------------------------------------------------------
SPACE (4px base grid)
---------------------------------------------------------------------- */
--rc-space-0: 0;
--rc-space-1: 0.25rem;
--rc-space-2: 0.5rem;
--rc-space-3: 0.75rem;
--rc-space-4: 1rem;
--rc-space-5: 1.5rem;
--rc-space-6: 2rem;
--rc-space-7: 3rem;
--rc-space-8: 4rem;
--rc-space-9: 6rem;
--rc-space-10: 8rem;
/* ----------------------------------------------------------------------
RADII, BORDERS, SHADOWS, MOTION (a brand may bump radii for personality)
---------------------------------------------------------------------- */
--rc-radius-xs: 4px;
--rc-radius-sm: 8px;
--rc-radius-md: 14px;
--rc-radius-lg: 22px;
--rc-radius-xl: 32px;
--rc-radius-pill: 999px;
--rc-radius-button: var(--rc-radius-pill); /* brand knob: button shape */
--rc-border-hair: 1px;
--rc-border-bold: 2px;
--rc-shadow-xs: 0 1px 2px rgba(19,19,24,.06);
--rc-shadow-sm: 0 2px 8px rgba(19,19,24,.07);
--rc-shadow-md: 0 12px 30px -12px rgba(19,19,24,.18);
--rc-shadow-lg: 0 30px 60px -24px rgba(19,19,24,.28);
--rc-shadow-brand: 0 18px 40px -16px color-mix(in srgb, var(--rc-brand) 42%, transparent);
--rc-ease: cubic-bezier(.22, 1, .36, 1);
--rc-ease-in-out: cubic-bezier(.65, 0, .35, 1);
--rc-dur-fast: 140ms;
--rc-dur-base: 260ms;
--rc-dur-slow: 520ms;
/* ----------------------------------------------------------------------
LAYOUT
---------------------------------------------------------------------- */
--rc-container: 1200px;
--rc-container-wide: 1440px;
--rc-gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
--rc-z-nav: 100;
--rc-z-overlay: 900;
--rc-z-modal: 1000;
}
/* ==========================================================================
DARK SURFACE CONTEXT
Wrap any subtree in [data-theme="dark"] to flip semantic tokens.
========================================================================== */
[data-theme="dark"] {
--rc-bg: var(--rc-void);
--rc-bg-elevated: #16161c;
--rc-bg-sunken: #101015;
--rc-bg-inverse: var(--rc-white);
--rc-text: #f4f4f7;
--rc-text-muted: #a9a9b6;
--rc-text-subtle: #6e6e7b;
--rc-text-inverse: var(--rc-ink);
--rc-text-brand: var(--rc-brand-300);
--rc-text-spark: var(--rc-accent-300);
--rc-border: #28282f;
--rc-border-strong: #f4f4f7;
}
@media (prefers-reduced-motion: reduce) {
:root { --rc-dur-fast: 0ms; --rc-dur-base: 0ms; --rc-dur-slow: 0ms; }
}
/* ==========================================================================
BRAND: RECREATE
The house style. Load after tokens.css, before components.css.
Uses the default neutrals and radii from tokens.css.
========================================================================== */
:root {
--rc-brand: #3d59ff; /* cobalt */
--rc-brand-700: #2438c9;
--rc-brand-300: #7d92ff;
--rc-brand-100: #e6eaff;
--rc-accent: #e2197b; /* magenta, the pop */
--rc-accent-700: #b3145f;
--rc-accent-300: #f25c9a;
--rc-accent-100: #fce0ee;
--rc-violet: #9b27c4; /* Recreate extra */
--rc-font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
--rc-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
--rc-font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
--rc-font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
}
/* ==========================================================================
RECREATE DESIGN SYSTEM, COMPONENTS
--------------------------------------------------------------------------
Reusable UI primitives. Requires tokens.css.
Every value derives from a token. Restyle the whole system from tokens.css.
========================================================================== */
/* ---- RESET & BASE ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--rc-font-body);
font-size: var(--rc-text-md);
line-height: var(--rc-leading-normal);
color: var(--rc-text);
background: var(--rc-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--rc-accent); color: var(--rc-on-accent); }
:focus-visible {
outline: var(--rc-border-bold) solid var(--rc-focus-ring);
outline-offset: 3px;
border-radius: var(--rc-radius-xs);
}
/* ---- LAYOUT HELPERS ----------------------------------------------------- */
.rc-container {
width: 100%;
max-width: var(--rc-container);
margin-inline: auto;
padding-inline: var(--rc-gutter);
}
.rc-container--wide { max-width: var(--rc-container-wide); }
.rc-section { padding-block: var(--rc-space-9); }
.rc-stack > * + * { margin-top: var(--rc-space-4); }
.rc-cluster { display: flex; flex-wrap: wrap; gap: var(--rc-space-3); align-items: center; }
/* ==========================================================================
TYPOGRAPHY PRIMITIVES
========================================================================== */
/* Eyebrow label with trailing rule, your "EXPERTS IN VIRTUAL…____" device */
.rc-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--rc-space-3);
font-family: var(--rc-font-body);
font-weight: var(--rc-weight-bold);
font-size: var(--rc-text-2xs);
letter-spacing: var(--rc-tracking-wide);
text-transform: uppercase;
color: var(--rc-text);
}
.rc-eyebrow::after {
content: "";
width: clamp(2rem, 6vw, 4.5rem);
height: 2px;
background: currentColor;
}
.rc-eyebrow--brand { color: var(--rc-text-brand); }
/* Headline. Clean, sentence case, tight tracking. Calm by default. */
.rc-display {
font-family: var(--rc-font-body);
font-weight: var(--rc-weight-medium);
font-size: var(--rc-text-4xl);
line-height: var(--rc-leading-snug);
letter-spacing: var(--rc-tracking-tight);
}
.rc-display--md { font-size: var(--rc-text-3xl); }
.rc-display--sm { font-size: var(--rc-text-2xl); }
/* Serif accent. Use sparingly for one or two words inside a headline. */
.rc-serif { font-family: var(--rc-font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
/* The recurring magenta dot accent. The one pop of pink that is left. */
.rc-dot { color: var(--rc-accent); }
/* Gradient-filled text */
.rc-text-grad {
color: var(--rc-brand);
}
.rc-lead { font-size: var(--rc-text-xl); color: var(--rc-text-muted); line-height: var(--rc-leading-snug); }
.rc-muted { color: var(--rc-text-muted); }
.rc-mono { font-family: var(--rc-font-mono); font-size: 0.85em; }
/* ==========================================================================
BRAND MARK, the dual-tone logo ring
========================================================================== */
.rc-logo { display: inline-flex; align-items: center; gap: var(--rc-space-2);
font-family: var(--rc-font-body); font-weight: var(--rc-weight-semi);
letter-spacing: -0.01em; font-size: var(--rc-text-lg); }
.rc-logo__ring {
width: 1.05em; height: 1.05em; border-radius: 50%;
background: linear-gradient(125deg, var(--rc-brand) 0 70%, var(--rc-accent) 70% 100%);
-webkit-mask: radial-gradient(closest-side, transparent 56%, #000 58%);
mask: radial-gradient(closest-side, transparent 56%, #000 58%);
flex: none;
}
/* ==========================================================================
BUTTONS
========================================================================== */
.rc-btn {
--_pad-y: 0.8em; --_pad-x: 1.4em;
display: inline-flex; align-items: center; justify-content: center;
gap: var(--rc-space-2);
padding: var(--_pad-y) var(--_pad-x);
font-family: var(--rc-font-body);
font-weight: var(--rc-weight-semi);
font-size: var(--rc-text-sm);
letter-spacing: var(--rc-tracking-snug);
line-height: 1;
border: var(--rc-border-bold) solid transparent;
border-radius: var(--rc-radius-button);
cursor: pointer;
transition: transform var(--rc-dur-fast) var(--rc-ease),
box-shadow var(--rc-dur-base) var(--rc-ease),
background var(--rc-dur-base) var(--rc-ease),
color var(--rc-dur-base) var(--rc-ease),
border-color var(--rc-dur-base) var(--rc-ease);
}
.rc-btn:active { transform: translateY(1px) scale(.99); }
.rc-btn:disabled { opacity: .45; cursor: not-allowed; }
.rc-btn .rc-btn__arrow { transition: transform var(--rc-dur-base) var(--rc-ease); }
.rc-btn:hover .rc-btn__arrow { transform: translateX(4px); }
/* Primary, the signature gradient */
.rc-btn--primary {
background: var(--rc-brand);
color: var(--rc-on-brand);
box-shadow: var(--rc-shadow-brand);
}
.rc-btn--primary:hover { background: var(--rc-brand-700); box-shadow: 0 22px 48px -14px color-mix(in srgb, var(--rc-brand) 50%, transparent); transform: translateY(-2px); }
/* Solid ink */
.rc-btn--solid { background: var(--rc-ink); color: var(--rc-white); }
.rc-btn--solid:hover { background: var(--rc-void); transform: translateY(-2px); box-shadow: var(--rc-shadow-md); }
/* Outline */
.rc-btn--outline { background: transparent; color: var(--rc-text); border-color: var(--rc-border-strong); }
.rc-btn--outline:hover { background: var(--rc-ink); color: var(--rc-white); border-color: var(--rc-ink); }
/* Ghost */
.rc-btn--ghost { background: transparent; color: var(--rc-text); }
.rc-btn--ghost:hover { background: var(--rc-bg-sunken); }
.rc-btn--lg { font-size: var(--rc-text-md); --_pad-y: 1em; --_pad-x: 1.9em; }
.rc-btn--sm { font-size: var(--rc-text-xs); --_pad-y: 0.6em; --_pad-x: 1.1em; }
.rc-btn--block { display: flex; width: 100%; }
/* Underlined link-button with arrow, your "PROJECTS →" */
.rc-link-cta {
display: inline-flex; align-items: baseline; gap: var(--rc-space-3);
font-family: var(--rc-font-display); text-transform: uppercase;
font-size: var(--rc-text-2xl); letter-spacing: var(--rc-tracking-snug);
border-bottom: 4px solid var(--rc-ink); padding-bottom: 4px;
transition: gap var(--rc-dur-base) var(--rc-ease), color var(--rc-dur-base) var(--rc-ease);
}
.rc-link-cta:hover { gap: var(--rc-space-5); color: var(--rc-brand); border-color: var(--rc-brand); }
/* ==========================================================================
BADGES / TAGS / PILLS
========================================================================== */
.rc-tag {
display: inline-flex; align-items: center; gap: var(--rc-space-2);
padding: 0.35em 0.85em; border-radius: var(--rc-radius-pill);
font-size: var(--rc-text-xs); font-weight: var(--rc-weight-semi);
letter-spacing: var(--rc-tracking-snug);
background: var(--rc-bg-sunken); color: var(--rc-text-muted);
}
.rc-tag--brand { background: var(--rc-accent-100); color: var(--rc-accent-700); }
.rc-tag--ink { background: var(--rc-ink); color: var(--rc-white); }
.rc-tag--success { background: color-mix(in srgb, var(--rc-success) 14%, transparent); color: var(--rc-success); }
.rc-tag--dot::before { content:""; width:.5em; height:.5em; border-radius:50%; background: currentColor; }
/* ==========================================================================
CARDS
========================================================================== */
.rc-card {
position: relative;
background: var(--rc-bg-elevated);
border: var(--rc-border-hair) solid var(--rc-border);
border-radius: var(--rc-radius-lg);
padding: var(--rc-space-6);
transition: transform var(--rc-dur-base) var(--rc-ease),
box-shadow var(--rc-dur-base) var(--rc-ease),
border-color var(--rc-dur-base) var(--rc-ease);
}
.rc-card--interactive { cursor: pointer; }
.rc-card--interactive:hover { transform: translateY(-6px); box-shadow: var(--rc-shadow-lg); border-color: transparent; }
/* Card whose top edge carries the brand gradient */
.rc-card--accent { overflow: hidden; }
.rc-card--accent::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
background: linear-gradient(90deg, var(--rc-brand) 0 70%, var(--rc-accent) 70% 100%);
}
/* Inverse / gradient feature card */
.rc-card--brand {
background: var(--rc-brand); color: var(--rc-on-brand);
border-color: transparent; box-shadow: var(--rc-shadow-brand);
}
.rc-card--brand .rc-muted { color: rgba(255,255,255,.78); }
.rc-card__eyebrow { font-size: var(--rc-text-2xs); letter-spacing: var(--rc-tracking-wide);
text-transform: uppercase; font-weight: var(--rc-weight-bold); color: var(--rc-text-subtle); }
.rc-card__title { font-size: var(--rc-text-xl); font-weight: var(--rc-weight-bold);
letter-spacing: var(--rc-tracking-snug); margin-top: var(--rc-space-2); }
/* ==========================================================================
FORMS
========================================================================== */
.rc-field { display: flex; flex-direction: column; gap: var(--rc-space-2); }
.rc-label { font-size: var(--rc-text-sm); font-weight: var(--rc-weight-semi); }
.rc-hint { font-size: var(--rc-text-xs); color: var(--rc-text-subtle); }
.rc-input, .rc-textarea, .rc-select {
width: 100%;
padding: 0.85em 1em;
background: var(--rc-bg-elevated);
color: var(--rc-text);
border: var(--rc-border-bold) solid var(--rc-border);
border-radius: var(--rc-radius-md);
transition: border-color var(--rc-dur-base) var(--rc-ease),
box-shadow var(--rc-dur-base) var(--rc-ease);
}
.rc-input::placeholder, .rc-textarea::placeholder { color: var(--rc-text-subtle); }
.rc-input:focus, .rc-textarea:focus, .rc-select:focus {
outline: none; border-color: var(--rc-brand);
box-shadow: 0 0 0 4px var(--rc-brand-100);
}
.rc-textarea { min-height: 7rem; resize: vertical; }
/* Inline email-capture row, your footer "Send" form */
.rc-inline-form { display: flex; gap: var(--rc-space-2); flex-wrap: wrap; }
.rc-inline-form .rc-input { flex: 1 1 14rem; }
.rc-toggle { position: relative; display: inline-flex; width: 2.75rem; height: 1.5rem; }
.rc-toggle input { position: absolute; opacity: 0; }
.rc-toggle__track { width: 100%; height: 100%; border-radius: var(--rc-radius-pill);
background: var(--rc-fog); transition: background var(--rc-dur-base) var(--rc-ease); }
.rc-toggle__track::after { content:""; position:absolute; top:3px; left:3px; width:1.125rem; height:1.125rem;
border-radius:50%; background: var(--rc-white); box-shadow: var(--rc-shadow-sm);
transition: transform var(--rc-dur-base) var(--rc-ease); }
.rc-toggle input:checked + .rc-toggle__track { background: var(--rc-brand); }
.rc-toggle input:checked + .rc-toggle__track::after { transform: translateX(1.25rem); }
/* ==========================================================================
NAVIGATION
========================================================================== */
.rc-nav {
position: sticky; top: 0; z-index: var(--rc-z-nav);
display: flex; align-items: center; justify-content: space-between;
gap: var(--rc-space-5);
padding: var(--rc-space-4) var(--rc-gutter);
background: color-mix(in srgb, var(--rc-bg) 82%, transparent);
backdrop-filter: saturate(150%) blur(14px);
border-bottom: var(--rc-border-hair) solid var(--rc-border);
}
.rc-nav__links { display: flex; gap: var(--rc-space-5); align-items: center; }
.rc-nav__link {
font-size: var(--rc-text-sm); font-weight: var(--rc-weight-semi);
letter-spacing: var(--rc-tracking-snug); text-transform: uppercase;
position: relative; padding-block: 4px;
}
.rc-nav__link::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
background: var(--rc-brand); transition: width var(--rc-dur-base) var(--rc-ease); }
.rc-nav__link:hover::after, .rc-nav__link[aria-current="page"]::after { width: 100%; }
/* ==========================================================================
LOGO WALL (grayscale client strip → colour on hover)
========================================================================== */
.rc-logowall { display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--rc-space-7); }
.rc-logowall > * { filter: grayscale(1); opacity: .55; font-weight: var(--rc-weight-bold);
letter-spacing: var(--rc-tracking-snug); transition: opacity var(--rc-dur-base), filter var(--rc-dur-base); }
.rc-logowall > *:hover { filter: grayscale(0); opacity: 1; }
/* ==========================================================================
STATS / METRICS
========================================================================== */
.rc-stat__value { font-family: var(--rc-font-body); font-weight: var(--rc-weight-medium);
font-size: var(--rc-text-4xl); line-height: 1; letter-spacing: var(--rc-tracking-tight); }
.rc-stat__label { font-size: var(--rc-text-sm); color: var(--rc-text-muted); margin-top: var(--rc-space-2); }
/* ==========================================================================
FOOTER (the signature gradient block)
========================================================================== */
.rc-footer { background: var(--rc-brand); color: var(--rc-on-brand); padding-block: var(--rc-space-9); }
.rc-footer a { color: rgba(255,255,255,.82); }
.rc-footer a:hover { color: var(--rc-white); text-decoration: underline; text-underline-offset: 4px; }
.rc-footer__head { font-family: var(--rc-font-display); font-size: var(--rc-text-3xl);
text-transform: uppercase; line-height: var(--rc-leading-snug); letter-spacing: var(--rc-tracking-snug); }
/* ==========================================================================
DIVIDERS & UTILITIES
========================================================================== */
.rc-rule { border: 0; border-top: var(--rc-border-hair) solid var(--rc-border); }
.rc-rule--ink { border-color: var(--rc-ink); border-top-width: var(--rc-border-bold); }
.rc-grain::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
opacity: .5; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
/* ==========================================================================
ENTRANCE ANIMATION (staggered reveal, add data-reveal, JS adds .is-in)
========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].is-in { opacity: 1; transform: none;
transition: opacity var(--rc-dur-slow) var(--rc-ease), transform var(--rc-dur-slow) var(--rc-ease); }
/* ==========================================================================
APP & ADMIN COMPONENTS
Data, feedback, navigation, forms and overlays. All theme-aware.
========================================================================== */
/* ---- TABLE -------------------------------------------------------------- */
.rc-table-wrap { border: 1px solid var(--rc-border); border-radius: var(--rc-radius-lg);
overflow: hidden; background: var(--rc-bg-elevated); }
.rc-table { width: 100%; border-collapse: collapse; font-size: var(--rc-text-sm); }
.rc-table th { text-align: left; font-size: var(--rc-text-2xs); text-transform: uppercase; letter-spacing: .1em;
font-weight: 600; color: var(--rc-text-subtle); padding: var(--rc-space-3) var(--rc-space-4);
background: var(--rc-bg-sunken); border-bottom: 1px solid var(--rc-border); white-space: nowrap; }
.rc-table td { padding: var(--rc-space-4); border-bottom: 1px solid var(--rc-border); }
.rc-table tbody tr:last-child td { border-bottom: 0; }
.rc-table--hover tbody tr { transition: background var(--rc-dur-fast) var(--rc-ease); }
.rc-table--hover tbody tr:hover { background: var(--rc-bg-sunken); }
.rc-table tr[aria-selected="true"] { background: color-mix(in srgb, var(--rc-brand) 12%, transparent); }
.rc-table--compact th, .rc-table--compact td { padding: var(--rc-space-2) var(--rc-space-3); }
.rc-th-sort { cursor: pointer; }
.rc-th-sort::after { content: " ↕"; color: var(--rc-text-subtle); }
/* ---- PAGINATION --------------------------------------------------------- */
.rc-pagination { display: inline-flex; align-items: center; gap: var(--rc-space-1); }
.rc-pagination button, .rc-pagination a { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem;
padding: 0 .6em; border-radius: var(--rc-radius-sm); border: 1px solid transparent; background: transparent;
color: var(--rc-text); font-size: var(--rc-text-sm); font-weight: 500; cursor: pointer;
transition: background var(--rc-dur-fast) var(--rc-ease), border-color var(--rc-dur-fast) var(--rc-ease); }
.rc-pagination button:hover, .rc-pagination a:hover { background: var(--rc-bg-sunken); }
.rc-pagination [aria-current="page"] { background: var(--rc-brand); color: var(--rc-on-brand); }
.rc-pagination button:disabled { opacity: .4; cursor: not-allowed; }
/* ---- EMPTY STATE -------------------------------------------------------- */
.rc-empty { text-align: center; padding: var(--rc-space-8) var(--rc-space-5);
border: 1px dashed var(--rc-border); border-radius: var(--rc-radius-lg); }
.rc-empty__mark { width: 3rem; height: 3rem; border-radius: 50%; display: inline-grid; place-items: center;
background: var(--rc-bg-sunken); color: var(--rc-text-subtle); font-size: 1.4rem; margin-bottom: var(--rc-space-4); }
.rc-empty__title { font-weight: 600; font-size: var(--rc-text-lg); }
.rc-empty__text { color: var(--rc-text-muted); max-width: 36ch; margin: var(--rc-space-2) auto var(--rc-space-5); }
/* ---- KEY-VALUE ---------------------------------------------------------- */
.rc-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--rc-space-3) var(--rc-space-6); margin: 0; }
.rc-kv dt { color: var(--rc-text-subtle); font-size: var(--rc-text-sm); }
.rc-kv dd { font-weight: 500; margin: 0; }
/* ---- ALERT / CALLOUT ---------------------------------------------------- */
.rc-alert { display: flex; gap: var(--rc-space-3); padding: var(--rc-space-4) var(--rc-space-5);
border-radius: var(--rc-radius-md); border: 1px solid var(--rc-border); border-left-width: 3px; background: var(--rc-bg-elevated); }
.rc-alert__icon { flex: none; font-weight: 700; }
.rc-alert__title { font-weight: 600; }
.rc-alert__text { color: var(--rc-text-muted); font-size: var(--rc-text-sm); margin-top: 2px; }
.rc-alert--info { border-left-color: var(--rc-brand); background: color-mix(in srgb, var(--rc-brand) 7%, var(--rc-bg-elevated)); }
.rc-alert--success { border-left-color: var(--rc-success); background: color-mix(in srgb, var(--rc-success) 8%, var(--rc-bg-elevated)); }
.rc-alert--warning { border-left-color: var(--rc-warning); background: color-mix(in srgb, var(--rc-warning) 10%, var(--rc-bg-elevated)); }
.rc-alert--danger { border-left-color: var(--rc-danger); background: color-mix(in srgb, var(--rc-danger) 8%, var(--rc-bg-elevated)); }
.rc-alert--info .rc-alert__icon { color: var(--rc-brand); }
.rc-alert--success .rc-alert__icon { color: var(--rc-success); }
.rc-alert--warning .rc-alert__icon { color: var(--rc-warning); }
.rc-alert--danger .rc-alert__icon { color: var(--rc-danger); }
/* ---- TOAST -------------------------------------------------------------- */
.rc-toaster { position: fixed; bottom: var(--rc-space-5); right: var(--rc-space-5); display: flex; flex-direction: column;
gap: var(--rc-space-2); z-index: var(--rc-z-modal); }
.rc-toast { display: inline-flex; align-items: center; gap: var(--rc-space-3); padding: var(--rc-space-3) var(--rc-space-4);
background: var(--rc-bg-inverse); color: var(--rc-text-inverse); border-radius: var(--rc-radius-md);
box-shadow: var(--rc-shadow-lg); font-size: var(--rc-text-sm); font-weight: 500; }
.rc-toast__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--rc-success); flex: none; }
/* ---- STATUS BADGE ------------------------------------------------------- */
.rc-status { display: inline-flex; align-items: center; gap: .5em; font-size: var(--rc-text-xs);
font-weight: 600; color: var(--rc-text-muted); }
.rc-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--rc-steel); flex: none; }
.rc-status--success::before { background: var(--rc-success); }
.rc-status--warning::before { background: var(--rc-warning); }
.rc-status--danger::before { background: var(--rc-danger); }
.rc-status--info::before { background: var(--rc-brand); }
/* ---- PROGRESS ----------------------------------------------------------- */
.rc-progress { height: .5rem; background: var(--rc-bg-sunken); border-radius: var(--rc-radius-pill); overflow: hidden; }
.rc-progress__bar { height: 100%; background: var(--rc-brand); border-radius: inherit;
transition: width var(--rc-dur-slow) var(--rc-ease); }
.rc-progress--indeterminate .rc-progress__bar { width: 40%; animation: rc-indeterminate 1.3s var(--rc-ease-in-out) infinite; }
@keyframes rc-indeterminate { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
/* ---- SKELETON ----------------------------------------------------------- */
.rc-skeleton { background: var(--rc-bg-sunken); border-radius: var(--rc-radius-sm); position: relative; overflow: hidden; }
.rc-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc-fog) 70%, transparent), transparent);
animation: rc-shimmer 1.4s infinite; }
.rc-skeleton--text { height: .8em; margin: .35em 0; }
.rc-skeleton--circle { border-radius: 50%; }
@keyframes rc-shimmer { 100% { transform: translateX(100%); } }
/* ---- SPINNER ------------------------------------------------------------ */
.rc-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid var(--rc-border); border-top-color: var(--rc-brand);
border-radius: 50%; display: inline-block; animation: rc-spin .7s linear infinite; }
.rc-spinner--lg { width: 2rem; height: 2rem; border-width: 3px; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
/* ---- TABS --------------------------------------------------------------- */
.rc-tabs { display: flex; gap: var(--rc-space-5); border-bottom: 1px solid var(--rc-border); }
.rc-tab { padding: var(--rc-space-3) 0; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent;
font-weight: 500; font-size: var(--rc-text-sm); color: var(--rc-text-muted); cursor: pointer;
transition: color var(--rc-dur-base) var(--rc-ease), border-color var(--rc-dur-base) var(--rc-ease); }
.rc-tab:hover { color: var(--rc-text); }
.rc-tab[aria-selected="true"] { color: var(--rc-text); border-bottom-color: var(--rc-brand); }
/* ---- BREADCRUMB --------------------------------------------------------- */
.rc-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rc-space-2);
list-style: none; padding: 0; margin: 0; font-size: var(--rc-text-sm); color: var(--rc-text-muted); }
.rc-breadcrumb li { display: flex; align-items: center; gap: var(--rc-space-2); }
.rc-breadcrumb li + li::before { content: "/"; color: var(--rc-text-subtle); }
.rc-breadcrumb a:hover { color: var(--rc-brand); }
.rc-breadcrumb [aria-current="page"] { color: var(--rc-text); font-weight: 500; }
/* ---- SEGMENTED CONTROL -------------------------------------------------- */
.rc-segment { display: inline-flex; gap: 2px; padding: 3px; background: var(--rc-bg-sunken); border-radius: var(--rc-radius-md); }
.rc-segment button { border: 0; background: transparent; padding: .45em 1em; border-radius: calc(var(--rc-radius-md) - 3px);
font-size: var(--rc-text-sm); font-weight: 500; color: var(--rc-text-muted); cursor: pointer;
transition: background var(--rc-dur-fast) var(--rc-ease), color var(--rc-dur-fast) var(--rc-ease); }
.rc-segment button:hover { color: var(--rc-text); }
.rc-segment button[aria-pressed="true"] { background: var(--rc-bg-elevated); color: var(--rc-text); box-shadow: var(--rc-shadow-xs); }
/* ---- APP SHELL / SIDEBAR ------------------------------------------------ */
.rc-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.rc-shell__main { min-width: 0; }
.rc-sidebar { background: var(--rc-void); border-right: 1px solid var(--rc-border); padding: var(--rc-space-5);
display: flex; flex-direction: column; gap: var(--rc-space-6); position: sticky; top: 0; height: 100vh; }
.rc-sidebar__link { display: flex; align-items: center; gap: var(--rc-space-3); padding: .65em .9em; border-radius: var(--rc-radius-md);
font-weight: 500; font-size: var(--rc-text-sm); color: rgba(255,255,255,.62);
transition: background var(--rc-dur-base) var(--rc-ease), color var(--rc-dur-base) var(--rc-ease); }
.rc-sidebar__link:hover { background: rgba(255,255,255,.06); color: var(--rc-white); }
.rc-sidebar__link.is-active { background: var(--rc-brand); color: var(--rc-on-brand); }
@media (max-width: 880px){ .rc-shell { grid-template-columns: 1fr; } .rc-sidebar { display: none; } }
/* ---- CHECKBOX & RADIO --------------------------------------------------- */
.rc-check, .rc-radio { display: inline-flex; align-items: center; gap: var(--rc-space-2); cursor: pointer; font-size: var(--rc-text-sm); }
.rc-check input, .rc-radio input { accent-color: var(--rc-brand); width: 1.05em; height: 1.05em; cursor: pointer; }
/* ---- SEARCH ------------------------------------------------------------- */
.rc-search { display: inline-flex; align-items: center; gap: var(--rc-space-2); background: var(--rc-bg-elevated);
border: 2px solid var(--rc-border); border-radius: var(--rc-radius-pill); padding: .5em 1em; }
.rc-search:focus-within { border-color: var(--rc-brand); box-shadow: 0 0 0 4px var(--rc-brand-100); }
.rc-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; }
.rc-search__icon { color: var(--rc-text-subtle); }
/* ---- MODAL / DIALOG (use with native