/* * Design tokens — Brains RE AI Apps * ---------------------------------- * Fuente única de verdad para colores, tipografía, espaciado, radios, * elevación y movimiento. Cualquier app que use (ver * src/toolbar/toolbar.js) debe cargar este archivo en el documento host: * las custom properties atraviesan el Shadow DOM del toolbar, así que * basta con importarlo una vez en el :root de la página. * * Para adaptar el look & feel de otra app, sobreescribe estas variables * (por ejemplo en un tokens.override.css cargado después de este) en * lugar de tocar toolbar.js. */ @import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..800;1,300..800&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root{ /* Fonts */ --font-sans:"Public Sans","Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* Brand — Cobalt */ --cobalt-50:#EEF3FE;--cobalt-100:#DCE6FD;--cobalt-200:#BACDFB;--cobalt-300:#8FACF7;--cobalt-400:#5B84F0;--cobalt-500:#3563E4;--cobalt-600:#1D4ED8;--cobalt-700:#173CAA;--cobalt-800:#152F80;--cobalt-900:#132657; /* Neutrals — cool grey */ --grey-0:#FFFFFF;--grey-25:#FBFCFD;--grey-50:#F5F7F9;--grey-100:#EDF0F3;--grey-200:#E1E5EA;--grey-300:#CBD2DA;--grey-400:#9AA5B1;--grey-500:#6B7683;--grey-600:#4C555F;--grey-700:#363E47;--grey-800:#242A31;--grey-900:#14181C; /* Semantic hues */ --green-50:#E8F5EF;--green-500:#0E9F6E;--green-600:#047857;--green-700:#035C43; --amber-50:#FDF3E6;--amber-500:#D97706;--amber-600:#B45309;--amber-700:#8A3F06; --red-50:#FDECEC;--red-500:#E5484D;--red-600:#DC2626;--red-700:#B01B1B; --sky-50:#E9F3FA;--sky-500:#0284C7;--sky-600:#0369A1;--sky-700:#075079; /* Semantic aliases */ --surface-page:var(--grey-25);--surface-card:var(--grey-0);--surface-sunken:var(--grey-50);--surface-raised:var(--grey-0);--surface-inverse:var(--grey-900);--surface-hover:var(--grey-50);--surface-active:var(--grey-100);--surface-selected:var(--cobalt-50); --text-strong:var(--grey-900);--text-body:var(--grey-700);--text-muted:var(--grey-500);--text-subtle:var(--grey-400);--text-inverse:var(--grey-0);--text-link:var(--cobalt-600);--text-link-hover:var(--cobalt-700);--text-on-accent:#FFFFFF; --border-subtle:var(--grey-200);--border-default:var(--grey-300);--border-strong:var(--grey-400);--border-focus:var(--cobalt-500); --accent:var(--cobalt-600);--accent-hover:var(--cobalt-700);--accent-active:var(--cobalt-800);--accent-soft:var(--cobalt-50);--accent-soft-border:var(--cobalt-200);--accent-text:var(--cobalt-700); --success:var(--green-600);--success-soft:var(--green-50);--warning:var(--amber-600);--warning-soft:var(--amber-50);--danger:var(--red-600);--danger-hover:var(--red-700);--danger-soft:var(--red-50);--info:var(--sky-600);--info-soft:var(--sky-50); --focus-ring:0 0 0 3px rgba(53,99,228,.28); /* Typography */ --text-display:44px;--text-h1:32px;--text-h2:24px;--text-h3:19px;--text-lg:17px;--text-md:15px;--text-sm:13px;--text-xs:12px;--text-control:14px; --leading-display:1.06;--leading-heading:1.22;--leading-body:1.55;--leading-tight:1.35; --tracking-display:-0.024em;--tracking-heading:-0.014em;--tracking-body:-0.003em;--tracking-caps:0.07em; --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700; --type-display:var(--weight-bold) var(--text-display)/var(--leading-display) var(--font-sans); --type-h1:var(--weight-bold) var(--text-h1)/var(--leading-heading) var(--font-sans); --type-h2:var(--weight-semibold) var(--text-h2)/var(--leading-heading) var(--font-sans); --type-h3:var(--weight-semibold) var(--text-h3)/var(--leading-tight) var(--font-sans); --type-body:var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-sans); --type-label:var(--weight-medium) var(--text-sm)/1.4 var(--font-sans); --type-mono:var(--weight-regular) var(--text-sm)/1.5 var(--font-mono); /* Spacing */ --space-0:0px;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:12px;--space-6:16px;--space-7:20px;--space-8:24px;--space-9:32px;--space-10:40px;--space-11:56px;--space-12:72px;--space-13:96px; --gutter:24px;--page-pad:32px;--field-pad-x:12px;--field-pad-y:8px;--card-pad:20px; --control-h-sm:28px;--control-h-md:36px;--control-h-lg:44px; --width-content:720px;--width-page:1240px;--sidebar-w:248px;--topbar-h:56px; /* Radius */ --radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;--radius-control:6px;--radius-card:10px;--radius-overlay:14px; /* Elevation */ --shadow-none:none; --shadow-xs:0 1px 1px rgba(20,24,28,.04); --shadow-sm:0 1px 2px rgba(20,24,28,.06),0 1px 3px rgba(20,24,28,.05); --shadow-md:0 2px 4px rgba(20,24,28,.05),0 6px 14px rgba(20,24,28,.07); --shadow-lg:0 8px 20px rgba(20,24,28,.08),0 20px 44px rgba(20,24,28,.10); --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6); --scrim:rgba(20,24,28,.42); --blur-overlay:saturate(140%) blur(6px); /* Motion */ --ease-standard:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1); --dur-instant:80ms; --dur-fast:120ms; --dur-base:180ms; --dur-slow:260ms; --dur-overlay:220ms; --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard); } *,*::before,*::after{box-sizing:border-box} body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{color:var(--text-strong);margin:0} h1{font:var(--type-h1);letter-spacing:var(--tracking-heading)} h2{font:var(--type-h2);letter-spacing:var(--tracking-heading)} h3{font:var(--type-h3)} p{margin:0 0 var(--space-5)} a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)} a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px} code,kbd,pre{font:var(--type-mono)} :focus-visible{outline:2px solid var(--border-focus);outline-offset:2px} ::selection{background:var(--cobalt-100)}