/* * Base de diseño de Aiden = la de Arc UI, tal cual (orden de Alex, 4-oct-2026: «me gusta exactamente el * tamaño de letra, el color y todo; no cambiaría nada»). Copia literal de https://uiarc.dev/r/arc-foundation.json * (registry/foundation.css). No se toca aquí: si Arc cambia, se vuelve a copiar. * * Lo único propio de Aiden va AL FINAL (puente): los paneles marcan el modo oscuro con `html.dark` (no con * data-theme), y las fuentes se cargan desde Google Fonts (Geist + Inter) con `fuentes.html`. */ :root { color-scheme: light; --neutral-0: oklch(100% 0 0); --neutral-1: oklch(99% 0 0); --neutral-2: oklch(97.8% 0 0); --neutral-3: oklch(95.8% 0 0); --neutral-4: oklch(91.5% 0 0); --neutral-5: oklch(84% 0 0); --neutral-6: oklch(72% 0 0); --neutral-7: oklch(59% 0 0); --neutral-8: oklch(46% 0 0); --neutral-9: oklch(34% 0 0); --neutral-10: oklch(23% 0 0); --neutral-11: oklch(15% 0 0); --background: var(--neutral-0); --surface: var(--neutral-0); --surface-raised: var(--neutral-0); --surface-muted: var(--neutral-2); --foreground: var(--neutral-11); --text-secondary: var(--neutral-8); --text-muted: var(--neutral-7); --border: oklch(93.5% 0 0); --border-subtle: oklch(96.5% 0 0); --border-strong: oklch(82% 0 0); --accent: oklch(33% 0 0); --accent-strong: oklch(24% 0 0); --accent-subtle: oklch(33% 0 0 / .1); --accent-foreground: var(--background); /* Selection controls (switch, checkbox, radio, slider). --control-on fills a chosen control; --control-glyph is the check or dot drawn on it; thumbs stay white in both states so they always read against the track. Tuned per accent below so white thumbs hold on every hue. */ --control-on: oklch(23% 0 0); --control-glyph: oklch(100% 0 0); --control-track: oklch(89.5% 0 0); --control-track-hover: oklch(86% 0 0); --control-thumb: oklch(100% 0 0); --control-thumb-on: oklch(100% 0 0); --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .14), 0 2px 6px oklch(0% 0 0 / .06); --control-on-subtle: color-mix(in oklab, var(--control-on) 10%, transparent); /* Slider fills. Same as --control-on except neutral dark, where a mid grey keeps the white thumb distinct. */ --control-fill: var(--control-on); /* Product decision: no focus rings anywhere. Kept as a token so existing rules resolve to nothing. */ --focus-ring: transparent; --success: oklch(49% .19 150); --warning: oklch(58% .18 75); --danger: oklch(54% .21 25); --shadow-resting: 0 1px 2px oklch(0% 0 0 / .035); --shadow-raised: 0 6px 18px oklch(0% 0 0 / .065), 0 1px 3px oklch(0% 0 0 / .035); --shadow-floating: 0 20px 48px oklch(0% 0 0 / .105), 0 3px 10px oklch(0% 0 0 / .045); /* Brand gradient: soft lavender to warm peach. Light enough for dark text (--arc-gradient-foreground, >12:1). */ --arc-gradient-from: oklch(90% .045 300); --arc-gradient-to: oklch(92% .045 65); --arc-gradient: linear-gradient(100deg, var(--arc-gradient-from), var(--arc-gradient-to)); --arc-gradient-foreground: oklch(22% .01 300); /* Faint wash for backgrounds and tinted panels. */ --arc-gradient-soft: linear-gradient(135deg, oklch(97.5% .016 300), oklch(98% .016 65)); /* Hairline borders and rules. */ --arc-gradient-line: linear-gradient(100deg, oklch(83% .06 300), oklch(86% .06 65)); /* Text-safe stops for gradient text and small marks (>4.5:1 on the surface). */ --arc-gradient-ink: linear-gradient(100deg, oklch(47% .1 300), oklch(50% .09 55)); --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --radius-control: 1.125rem; --radius-panel: 1.625rem; --radius-surface: 2.125rem; --radius-pill: 9999px; --control-height-sm: 2.25rem; --control-height-md: 2.75rem; --control-height-lg: 3.125rem; /* NUESTRA tipografía, no la de Arc (Alex, 5-oct: «los elementos que te mando los haces idénticos, solo que con nuestra tipografía»). Arc pone Geist en los titulares; en Aiden eso es Sora. El cuerpo coincide: los dos usan Inter. Lo demás —tamaños, pesos 400/500, el interletraje— se queda como en Arc. */ --font-display: var(--font-sora, "Sora"), var(--font-geist, "Geist Variable"), sans-serif; --font-body: var(--font-inter, "Inter Variable"), sans-serif; --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3.25rem; --text-5xl: 4.5rem; --tracking-display: -.03em; --tracking-body: -.01em; --leading-display: 1.1; --leading-body: 1.4; --ease-enter: cubic-bezier(.16,1,.3,1); --ease-standard: cubic-bezier(.22,1,.36,1); --ease-exit: cubic-bezier(.7,0,.84,0); --ease-in-out: cubic-bezier(.65,0,.35,1); /* Spring with a gentle settle (bounce .15). Pair with --duration-spring for transform transitions. */ --ease-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1); --duration-instant: 120ms; --duration-fast: 160ms; --duration-standard: 240ms; --duration-considered: 480ms; --duration-spring: 580ms; --duration-exit: 180ms; /* Los TRES muelles de Arc (los de motion-tokens.ts: smooth, snappy, morph). El --ease-spring de arriba es el genérico de su CSS; estos son los que usan sus componentes en JS, y se generan desde kit/motion/motion.js, que el banco compara curva a curva con el paquete motion real. smooth: lo que informa de un estado, nunca se pasa. snappy: respuesta a una pulsación. morph: el realce que viaja de una opción a otra (su layoutId). */ --duration-smooth: 400ms; --ease-smooth: linear(0, 0.0229, 0.0788, 0.1532, 0.2361, 0.3208, 0.403, 0.4802, 0.5509, 0.6146, 0.6711, 0.7207, 0.7638, 0.801, 0.8329, 0.8601, 0.8832, 0.9027, 0.9191, 0.9329, 0.9445, 0.9541, 0.9621, 0.9688, 0.9743, 0.9789, 0.9827, 0.9858, 0.9884, 0.9905, 0.9922, 0.9936, 0.9948, 0.9958, 0.9965, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1); --duration-snappy: 260ms; --ease-snappy: linear(0, 0.0446, 0.1474, 0.2743, 0.4046, 0.526, 0.6327, 0.7224, 0.7952, 0.8527, 0.897, 0.9301, 0.9544, 0.9717, 0.9837, 0.9918, 0.997, 1.0001, 1.0019, 1.0027, 1.003, 1.0029, 1.0026, 1.0022, 1.0018, 1.0014, 1); --duration-morph: 420ms; --ease-morph: linear(0, 0.0193, 0.0686, 0.1373, 0.2172, 0.302, 0.3872, 0.4696, 0.5471, 0.6181, 0.6821, 0.7388, 0.7883, 0.8309, 0.8671, 0.8974, 0.9226, 0.9431, 0.9597, 0.9728, 0.983, 0.9909, 0.9967, 1.001, 1.0039, 1.0059, 1.007, 1.0076, 1.0077, 1.0075, 1.0071, 1.0066, 1.0059, 1.0053, 1.0046, 1.004, 1.0034, 1.0029, 1.0024, 1.0019, 1.0016, 1.0012, 1); /* El escalonado de Arc para listas y texto (total por debajo de ~400 ms). */ --stagger-item: 35ms; --stagger-line: 80ms; --stagger-word: 40ms; --stagger-char: 16ms; } :root[data-theme="dark"] { color-scheme: dark; --background: oklch(19% 0 0); --surface: oklch(21.5% 0 0); --surface-raised: oklch(24% 0 0); /* Keep muted surfaces and hover states distinct from the base surface in dark mode. */ --surface-muted: oklch(26% 0 0); --foreground: oklch(96% 0 0); --text-secondary: oklch(77% 0 0); --text-muted: oklch(64% 0 0); --border: oklch(29% 0 0); --border-subtle: oklch(25% 0 0); --border-strong: oklch(40% 0 0); --focus-ring: transparent; --accent: oklch(80% 0 0); --accent-strong: oklch(91% 0 0); --accent-subtle: oklch(80% 0 0 / .13); /* Neutral dark inverts: a near-white track carries a dark thumb, so on and off never read alike. */ --control-on: oklch(93% 0 0); --control-glyph: oklch(19% 0 0); --control-track: oklch(33% 0 0); --control-track-hover: oklch(37% 0 0); --control-thumb: oklch(97% 0 0); --control-thumb-on: oklch(19% 0 0); --control-fill: oklch(62% 0 0); --control-thumb-shadow: 0 0 0 .5px oklch(0% 0 0 / .3), 0 1px 2px oklch(0% 0 0 / .35), 0 2px 6px oklch(0% 0 0 / .2); --success: oklch(78% .18 150); --warning: oklch(83% .17 80); --danger: oklch(76% .2 25); --shadow-resting: 0 1px 2px oklch(0% 0 0 / .18); --shadow-raised: 0 8px 22px oklch(0% 0 0 / .22); --shadow-floating: 0 22px 55px oklch(0% 0 0 / .34); --arc-gradient-from: oklch(38% .05 300); --arc-gradient-to: oklch(40% .045 60); --arc-gradient-foreground: oklch(96% .005 300); --arc-gradient-soft: linear-gradient(135deg, oklch(23.5% .016 300), oklch(24% .014 65)); --arc-gradient-line: linear-gradient(100deg, oklch(48% .06 300), oklch(52% .055 65)); --arc-gradient-ink: linear-gradient(100deg, oklch(82% .07 300), oklch(86% .065 70)); } :root[data-accent="neutral"] { --accent: oklch(33% 0 0); --accent-strong: oklch(24% 0 0); --accent-subtle: oklch(33% 0 0 / .1); } :root[data-accent="violet"] { --accent: #7747ff; --accent-strong: #5528ce; --accent-subtle: rgb(119 71 255 / .13); } :root[data-accent="blue"] { --accent: #0562ef; --accent-strong: #074db7; --accent-subtle: rgb(5 98 239 / .12); } :root[data-accent="green"] { --accent: #0db879; --accent-strong: #087c54; --accent-subtle: rgb(13 184 121 / .13); --accent-foreground: #102016; } :root[data-accent="amber"] { --accent: #f3ad20; --accent-strong: #9c6300; --accent-subtle: rgb(243 173 32 / .16); --accent-foreground: #20190d; } :root[data-accent="orange"] { --accent: #f48120; --accent-strong: #aa4700; --accent-subtle: rgb(244 129 32 / .13); --accent-foreground: #17130f; } :root[data-accent="coral"] { --accent: #f15f55; --accent-strong: #b92c27; --accent-subtle: rgb(241 95 85 / .14); --accent-foreground: #21110f; } :root[data-accent="rose"] { --accent: #ed4e9d; --accent-strong: #ae2570; --accent-subtle: rgb(237 78 157 / .14); --accent-foreground: #250f1b; } :root[data-theme="dark"][data-accent="neutral"] { --accent: oklch(80% 0 0); --accent-strong: oklch(91% 0 0); --accent-subtle: oklch(80% 0 0 / .13); } :root[data-theme="dark"][data-accent="violet"] { --accent: #a78bff; --accent-strong: #c7b7ff; --accent-subtle: rgb(119 71 255 / .22); } :root[data-theme="dark"][data-accent="blue"] { --accent: #6ba3ff; --accent-strong: #a4c7ff; --accent-subtle: rgb(5 98 239 / .22); } :root[data-theme="dark"][data-accent="green"] { --accent: #53dca6; --accent-strong: #93efd0; --accent-subtle: rgb(13 184 121 / .2); } :root[data-theme="dark"][data-accent="amber"] { --accent: #ffcb62; --accent-strong: #ffe0a1; --accent-subtle: rgb(243 173 32 / .2); } :root[data-theme="dark"][data-accent="orange"] { --accent: #ffad5e; --accent-strong: #ffd0a0; --accent-subtle: rgb(244 129 32 / .2); --accent-foreground: #17130f; } :root[data-theme="dark"][data-accent="coral"] { --accent: #ff9386; --accent-strong: #ffc1ba; --accent-subtle: rgb(241 95 85 / .2); } :root[data-theme="dark"][data-accent="rose"] { --accent: #ff8bc5; --accent-strong: #ffc0df; --accent-subtle: rgb(237 78 157 / .2); } /* Selection control fills per accent. Light: the accent, deepened slightly where a white thumb needs it. Dark: a mid tone instead of the pastel text accent, so white thumbs and checks keep contrast without a neon track. Amber keeps a dark glyph because white on yellow washes out. */ :root[data-accent="neutral"] { --control-on: oklch(23% 0 0); --control-thumb-on: oklch(100% 0 0); --control-glyph: oklch(100% 0 0); } :root[data-accent="violet"] { --control-on: #7747ff; --control-thumb-on: #fff; --control-glyph: #fff; } :root[data-accent="blue"] { --control-on: #0562ef; --control-thumb-on: #fff; --control-glyph: #fff; } :root[data-accent="green"] { --control-on: #10a870; --control-thumb-on: #fff; --control-glyph: #fff; } :root[data-accent="amber"] { --control-on: #eda11a; --control-thumb-on: #fff; --control-glyph: #2a1c03; } :root[data-accent="orange"] { --control-on: #f07818; --control-thumb-on: #fff; --control-glyph: #fff; } :root[data-accent="coral"] { --control-on: #ec564b; --control-thumb-on: #fff; --control-glyph: #fff; } :root[data-accent="rose"] { --control-on: #e64494; --control-thumb-on: #fff; --control-glyph: #fff; } :root[data-theme="dark"][data-accent="neutral"] { --control-on: oklch(93% 0 0); --control-thumb-on: oklch(19% 0 0); --control-glyph: oklch(19% 0 0); } :root[data-theme="dark"][data-accent="violet"] { --control-on: #8a66ff; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #8a66ff; } :root[data-theme="dark"][data-accent="blue"] { --control-on: #3b82f6; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #3b82f6; } :root[data-theme="dark"][data-accent="green"] { --control-on: #1fae78; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #1fae78; } :root[data-theme="dark"][data-accent="amber"] { --control-on: #e8a52a; --control-thumb-on: #fff; --control-glyph: #241803; --control-fill: #e8a52a; } :root[data-theme="dark"][data-accent="orange"] { --control-on: #ef873a; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ef873a; } :root[data-theme="dark"][data-accent="coral"] { --control-on: #ec6a60; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #ec6a60; } :root[data-theme="dark"][data-accent="rose"] { --control-on: #e457a0; --control-thumb-on: #fff; --control-glyph: #fff; --control-fill: #e457a0; } /* Chart series palette, shared by every chart. Series 1 is the accent itself; series 2 to 4 rotate its hue at lightness steps around it, so they stay distinct for every accent. A neutral accent falls back to a blue. Validated with the dataviz script across all eight accents in both themes: every pair (not only neighbours) clears CVD ΔE 9 and normal vision ΔE 17. Browsers without relative color get the neutral set. Override --series-1 to --series-4 on any element to rebrand a chart. */ :root { --series-1: #1f7dcf; --series-2: #7128a5; --series-3: #e58f00; --series-4: #009e84; } :root[data-theme="dark"] { --series-1: #55adff; --series-2: #9c37be; --series-3: #e66e00; --series-4: #00a861; } @supports (color: oklch(from red clamp(.4, l * sign(max(c - .02, 0)) + .5, .8) c h)) { :root { --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))))); --series-2: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) - 0.25, .76) .19 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 57)); --series-3: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))) + 0.14, .76) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 184)); --series-4: oklch(from var(--accent) clamp(.45, l * sign(max(c - .02, 0)) + .58 * (1 - sign(max(c - .02, 0))), .76) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 292)); } :root[data-theme="dark"] { --series-1: oklch(from var(--accent) calc(l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0)))) calc(c * sign(max(c - .02, 0)) + .15 * (1 - sign(max(c - .02, 0)))) calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))))); --series-2: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.19, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 66)); --series-3: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) + 0.02, .665) .21 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 175)); --series-4: oklch(from var(--accent) clamp(.485, l * sign(max(c - .02, 0)) + .73 * (1 - sign(max(c - .02, 0))) - 0.1, .665) .18 calc(h * sign(max(c - .02, 0)) + 250 * (1 - sign(max(c - .02, 0))) + 270)); } } /* No focus rings or outlines for any input method (product decision). * En el portal de soporte va acotado al componente de Arc (como en Startup, a .aiden-wrap, y como * los bloques del kit): suelto en la raíz y con !important borraba el foco de teclado de todo el * portal (enlaces, campos y el botón Entrar de .ahc), que conserva el suyo. El