/* ═══════════════════════════════════════════════════════════════════ ROMA DIGITAL — DESIGN TOKENS v2.1 · romaflow-tadmit-111 Verbatim copy of claude/roma-tokens-v2.css (single source of truth). Loaded ONCE globally via handle rf-tadmit-tokens-111. Widgets never redefine a token, never inline a :root block. Theme mechanism = live site: data-rf-theme="dark|light" on . ═══════════════════════════════════════════════════════════════════ */ :root { /* 01 · BRAND SEEDS */ --rf-blue:#0057FF; --rf-purple:#8C52FF; --rf-cyan:#00E5CC; --rf-pink:#FF0080; --rf-blue-200:#8FB5FF; --rf-blue-400:#3D7DFF; --rf-blue-600:#0044C7; --rf-blue-800:#002B7A; --rf-purple-200:#C7ABFF; --rf-purple-400:#A375FF; --rf-purple-600:#6E35D9; --rf-purple-800:#4A1F99; --rf-cyan-200:#7FF5E6; --rf-cyan-400:#2EEBD6; --rf-cyan-600:#00B3A0; --rf-cyan-800:#00776B; --rf-pink-200:#FF7FBF; --rf-pink-400:#FF3399; --rf-pink-600:#CC0066; --rf-pink-800:#8F0047; /* 02 · GRADIENTS (v2.1) */ --rf-gradient: linear-gradient(45deg, #00E5CC 0%, #0057FF 100%); --rf-gradient-135: linear-gradient(135deg, #00E5CC 0%, #0057FF 100%); --rf-gradient-90: linear-gradient(90deg, #00E5CC 0%, #0057FF 100%); --rf-gradient-cta: linear-gradient(45deg, #00776B 0%, #0044C7 100%); --rf-gradient-soft: linear-gradient(120deg, rgba(0,229,204,.09), rgba(0,87,255,.07)); --rf-gradient-tri: linear-gradient(90deg, #0057FF 0%, #8C52FF 55%, #00E5CC 100%); --rf-gradient-tri-135: linear-gradient(135deg, #0057FF 0%, #8C52FF 55%, #00E5CC 100%); --rf-gradient-pink: linear-gradient(45deg, #FF0080, #8C52FF); --rf-orb-blue: linear-gradient(45deg, var(--rf-blue), var(--rf-cyan)); --rf-orb-purple: linear-gradient(45deg, var(--rf-purple),var(--rf-pink)); --rf-orb-cyan: linear-gradient(45deg, var(--rf-cyan), var(--rf-blue)); --rf-conic: conic-gradient(from 180deg, #00E5CC, #0057FF, #00E5CC); /* 03 · TYPOGRAPHY */ --rf-font: "Noto Sans Hebrew", system-ui, sans-serif; --rf-font-disp: "Space Grotesk", "Noto Sans Hebrew", sans-serif; --rf-font-mono: "JetBrains Mono", ui-monospace, monospace; --fs-display: clamp(2.4rem, 5.5vw + 1rem, 4.5rem); --fs-h1: clamp(2rem, 4vw + .8rem, 3.25rem); --fs-h2: clamp(1.5rem, 2.6vw + .6rem, 2.25rem); --fs-h3: clamp(1.2rem, 1.4vw + .5rem, 1.5rem); --fs-body-lg: clamp(1.06rem,.4vw + .95rem, 1.185rem); --fs-body: 1rem; --fs-label: .8125rem; --fs-micro: .6875rem; --lh-tight: 1.15; --lh-head: 1.3; --lh-body: 1.65; /* 04 · TENSION SHAPE SYSTEM */ --ts-sharp: 0px; --ts-xs: 2px; --ts-s: 4px; --ts-m: 12px; --ts-l: 20px; --ts-xl: 32px; --ts-full: 9999px; --ts-a: 0px 20px 0px 20px; --ts-b: 20px 0px 20px 0px; --ts-c: 0px 0px 20px 0px; --ts-d: 32px 4px 32px 4px; /* 05 · BENTO GRID */ --bento-gap: 14px; --bento-radius: 20px; --bento-cell-min: 148px; --bento-cols-m: 2; --bento-cols-t: 4; --bento-cols-d: 6; /* 06 · MOTION */ --ease-std: cubic-bezier(0.2, 0, 0, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); --dur-fast: .15s; --dur-std: .3s; --dur-slow: .55s; /* 07 · LAYOUT */ --content-max: 1140px; --section-gap: clamp(60px, 9vw, 100px); --tap-min: 44px; /* 08 · FIXED ON-DARK TOKENS */ --on-dark-primary: #F1F5F9; --on-dark-secondary: #A6B2C2; --on-dark-faint: rgba(255,255,255,.62); /* 09 · SCRIM */ --scrim-on-gradient: linear-gradient(rgba(10,9,16,.58),rgba(10,9,16,.58)); } /* ═══════════════ THEME LAYER — DARK (default) ═══════════════ */ :root, :root[data-rf-theme="dark"] { color-scheme: dark; --surface-lowest: #0B0F14; --surface-low: #12181F; --surface: #161D26; --surface-high: #1C2430; --surface-highest: #242E3C; --md-primary: var(--rf-purple-200); --md-on-primary: #2A1060; --md-primary-container: #4A1F99; --md-on-primary-container:#E9DDFF; --md-secondary: var(--rf-blue-200); --md-on-secondary: #002B7A; --md-secondary-container:#0044C7; --md-on-secondary-container:#DBE6FF; --md-tertiary: var(--rf-cyan); --md-on-tertiary: #003731; --md-tertiary-container: #005A50; --md-on-tertiary-container:#7FF5E6; --text-primary: #E6EBF2; --text-secondary: #B8C2D0; --text-outline: #8B95A5; --outline-variant: rgba(255,255,255,.10); --accent-blue-text: var(--rf-blue-200); --accent-purple-text: var(--rf-purple-200); --accent-cyan-text: var(--rf-cyan); --accent-pink-text: var(--rf-pink-200); --card-bg: var(--surface-low); --card-border: rgba(255,255,255,.10); --glass-bg: rgba(248,250,252,.08); --glass-bg-strong: rgba(248,250,252,.14); --glass-blur: 16px; --glass-border: rgba(255,255,255,.38); --elev-1: 0 1px 3px 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.55); --elev-3: 0 4px 8px 3px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.45); --elev-5: 0 8px 12px 6px rgba(0,0,0,.24), 0 4px 4px rgba(0,0,0,.38); --neu-bg: linear-gradient(145deg, #1A222C, #10161D); --neu-raised: 6px 6px 12px rgba(0,0,0,.55), -5px -5px 10px rgba(56,72,92,.28); --neu-pressed: inset 4px 4px 8px rgba(0,0,0,.55), inset -3px -3px 7px rgba(56,72,92,.25); --neu-flat: 3px 3px 7px rgba(0,0,0,.45), -3px -3px 6px rgba(56,72,92,.20); --neu-tile: 2px 2px 6px rgba(0,0,0,.34), -2px -2px 5px rgba(56,72,92,.13); --neu-tile-hover: 4px 4px 12px rgba(0,0,0,.44), -3px -3px 8px rgba(56,72,92,.20); --focus-ring: 0 0 0 2px var(--surface-lowest), 0 0 0 4px var(--rf-cyan); } /* ═══════════════ THEME LAYER — LIGHT ═══════════════ */ :root[data-rf-theme="light"] { color-scheme: light; --surface-lowest: #F4F2EC; --surface-low: #FFFFFF; --surface: #FAF9F5; --surface-high: #F1EFE8; --surface-highest: #E9E6DD; --md-primary: #6E35D9; --md-on-primary: #FFFFFF; --md-primary-container: #E9DDFF; --md-on-primary-container:#2A1060; --md-secondary: #0044C7; --md-on-secondary: #FFFFFF; --md-secondary-container:#DBE6FF; --md-on-secondary-container:#002B7A; --md-tertiary: #00776B; --md-on-tertiary: #FFFFFF; --md-tertiary-container: #A8F5EA; --md-on-tertiary-container:#00332D; --text-primary: #0F172A; --text-secondary: #475569; --text-outline: #64748B; --outline-variant: rgba(15,23,42,.12); --accent-blue-text: #0044C7; --accent-purple-text: #6E35D9; --accent-cyan-text: #006E63; --accent-pink-text: #B8005C; --card-bg: #FFFFFF; --card-border: rgba(148,163,184,.28); --glass-bg: rgba(255,255,255,.55); --glass-bg-strong: rgba(255,255,255,.78); --glass-border: rgba(15,23,42,.14); --elev-1: 0 1px 3px 1px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.12); --elev-3: 0 4px 8px 3px rgba(15,23,42,.10), 0 1px 3px rgba(15,23,42,.14); --elev-5: 0 8px 12px 6px rgba(15,23,42,.10), 0 4px 4px rgba(15,23,42,.14); --neu-bg: linear-gradient(145deg, #FFFFFF, #E6E3DA); --neu-raised: 6px 6px 12px rgba(163,157,141,.42), -5px -5px 10px rgba(255,255,255,.95); --neu-pressed: inset 4px 4px 8px rgba(163,157,141,.42), inset -3px -3px 7px rgba(255,255,255,.9); --neu-flat: 3px 3px 7px rgba(163,157,141,.32), -3px -3px 6px rgba(255,255,255,.85); --neu-tile: 2px 2px 6px rgba(163,157,141,.26), -2px -2px 5px rgba(255,255,255,.9); --neu-tile-hover: 4px 4px 12px rgba(163,157,141,.36), -3px -3px 8px rgba(255,255,255,.95); --focus-ring: 0 0 0 2px var(--surface-lowest), 0 0 0 4px var(--rf-blue); }