/*
* R³ Design Tokens — AUTO-GENERATED from r3-primitives.json
* ==========================================================
* DO NOT EDIT THIS FILE MANUALLY. Edit via Admin → Design tab.
* Use with data-theme="dark" or data-theme="light" on . Default: dark.
*/
/* ═══ DARK MODE (default) ═══ */
:root,
[data-theme="dark"] {
--r3-color-bg-deep: #060910;
--r3-color-bg: #0B0F18;
--r3-color-bg-elevated: #111A24;
--r3-color-bg-surface: #1A2530;
--r3-color-bg-hover: #1F2D3A;
--r3-color-border: #243040;
--r3-color-border-subtle: #1A2535;
--r3-color-border-strong: #304050;
--r3-color-border-focus: rgba(46, 255, 184, 0.5);
--r3-color-text-primary: #ffffff;
--r3-color-text-secondary: #edeef8;
--r3-color-text-tertiary: #e7eef3;
--r3-color-text-ghost: #d8dfe4;
--r3-color-mint: #2EFFB8;
--r3-color-mint-bright: #5CFFD0;
--r3-color-mint-hover: #6AFFD8;
--r3-color-mint-dim: #1a9970;
--r3-color-mint-muted: rgba(46, 255, 184, 0.12);
--r3-color-mint-glow: rgba(46, 255, 184, 0.35);
--r3-color-mint-glow-lg: rgba(46, 255, 184, 0.18);
--r3-color-mint-text: #060910;
--r3-color-success: #2EFFB8;
--r3-color-warning: #FFB833;
--r3-color-error: #FF5A75;
--r3-color-info: #6CB4FF;
--r3-color-purple: #B49EFF;
--r3-color-input-bg: rgba(6,9,16,0.7);
--r3-color-bar-bg: rgba(8,12,20,0.72);
--r3-color-logo-fill: #FFFFFF;
--r3-color-logo-accent: #2EFFB8;
--r3-gradient-panel: linear-gradient(135deg, rgba(17,26,36,0.92), rgba(11,15,24,0.96));
--r3-gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(46,255,184,0.08) 0%, transparent 60%);
--r3-shadow-card: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(46,255,184,0.08);
--r3-shadow-mint: 0 0 20px rgba(46,255,184,0.15), 0 0 4px rgba(46,255,184,0.1);
}
/* ═══ LIGHT MODE ═══ */
[data-theme="light"] {
--r3-color-bg-deep: #F4F3EF;
--r3-color-bg: #F9F8F5;
--r3-color-bg-elevated: #FFFFFF;
--r3-color-bg-surface: #EEEDEA;
--r3-color-bg-hover: #EBEAE5;
--r3-color-border: #D8D5CC;
--r3-color-border-subtle: #E8E5DC;
--r3-color-border-strong: #C4C0B5;
--r3-color-border-focus: rgba(11, 94, 66, 0.4);
--r3-color-text-primary: #111111;
--r3-color-text-secondary: #3A3A38;
--r3-color-text-tertiary: #6B6B68;
--r3-color-text-ghost: #A0A09C;
--r3-color-mint: #0B5E42;
--r3-color-mint-bright: #0F7D57;
--r3-color-mint-hover: #0F7D57;
--r3-color-mint-dim: #084D35;
--r3-color-mint-muted: rgba(13, 107, 74, 0.07);
--r3-color-mint-glow: rgba(13, 107, 74, 0.15);
--r3-color-mint-glow-lg: rgba(13, 107, 74, 0.08);
--r3-color-mint-text: #FFFFFF;
--r3-color-success: #0D6B4A;
--r3-color-warning: #9C6D00;
--r3-color-error: #B82D3E;
--r3-color-info: #1D5EA8;
--r3-color-purple: #5B3FB5;
--r3-color-input-bg: #FFFFFF;
--r3-color-bar-bg: rgba(255,255,255,0.78);
--r3-color-logo-fill: #111111;
--r3-color-logo-accent: #0B5E42;
--r3-gradient-panel: #FFFFFF;
--r3-gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(13,107,74,0.04) 0%, transparent 60%);
--r3-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
--r3-shadow-mint: 0 0 16px rgba(11,94,66,0.06);
}
/* ═══ SHARED TOKENS ═══ */
:root {
--r3-font-brand: 'R3', 'Inter', -apple-system, sans-serif;
--r3-font-r3-light: 'R3 Light', 'R3', 'Inter', sans-serif;
--r3-font-hebrew: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--r3-font-hebrew-light: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--r3-font-mono: 'Heebo', sans-serif;
--r3-radius-sm: 4px;
--r3-radius-md: 8px;
--r3-radius-lg: 12px;
--r3-radius-xl: 16px;
--r3-spacing-1: 4px;
--r3-spacing-2: 8px;
--r3-spacing-3: 12px;
--r3-spacing-4: 16px;
--r3-ease: cubic-bezier(0.16, 1, 0.3, 1);
--r3-duration-fast: 180ms;
--r3-duration-normal: 250ms;
--r3-duration-slow: 300ms;
}
/* ═══ TEXT PRESETS ═══ */
.r3-text-hero {
font-family: var(--r3-font-brand);
font-size: 36px;
font-weight: 400;
color: var(--r3-text-primary);
line-height: 1.1;
}
.r3-text-h1 {
font-family: var(--r3-font-hebrew);
font-size: 28px;
font-weight: 700;
color: var(--r3-text-primary);
line-height: 1.2;
}
.r3-text-body {
font-family: var(--r3-font-hebrew);
font-size: 16px;
font-weight: 400;
color: var(--r3-text-secondary);
line-height: 1.7;
}
.r3-text-label {
font-family: var(--r3-font-mono);
font-size: 13px;
font-weight: 600;
color: var(--r3-text-ghost);
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.r3-text-code {
font-family: var(--r3-font-mono);
font-size: 13px;
font-weight: 400;
color: var(--r3-mint-hover);
line-height: 1.5;
}
/* ═══ BUTTON PRESETS ═══ */
.r3-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; user-select:none; transition:transform 180ms cubic-bezier(0.16,1,0.3,1), box-shadow 180ms cubic-bezier(0.16,1,0.3,1), background 180ms ease, border-color 180ms ease; }
.r3-btn:hover:not([disabled]) { transform: translateY(-1px); }
.r3-btn[disabled] { cursor: not-allowed; pointer-events: none; }
.r3-btn-icon-svg { flex-shrink:0; }
.r3-btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 56px;
padding: 0 36px;
border-radius: 0px;
font-family: var(--r3-font-brand);
font-size: 18px;
font-weight: 200;
background: transparent;
color: var(--r3-mint);
border: 0px solid transparent;
box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 22px;
border-radius: 0px;
font-family: var(--r3-font-brand);
font-size: 14px;
font-weight: 200;
background: transparent;
color: var(--r3-text-primary);
border: 0px solid transparent;
box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 22px;
border-radius: 6px;
font-family: var(--r3-font-hebrew);
font-size: 14px;
font-weight: 600;
background: transparent;
color: var(--r3-mint);
border: 1px solid var(--r3-mint);
box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 32px;
padding: 0 12px;
border-radius: 6px;
font-family: var(--r3-font-mono);
font-size: 12px;
font-weight: 400;
background: transparent;
color: var(--r3-text-secondary);
border: 1px solid var(--r3-text-ghost);
box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-danger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 32px;
padding: 0 12px;
border-radius: 6px;
font-family: var(--r3-font-hebrew);
font-size: 12px;
font-weight: 600;
background: transparent;
color: var(--r3-error);
border: 1px solid var(--r3-error);
box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-success {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 32px;
padding: 0 12px;
border-radius: 6px;
font-family: var(--r3-font-hebrew);
font-size: 12px;
font-weight: 600;
background: var(--r3-success);
color: var(--r3-mint-text);
border: 0px solid var(--r3-success);
box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-icon-lg {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 44px;
height: 44px;
padding: 0;
border-radius: 6px;
font-family: var(--r3-font-hebrew);
font-size: 14px;
font-weight: 600;
background: var(--r3-mint);
color: var(--r3-mint-text);
border: 0px solid var(--r3-mint);
box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-icon-md {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 36px;
height: 36px;
padding: 0;
border-radius: 6px;
font-family: var(--r3-font-hebrew);
font-size: 14px;
font-weight: 600;
background: var(--r3-bg-elevated);
color: var(--r3-text-primary);
border: 1px solid var(--r3-border-strong);
box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-icon-sm {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 28px;
height: 28px;
padding: 0;
border-radius: 6px;
font-family: var(--r3-font-hebrew);
font-size: 14px;
font-weight: 600;
background: transparent;
color: var(--r3-text-secondary);
border: 1px solid var(--r3-text-ghost);
box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-icon-warn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 28px;
height: 28px;
padding: 0;
border-radius: 6px;
font-family: var(--r3-font-hebrew);
font-size: 14px;
font-weight: 600;
background: transparent;
color: var(--r3-warning);
border: 1px solid var(--r3-warning);
box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-icon-trash {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 28px;
height: 28px;
padding: 0;
border-radius: 6px;
font-family: var(--r3-font-hebrew);
font-size: 14px;
font-weight: 600;
background: transparent;
color: var(--r3-error);
border: 1px solid var(--r3-error);
box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-ai-square {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 56px;
height: 56px;
padding: 0;
border-radius: 8px;
font-family: var(--r3-font-brand);
font-size: 18px;
font-weight: 400;
background: var(--r3-mint);
color: var(--r3-mint-text);
border: 0px solid var(--r3-mint);
box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.r3-btn-ai-rect {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 64px;
padding: 0 32px;
border-radius: 0px;
font-family: var(--r3-font-brand);
font-size: 18px;
font-weight: 200;
background: transparent;
color: var(--r3-mint);
border: 0px solid transparent;
box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
cursor: pointer;
user-select: none;
transition: transform 180ms var(--r3-ease, ease), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
/* ═══ INPUT PRESETS ═══ */
.r3-input { display:block; width:100%; outline:none; transition:border-color 180ms ease, box-shadow 180ms ease; }
.r3-input:focus { border-color: var(--r3-mint) !important; box-shadow: 0 0 0 3px rgba(46,255,184,0.12), inset 0 1px 2px rgba(0,0,0,0.4) !important; }
.r3-input::placeholder { color: var(--r3-text-tertiary); }
.r3-input-prompt {
display: block;
width: 100%;
font-family: var(--r3-font-hebrew);
font-size: 15px;
font-weight: 400;
color: var(--r3-text-secondary);
background: var(--r3-bg-deep);
border: 1px solid var(--r3-border-subtle);
border-radius: 14px;
padding: 18px 22px;
min-height: 132px;
resize: none;
line-height: 1.6;
box-shadow: inset 0 6px 14px rgba(0,0,0,0.75), inset 0 2px 3px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.05), 0 18px 36px -14px rgba(46,255,184,0.40);
outline: none;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.r3-input-text {
display: block;
width: 100%;
font-family: var(--r3-font-hebrew);
font-size: 14px;
font-weight: 400;
color: var(--r3-text-secondary);
background: var(--r3-bg-deep);
border: 1px solid var(--r3-border-subtle);
border-radius: 8px;
padding: 0px 16px;
height: 42px;
box-shadow: inset 0 6px 14px rgba(0,0,0,0.75), inset 0 2px 3px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.05), 0 18px 36px -14px rgba(255,255,255,0.22);
outline: none;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.r3-input-floating {
display: block;
width: 100%;
font-family: var(--r3-font-hebrew);
font-size: 14px;
font-weight: 400;
color: var(--r3-text-secondary);
background: var(--r3-bg-elevated);
border: 1px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 14px 18px;
min-height: 94px;
resize: none;
line-height: 1.6;
box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 22px 40px -14px rgba(255,255,255,0.20);
outline: none;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
/* ═══ BAR PRESETS ═══ */
.r3-bar { display:flex; align-items:center; gap:12px; transition:background 180ms ease; }
.r3-bar-top-minimal {
display: flex;
align-items: center;
gap: 12px;
height: 52px;
padding: 0 18px;
border-radius: 12px;
background: var(--r3-bar-bg);
color: var(--r3-text-primary);
border: 1px solid var(--r3-border-subtle);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.r3-bar-top-rich {
display: flex;
align-items: center;
gap: 12px;
height: 60px;
padding: 0 22px;
border-radius: 12px;
background: var(--r3-bar-bg);
color: var(--r3-text-primary);
border: 1px solid var(--r3-border-subtle);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
/* ═══ TOOLBAR PRESETS ═══ */
.r3-toolbar { display:flex; flex-direction:column; align-items:stretch; transition:width 220ms cubic-bezier(0.16,1,0.3,1); }
.r3-toolbar-item { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; transition:background 160ms ease, color 160ms ease; padding:0 14px; }
.r3-toolbar-item:hover { background: rgba(255,255,255,0.04); }
.r3-toolbar-fixed {
display: flex;
flex-direction: column;
width: 180px;
background: var(--r3-bg-deep);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-fixed .r3-toolbar-item {
height: 44px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
}
.r3-toolbar-fixed .r3-toolbar-label {
color: var(--r3-text-secondary);
font-size: 13px;
white-space: nowrap;
}
.r3-toolbar-fixed .r3-toolbar-item.is-active { color: var(--r3-text-primary); background: rgba(46,255,184,0.06); }
.r3-toolbar-fixed-icons {
display: flex;
flex-direction: column;
width: 52px;
background: var(--r3-bg-deep);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-fixed-icons .r3-toolbar-item {
height: 40px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
justify-content: center;
}
.r3-toolbar-fixed-icons .r3-toolbar-item.is-active { color: var(--r3-mint); background: rgba(46,255,184,0.06); }
.r3-toolbar-expand {
display: flex;
flex-direction: column;
width: 180px;
background: var(--r3-bg-surface);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-expand .r3-toolbar-item {
height: 44px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
}
.r3-toolbar-expand .r3-toolbar-label {
color: var(--r3-text-secondary);
font-size: 13px;
white-space: nowrap;
}
.r3-toolbar-expand .r3-toolbar-label { opacity: 0; transition: opacity 160ms ease; }
.r3-toolbar-expand:hover .r3-toolbar-label, .r3-toolbar-expand:focus-within .r3-toolbar-label { opacity: 1; }
.r3-toolbar-expand .r3-toolbar-item.is-active { color: var(--r3-text-primary); background: rgba(46,255,184,0.06); }
.r3-toolbar-icons-expand {
display: flex;
flex-direction: column;
width: 52px;
background: var(--r3-bg-surface);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-icons-expand:hover, .r3-toolbar-icons-expand:focus-within { width: 76px; }
.r3-toolbar-icons-expand .r3-toolbar-item {
height: 40px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
justify-content: center;
}
.r3-toolbar-icons-expand .r3-toolbar-item.is-active { color: var(--r3-mint); background: rgba(46,255,184,0.06); }
.r3-toolbar-h-text {
display: flex;
flex-direction: column;
width: 480px;
background: var(--r3-bg-deep);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-h-text .r3-toolbar-item {
height: 44px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
}
.r3-toolbar-h-text .r3-toolbar-label {
color: var(--r3-text-secondary);
font-size: 13px;
white-space: nowrap;
}
.r3-toolbar-h-text .r3-toolbar-item.is-active { color: var(--r3-text-primary); background: rgba(46,255,184,0.06); }
.r3-toolbar-h-icons {
display: flex;
flex-direction: column;
width: 300px;
background: var(--r3-bg-deep);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-h-icons .r3-toolbar-item {
height: 44px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
justify-content: center;
}
.r3-toolbar-h-icons .r3-toolbar-item.is-active { color: var(--r3-mint); background: rgba(46,255,184,0.06); }
.r3-toolbar-h-icons-expand {
display: flex;
flex-direction: column;
width: 348px;
background: var(--r3-bg-surface);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-h-icons-expand .r3-toolbar-item {
height: 52px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
justify-content: center;
}
.r3-toolbar-h-icons-expand .r3-toolbar-item.is-active { color: var(--r3-mint); background: rgba(46,255,184,0.06); }
.r3-toolbar-dropdown {
display: flex;
flex-direction: column;
width: 220px;
background: var(--r3-bg-deep);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-dropdown .r3-toolbar-item {
height: 40px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
}
.r3-toolbar-dropdown .r3-toolbar-label {
color: var(--r3-text-secondary);
font-size: 13px;
white-space: nowrap;
}
.r3-toolbar-dropdown .r3-toolbar-item.is-active { color: var(--r3-text-primary); background: rgba(46,255,184,0.06); }
.r3-toolbar-dropdown-icons {
display: flex;
flex-direction: column;
width: 220px;
background: var(--r3-bg-deep);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-dropdown-icons .r3-toolbar-item {
height: 40px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
}
.r3-toolbar-dropdown-icons .r3-toolbar-label {
color: var(--r3-text-secondary);
font-size: 13px;
white-space: nowrap;
}
.r3-toolbar-dropdown-icons .r3-toolbar-item.is-active { color: var(--r3-text-primary); background: rgba(46,255,184,0.06); }
.r3-toolbar-checkbox-list {
display: flex;
flex-direction: column;
width: 220px;
background: var(--r3-bg-deep);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-checkbox-list .r3-toolbar-item {
height: 40px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
}
.r3-toolbar-checkbox-list .r3-toolbar-label {
color: var(--r3-text-secondary);
font-size: 13px;
white-space: nowrap;
}
.r3-toolbar-checkbox-list .r3-toolbar-item.is-active { color: var(--r3-text-primary); background: rgba(46,255,184,0.06); }
.r3-toolbar-checkbox-list-compact {
display: flex;
flex-direction: column;
width: 200px;
background: var(--r3-bg-deep);
border: 0px solid var(--r3-border-subtle);
border-radius: 10px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-checkbox-list-compact .r3-toolbar-item {
height: 32px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
}
.r3-toolbar-checkbox-list-compact .r3-toolbar-label {
color: var(--r3-text-secondary);
font-size: 13px;
white-space: nowrap;
}
.r3-toolbar-checkbox-list-compact .r3-toolbar-item.is-active { color: var(--r3-text-primary); background: rgba(46,255,184,0.06); }
.r3-toolbar-checkbox-list-padded {
display: flex;
flex-direction: column;
width: 240px;
background: var(--r3-bg-surface);
border: 0px solid var(--r3-border-subtle);
border-radius: 14px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-checkbox-list-padded .r3-toolbar-item {
height: 48px;
color: var(--r3-text-secondary);
flex-direction: row; gap: 12px; align-items: center;
}
.r3-toolbar-checkbox-list-padded .r3-toolbar-label {
color: var(--r3-text-secondary);
font-size: 13px;
white-space: nowrap;
}
.r3-toolbar-checkbox-list-padded .r3-toolbar-label { opacity: 0; transition: opacity 160ms ease; }
.r3-toolbar-checkbox-list-padded:hover .r3-toolbar-label, .r3-toolbar-checkbox-list-padded:focus-within .r3-toolbar-label { opacity: 1; }
.r3-toolbar-checkbox-list-padded .r3-toolbar-item.is-active { color: var(--r3-text-primary); background: rgba(46,255,184,0.06); }
.r3-toolbar-checkbox-grid {
display: flex;
flex-direction: column;
width: 220px;
background: var(--r3-bg-deep);
border: 0px solid var(--r3-border-subtle);
border-radius: 12px;
padding: 8px 0;
overflow: hidden;
transition: width 220ms cubic-bezier(0.16,1,0.3,1);
}
.r3-toolbar-checkbox-grid .r3-toolbar-item {
height: 64px;
color: var(--r3-text-tertiary);
flex-direction: row; gap: 12px; align-items: center;
}
.r3-toolbar-checkbox-grid .r3-toolbar-label {
color: var(--r3-text-tertiary);
font-size: 13px;
white-space: nowrap;
}
.r3-toolbar-checkbox-grid .r3-toolbar-item.is-active { color: var(--r3-mint); background: rgba(46,255,184,0.06); }
/* ═══ CHIP — … ═══ */
.r3-chip {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--r3-bg-deep);
color: var(--r3-text-primary);
border: 1px solid var(--r3-border-strong);
border-radius: 4px;
padding: 4px 8px;
direction: ltr;
line-height: 1;
font-family: var(--r3-font-mono);
font-size: 11px;
transition: border-color 160ms ease, background 160ms ease;
}
.r3-chip-dot {
width: 5px;
height: 5px;
border-radius: 1px;
background: var(--r3-mint);
box-shadow: 0 0 5px var(--r3-mint)b3;
flex-shrink: 0;
}
.r3-chip-x {
background: transparent;
border: 0;
color: var(--r3-text-tertiary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 10px;
height: 10px;
padding: 0;
transition: color 140ms ease;
}
.r3-chip-x:hover { color: var(--r3-text-primary); }
/* ═══ SWITCH — ═══ */
.r3-switch {
position: relative;
width: 44px;
height: 24px;
border-radius: 4px;
background: var(--r3-bg-deep);
border: 1px solid var(--r3-border-strong);
cursor: pointer;
flex-shrink: 0;
display: inline-block;
transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.r3-switch-knob {
position: absolute;
top: 3px;
inset-inline-start: 3px;
width: 16px;
height: 16px;
border-radius: 3px;
background: var(--r3-text-tertiary);
transition: inset-inline-start 200ms cubic-bezier(0.4,0,0.2,1), background 160ms ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.r3-switch.is-on {
background: var(--r3-mint);
border-color: var(--r3-mint);
box-shadow: 0 0 12px var(--r3-mint)59, inset 0 1px 2px rgba(0,0,0,0.3);
}
.r3-switch.is-on .r3-switch-knob { inset-inline-start: 25px; background: var(--r3-text-primary); }
/* ═══ CHECKBOX — ═══ */
.r3-checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.r3-cb-box {
width: 18px;
height: 18px;
border-radius: 3px;
background: var(--r3-bg);
border: 1.5px solid var(--r3-border-strong);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: transparent;
transition: all 160ms ease;
}
.r3-cb-box .r3-cb-check, .r3-cb-box .r3-cb-indet { display: none; width: 11px; height: 11px; }
.r3-cb-box.is-checked, .r3-cb-box.is-indet {
background: var(--r3-mint);
border-color: var(--r3-mint);
color: var(--r3-mint-text);
box-shadow: 0 0 8px var(--r3-mint)66;
}
.r3-cb-box.is-checked .r3-cb-check { display: inline-flex; }
.r3-cb-box.is-indet .r3-cb-indet { display: inline-flex; }
/* ═══ RADIO — ═══ */
.r3-radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.r3-rd-box {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--r3-bg);
border: 1.5px solid var(--r3-border-strong);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.r3-rd-dot {
display: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--r3-mint);
}
.r3-rd-box.is-checked {
border-color: var(--r3-mint);
box-shadow: 0 0 8px var(--r3-mint)4d;
}
.r3-rd-box.is-checked .r3-rd-dot { display: inline-block; }
/* ═══ STEPPER — …
═══ */
.r3-stepper {
display: inline-flex;
align-items: stretch;
background: var(--r3-bg);
border: 1px solid var(--r3-border-strong);
border-radius: 6px;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.4);
}
.r3-stepper-btn {
width: 38px;
height: 38px;
background: linear-gradient(180deg, #13202C, #0B0F18);
border: 0;
color: var(--r3-text-primary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 160ms ease;
}
.r3-stepper-btn:hover { color: var(--r3-mint); background: linear-gradient(180deg, #1A2D3A, #101924); box-shadow: inset 0 0 12px rgba(46,255,184,0.12); }
.r3-stepper-btn:active { transform: translateY(1px); background: linear-gradient(180deg, #0B0F18, #13202C); }
.r3-stepper-val {
width: 64px;
height: 38px;
background: var(--r3-bg-deep);
border: 0;
border-inline: 1px solid var(--r3-border);
color: var(--r3-warning);
font-family: var(--r3-font-mono);
font-size: 16px;
font-weight: 600;
text-align: center;
outline: none;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 6px var(--r3-warning)66;
}
/* ═══ CUBE SELECTOR — ═══ */
@keyframes r3-cs-pulse { 0%,100% { box-shadow: 0 0 14px var(--r3-mint)59, inset 0 0 16px var(--r3-mint)14; } 50% { box-shadow: 0 0 22px var(--r3-mint)80, inset 0 0 18px var(--r3-mint)1a; } }
.r3-cube-sel { perspective: 252px; cursor: pointer; display: inline-block; width: 72px; height: 72px; }
.r3-cs-stage {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 600ms cubic-bezier(0.4,0,0.2,1);
}
.r3-cs-face {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--r3-text-primary);
border: 1px solid var(--r3-mint)73;
border-radius: 6px;
box-shadow: 0 0 14px var(--r3-mint)59, inset 0 0 16px var(--r3-mint)14;
backface-visibility: hidden;
}
.r3-cs-face-0 { background: linear-gradient(135deg, var(--r3-bg), var(--r3-bg-deep)); transform: rotateY(0deg) translateZ(36px); animation: r3-cs-pulse 3.6s ease-in-out infinite; }
.r3-cs-face-1 { background: linear-gradient(135deg, var(--r3-bg-deep), var(--r3-bg)); transform: rotateY(90deg) translateZ(36px); }
.r3-cs-face-2 { background: linear-gradient(135deg, var(--r3-bg), var(--r3-bg-deep)); transform: rotateY(180deg) translateZ(36px); }
.r3-cs-face-3 { background: linear-gradient(135deg, var(--r3-bg-deep), var(--r3-bg)); transform: rotateY(270deg) translateZ(36px); }
.r3-cs-face svg { width: 24px; height: 24px; }
/* ═══ LEGACY COLOR ALIASES — used by existing apps until Step 10 migration ═══ */
:root,
[data-theme="dark"] {
--r3-bg-deep: var(--r3-color-bg-deep);
--r3-bg: var(--r3-color-bg);
--r3-bg-elevated: var(--r3-color-bg-elevated);
--r3-bg-surface: var(--r3-color-bg-surface);
--r3-bg-hover: var(--r3-color-bg-hover);
--r3-border: var(--r3-color-border);
--r3-border-subtle: var(--r3-color-border-subtle);
--r3-border-strong: var(--r3-color-border-strong);
--r3-border-focus: var(--r3-color-border-focus);
--r3-text-primary: var(--r3-color-text-primary);
--r3-text-secondary: var(--r3-color-text-secondary);
--r3-text-tertiary: var(--r3-color-text-tertiary);
--r3-text-ghost: var(--r3-color-text-ghost);
--r3-mint: var(--r3-color-mint);
--r3-mint-bright: var(--r3-color-mint-bright);
--r3-mint-hover: var(--r3-color-mint-hover);
--r3-mint-dim: var(--r3-color-mint-dim);
--r3-mint-muted: var(--r3-color-mint-muted);
--r3-mint-glow: var(--r3-color-mint-glow);
--r3-mint-glow-lg: var(--r3-color-mint-glow-lg);
--r3-mint-text: var(--r3-color-mint-text);
--r3-success: var(--r3-color-success);
--r3-warning: var(--r3-color-warning);
--r3-error: var(--r3-color-error);
--r3-info: var(--r3-color-info);
--r3-purple: var(--r3-color-purple);
--r3-input-bg: var(--r3-color-input-bg);
--r3-bar-bg: var(--r3-color-bar-bg);
--r3-logo-fill: var(--r3-color-logo-fill);
--r3-logo-accent: var(--r3-color-logo-accent);
}
[data-theme="light"] {
--r3-bg-deep: var(--r3-color-bg-deep);
--r3-bg: var(--r3-color-bg);
--r3-bg-elevated: var(--r3-color-bg-elevated);
--r3-bg-surface: var(--r3-color-bg-surface);
--r3-bg-hover: var(--r3-color-bg-hover);
--r3-border: var(--r3-color-border);
--r3-border-subtle: var(--r3-color-border-subtle);
--r3-border-strong: var(--r3-color-border-strong);
--r3-border-focus: var(--r3-color-border-focus);
--r3-text-primary: var(--r3-color-text-primary);
--r3-text-secondary: var(--r3-color-text-secondary);
--r3-text-tertiary: var(--r3-color-text-tertiary);
--r3-text-ghost: var(--r3-color-text-ghost);
--r3-mint: var(--r3-color-mint);
--r3-mint-bright: var(--r3-color-mint-bright);
--r3-mint-hover: var(--r3-color-mint-hover);
--r3-mint-dim: var(--r3-color-mint-dim);
--r3-mint-muted: var(--r3-color-mint-muted);
--r3-mint-glow: var(--r3-color-mint-glow);
--r3-mint-glow-lg: var(--r3-color-mint-glow-lg);
--r3-mint-text: var(--r3-color-mint-text);
--r3-success: var(--r3-color-success);
--r3-warning: var(--r3-color-warning);
--r3-error: var(--r3-color-error);
--r3-info: var(--r3-color-info);
--r3-purple: var(--r3-color-purple);
--r3-input-bg: var(--r3-color-input-bg);
--r3-bar-bg: var(--r3-color-bar-bg);
--r3-logo-fill: var(--r3-color-logo-fill);
--r3-logo-accent: var(--r3-color-logo-accent);
}