/* ========================================================= ASISTIDA DESIGN TOKENS Fuente oficial de valores visuales reutilizables. No contiene estilos específicos de páginas. ========================================================= */ /* Inter autoalojada (variable font, subset latin, peso 400-700) — sin esto --as-font-sans caía siempre en el fallback del sistema (Segoe UI/San Francisco) porque Inter nunca se descargaba. Autoalojar evita depender de una CDN externa en cada carga, lo cual además es más apropiado para la PWA instalable prevista en CLAUDE.md (funciona sin red una vez cacheada). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../assets/fonts/Inter-Variable.woff2") format("woff2"); } :root { /* ======================================================= BRAND ======================================================= */ --as-brand-50: #fff7ed; --as-brand-100: #ffedd5; --as-brand-200: #fed7aa; --as-brand-300: #fdba74; --as-brand-400: #fb923c; --as-brand-500: #f97316; --as-brand-600: #ea580c; --as-brand-700: #c2410c; --as-brand-800: #9a3412; --as-brand-900: #7c2d12; --as-brand-primary: var(--as-brand-500); --as-brand-hover: var(--as-brand-600); --as-brand-active: var(--as-brand-700); --as-brand-gradient: linear-gradient( 135deg, #f59e0b 0%, #f97316 52%, #ea580c 100% ); /* ======================================================= NAVY / INK ======================================================= */ --as-navy-950: #0b1220; --as-navy-900: #0f172a; --as-navy-800: #1e293b; --as-navy-700: #334155; --as-navy-600: #475569; --as-ink-primary: var(--as-navy-900); --as-ink-secondary: var(--as-navy-700); --as-ink-muted: var(--as-navy-600); /* ======================================================= NEUTRALS / SURFACES ======================================================= */ --as-white: #ffffff; --as-gray-25: #fcfcfd; --as-gray-50: #f8fafc; --as-gray-100: #f1f5f9; --as-gray-200: #e2e8f0; --as-gray-300: #cbd5e1; --as-gray-400: #94a3b8; --as-gray-500: #64748b; --as-gray-600: #475569; --as-gray-700: #334155; --as-bg-app: #f7f8fa; --as-bg-subtle: #fafbfc; --as-surface: #ffffff; --as-surface-secondary: #f8fafc; --as-surface-hover: #f4f6f8; --as-border-subtle: #e8ebef; --as-border-default: #dde2e7; --as-border-strong: #cbd5e1; /* ======================================================= TEXT ======================================================= */ --as-text-primary: #0f172a; --as-text-secondary: #475569; --as-text-muted: #64748b; --as-text-placeholder: #94a3b8; --as-text-disabled: #a8b1bd; --as-text-inverse: #ffffff; /* ======================================================= SEMANTIC COLORS ======================================================= */ /* Success */ --as-success-50: #ecfdf5; --as-success-100: #d1fae5; --as-success-500: #10b981; --as-success-600: #059669; --as-success-700: #047857; /* Danger */ --as-danger-50: #fff1f2; --as-danger-100: #ffe4e6; --as-danger-500: #f43f5e; --as-danger-600: #e11d48; --as-danger-700: #be123c; /* Warning */ --as-warning-50: #fffbeb; --as-warning-100: #fef3c7; --as-warning-500: #f59e0b; --as-warning-600: #d97706; /* Information */ --as-info-50: #eff6ff; --as-info-100: #dbeafe; --as-info-500: #3b82f6; --as-info-600: #2563eb; /* ======================================================= TYPOGRAPHY ======================================================= */ --as-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --as-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --as-font-size-xs: 0.75rem; --as-font-size-sm: 0.875rem; --as-font-size-base: 1rem; --as-font-size-md: 1.0625rem; --as-font-size-lg: 1.125rem; --as-font-size-xl: 1.25rem; --as-font-size-2xl: 1.5rem; --as-font-size-3xl: 1.875rem; --as-font-size-4xl: 2.25rem; --as-font-weight-regular: 400; --as-font-weight-medium: 500; --as-font-weight-semibold: 600; --as-font-weight-bold: 700; --as-line-height-tight: 1.2; --as-line-height-heading: 1.3; --as-line-height-normal: 1.5; --as-line-height-relaxed: 1.65; /* ======================================================= SPACING Base: 4px ======================================================= */ --as-space-0: 0; --as-space-1: 0.25rem; --as-space-2: 0.5rem; --as-space-3: 0.75rem; --as-space-4: 1rem; --as-space-5: 1.25rem; --as-space-6: 1.5rem; --as-space-8: 2rem; --as-space-10: 2.5rem; --as-space-12: 3rem; --as-space-16: 4rem; /* ======================================================= BORDER RADIUS ======================================================= */ --as-radius-xs: 6px; --as-radius-sm: 8px; --as-radius-md: 12px; --as-radius-lg: 16px; --as-radius-xl: 20px; --as-radius-pill: 9999px; /* ======================================================= SHADOWS ======================================================= */ --as-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --as-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06); --as-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --as-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10); --as-shadow-brand: 0 6px 16px rgba(249, 115, 22, 0.22); /* ======================================================= COMPONENT HEIGHTS ======================================================= */ --as-control-sm: 32px; --as-control-md: 40px; --as-control-lg: 46px; --as-button-sm: 34px; --as-button-md: 40px; --as-button-lg: 46px; /* ======================================================= ICONOGRAPHY ======================================================= */ --as-icon-xs: 14px; --as-icon-sm: 16px; --as-icon-md: 20px; --as-icon-lg: 24px; --as-icon-xl: 32px; --as-icon-container-sm: 32px; --as-icon-container-md: 40px; --as-icon-container-lg: 48px; /* BLOQUE K1 — grosor de trazo único para la iconografía duotono geométrica (ver docs/design/DESIGN.md §5). 1.8 ya era, de lejos, el valor más usado en la app antes de tokenizarlo (auditoría Bloque K). */ --as-icon-stroke-width: 1.8; /* ======================================================= LAYOUT ======================================================= */ --as-sidebar-width: 260px; --as-sidebar-collapsed-width: 72px; --as-topbar-height: 64px; --as-content-max-width: 1600px; --as-page-padding-desktop: 28px; --as-page-padding-tablet: 20px; --as-page-padding-mobile: 16px; /* ======================================================= TABLES ======================================================= */ --as-table-row-height: 52px; --as-table-header-height: 44px; --as-table-cell-x: 16px; --as-table-cell-y: 10px; /* ======================================================= MOTION ======================================================= */ --as-duration-fast: 120ms; --as-duration-normal: 180ms; --as-duration-slow: 260ms; --as-ease-standard: cubic-bezier(0.2, 0, 0, 1); --as-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* ======================================================= FOCUS ======================================================= */ --as-focus-ring: 0 0 0 3px rgba(249, 115, 22, 0.18); --as-focus-border: #f97316; /* ======================================================= OVERLAYS ======================================================= */ --as-overlay: rgba(15, 23, 42, 0.42); /* ======================================================= Z-INDEX ======================================================= */ --as-z-base: 0; --as-z-dropdown: 100; --as-z-sticky: 200; --as-z-sidebar: 300; --as-z-overlay: 400; --as-z-modal: 500; --as-z-toast: 600; }