/* ========================================================================== AUSTRAL DESIGN SYSTEM — tokens.css Base BLANCO Y NEGRO (neutros puros, sin tinte) + ACENTO INTERCAMBIABLE. El acento del panel se elige con [data-accent] en : (sin atributo) | "grafito" → B&N puro (default, estilo admin3) "cobre" | "carmenere" | "bosque" | "indigo" Cada acento define su mini-ramp --au-accent-*; todos los tokens semánticos (primary, link, focus, chart-mono, soft) derivan de ella — los componentes no saben qué acento está activo. Contraste verificado por scripts/contrast-check.js (todos los acentos, ambos temas). Breakpoints: sm 480 · md 768 · lg 1024 · xl 1440. ========================================================================== */ :root { /* ---------- PRIMITIVOS: neutros puros (sin croma) ---------- */ --au-neutral-0: #FFFFFF; --au-neutral-50: #FAFAFA; --au-neutral-100: #F4F4F5; --au-neutral-200: #E5E5E8; --au-neutral-300: #D2D2D7; --au-neutral-400: #84848E; --au-neutral-500: #6A6A74; --au-neutral-600: #515158; --au-neutral-700: #3D3D43; --au-neutral-800: #26262B; --au-neutral-900: #17171A; --au-neutral-950: #0B0B0D; /* ---------- PRIMITIVOS: estados (uso chico: badges, alertas, deltas) ---- */ --au-bosque-100: #DCF2E4; --au-bosque-300: #86DBAA; --au-bosque-400: #4FC382; --au-bosque-500: #22A05B; --au-bosque-600: #15803D; --au-bosque-700: #116932; --au-espino-100: #FBEFD3; --au-espino-400: #E8A317; --au-espino-500: #C77F06; --au-espino-700: #8A5A03; --au-espino-800: #6E4802; --au-copihue-100: #FBE3E3; --au-copihue-300: #F2A2A2; --au-copihue-400: #E76A6A; --au-copihue-500: #D64545; --au-copihue-600: #BB2D2D; --au-copihue-700: #9E2424; --au-cielo-100: #DFEAFB; --au-cielo-400: #6D9EE8; --au-cielo-600: #2563EB; --au-cielo-700: #1D4FD7; /* ---------- ACENTO: Grafito (default — panel B&N) ---------- */ --au-accent-200: #E4E4E8; --au-accent-300: #C9C9CF; --au-accent-400: #A0A0A8; --au-accent-600: #18181B; --au-accent-700: #0B0B0D; --au-accent-800: #000000; /* ---------- SEMÁNTICOS: modo claro ---------- */ --au-bg: #EFEFF1; --au-surface: var(--au-neutral-0); --au-surface-raised: var(--au-neutral-0); --au-surface-sunken: var(--au-neutral-100); --au-border: var(--au-neutral-200); --au-border-strong: var(--au-neutral-400); --au-text: var(--au-neutral-900); --au-text-muted: var(--au-neutral-600); --au-text-subtle: var(--au-neutral-500); --au-text-disabled: var(--au-neutral-400); --au-text-inverse: var(--au-neutral-0); /* Derivados del acento — no tocar por componente */ --au-primary: var(--au-accent-600); --au-primary-hover: var(--au-accent-700); --au-primary-active: var(--au-accent-800); --au-on-primary: #FFFFFF; --au-primary-soft: color-mix(in srgb, var(--au-accent-600) 9%, #FFFFFF); --au-primary-soft-text: color-mix(in srgb, var(--au-accent-600) 62%, #000000); --au-link: var(--au-accent-600); --au-link-hover: var(--au-accent-700); --au-focus-ring: var(--au-accent-600); --au-shadow-primary: 0 4px 14px -4px color-mix(in srgb, var(--au-accent-600) 40%, transparent); --au-success: var(--au-bosque-600); --au-success-soft: var(--au-bosque-100); --au-success-soft-text: var(--au-bosque-700); --au-warning: var(--au-espino-700); --au-warning-accent: var(--au-espino-400); --au-warning-soft: var(--au-espino-100); --au-warning-soft-text: var(--au-espino-800); --au-danger: var(--au-copihue-600); --au-danger-solid: var(--au-copihue-600); --au-danger-solid-hover: var(--au-copihue-700); --au-on-danger: #FFFFFF; --au-danger-soft: var(--au-copihue-100); --au-danger-soft-text: var(--au-copihue-700); --au-info: var(--au-cielo-700); --au-info-soft: var(--au-cielo-100); --au-info-soft-text: var(--au-cielo-700); --au-scrim: rgb(11 11 13 / 0.55); --au-hover-overlay: rgb(11 11 13 / 0.05); --au-contrast: var(--au-neutral-950); --au-on-contrast: #FFFFFF; /* Gráficos monocromos — default del sistema: tints del ACENTO activo. Trazo (sólido/punteado) como segunda codificación. Máx. 4 pasos. */ --au-chart-mono-1: var(--au-accent-600); --au-chart-mono-2: var(--au-accent-400); --au-chart-mono-3: var(--au-accent-300); --au-chart-mono-4: var(--au-accent-200); /* Gráficos categóricos — SOLO entidades distintas; orden fijo, CVD-validada */ --au-chart-1: #0080AC; --au-chart-2: #C15905; --au-chart-3: #7752C9; --au-chart-4: #BB2E63; --au-chart-5: #8F6A00; --au-chart-6: #3A66D4; --au-chart-grid: var(--au-neutral-200); /* ---------- TIPOGRAFÍA (tres voces) ---------- */ --au-font-display: "Crimson Pro", Georgia, "Times New Roman", serif; --au-font-sans: "Public Sans", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --au-font-ui: "Inter", "Public Sans", system-ui, "Segoe UI", sans-serif; --au-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", monospace; --au-fs-xs: 0.75rem; --au-fs-sm: 0.875rem; --au-fs-md: 1rem; --au-fs-lg: 1.125rem; --au-fs-xl: 1.25rem; --au-fs-2xl: 1.5rem; --au-fs-3xl: 1.875rem; --au-fs-4xl: 2.375rem; --au-lh-tight: 1.2; --au-lh-snug: 1.35; --au-lh-normal: 1.55; --au-lh-relaxed: 1.7; --au-fw-regular: 400; --au-fw-medium: 500; --au-fw-semibold: 600; --au-fw-bold: 700; --au-tracking-tight: -0.011em; --au-tracking-display: -0.006em; --au-tracking-caps: 0.06em; /* ---------- ESPACIADO (base 4px) ---------- */ --au-space-1: 0.25rem; --au-space-2: 0.5rem; --au-space-3: 0.75rem; --au-space-4: 1rem; --au-space-5: 1.25rem; --au-space-6: 1.5rem; --au-space-7: 2rem; --au-space-8: 2.5rem; --au-space-9: 3rem; --au-space-10: 4rem; /* ---------- RADIOS ---------- */ --au-radius-sm: 8px; --au-radius-md: 12px; --au-radius-lg: 16px; --au-radius-xl: 24px; --au-radius-full: 9999px; /* ---------- ELEVACIÓN ---------- */ --au-shadow-sm: 0 1px 2px rgb(11 11 13 / 0.04), 0 1px 1px rgb(11 11 13 / 0.03); --au-shadow-md: 0 4px 12px -2px rgb(11 11 13 / 0.08), 0 2px 4px -2px rgb(11 11 13 / 0.04); --au-shadow-lg: 0 12px 32px -8px rgb(11 11 13 / 0.14), 0 4px 8px -4px rgb(11 11 13 / 0.06); --au-shadow-xl: 0 24px 64px -16px rgb(11 11 13 / 0.22); --au-surface-glass: rgb(255 255 255 / 0.72); --au-surface-highlight: transparent; /* ---------- MOTION ---------- */ --au-dur-fast: 120ms; --au-dur-base: 180ms; --au-dur-slow: 260ms; --au-dur-slower: 400ms; --au-ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --au-ease-exit: cubic-bezier(0.55, 0.06, 0.68, 0.19); --au-ease-move: cubic-bezier(0.45, 0.05, 0.35, 1); --au-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* rebote sutil: switches, knobs, pops */ /* ---------- Z-INDEX ---------- */ --au-z-dropdown: 1000; --au-z-sticky: 1020; --au-z-drawer: 1030; --au-z-backdrop: 1040; --au-z-modal: 1050; --au-z-popover: 1060; --au-z-toast: 1070; --au-z-tooltip: 1080; /* ---------- TAMAÑOS ---------- */ --au-control-h-sm: 32px; --au-control-h-md: 40px; --au-control-h-lg: 48px; --au-touch-target: 44px; --au-icon-sm: 16px; --au-icon-md: 20px; --au-icon-lg: 24px; --au-container: 1200px; --au-sidebar-w: 264px; --au-measure: 68ch; color-scheme: light; } /* ========================================================================== ACENTO — Austral es GRAFITO (B&N puro): la mini-ramp del :root es la única. La arquitectura queda preparada para un acento de marca futuro: definir un bloque [data-accent="marca"] con los 6 pasos (600 acción ≥4.5:1 con blanco; 700/800 hover/active; 400 links/focus dark; 300/200 tints de gráficos), agregarlo a ACCENTS en scripts/contrast-check.js y correr el validador. ========================================================================== */ [data-accent="grafito"] { /* alias explícito del default */ --au-accent-200: #E4E4E8; --au-accent-300: #C9C9CF; --au-accent-400: #A0A0A8; --au-accent-600: #18181B; --au-accent-700: #0B0B0D; --au-accent-800: #000000; } /* ========================================================================== MODO OSCURO — neutros puros; elevación por luz. El acento sube a 400 para texto/links; los botones conservan 600 (blanco encima ≥4.5 en todos los acentos de color). Grafito invierte primary a blanco (ver abajo). ========================================================================== */ [data-theme="dark"] { --au-bg: #101012; --au-surface: #17171A; --au-surface-raised: #1F1F23; --au-surface-sunken: #121215; --au-border: #2A2A2F; --au-border-strong: #6F6F79; --au-text: #EDEDEF; --au-text-muted: #ACACB4; --au-text-subtle: #85858E; --au-text-disabled: #5C5C64; --au-text-inverse: var(--au-neutral-900); --au-primary-soft: color-mix(in srgb, var(--au-accent-600) 24%, #101012); --au-primary-soft-text: var(--au-accent-200); --au-link: var(--au-accent-400); --au-link-hover: var(--au-accent-300); --au-focus-ring: var(--au-accent-400); --au-success: var(--au-bosque-400); --au-success-soft: #122A1D; --au-success-soft-text: var(--au-bosque-300); --au-warning: var(--au-espino-400); --au-warning-accent: var(--au-espino-400); --au-warning-soft: #2C2410; --au-warning-soft-text: #EDBE6A; --au-danger: var(--au-copihue-400); --au-danger-solid: var(--au-copihue-600); --au-danger-solid-hover: var(--au-copihue-700); --au-danger-soft: #321818; --au-danger-soft-text: var(--au-copihue-300); --au-info: var(--au-cielo-400); --au-info-soft: #171F30; --au-info-soft-text: var(--au-cielo-400); --au-scrim: rgb(0 0 0 / 0.6); --au-hover-overlay: rgb(237 237 239 / 0.06); --au-contrast: #FFFFFF; --au-on-contrast: var(--au-neutral-900); --au-chart-mono-1: var(--au-accent-400); --au-chart-mono-2: var(--au-accent-200); --au-chart-mono-3: var(--au-accent-300); --au-chart-mono-4: color-mix(in srgb, var(--au-accent-400) 45%, #101012); --au-chart-1: #2596BE; --au-chart-2: #D9722A; --au-chart-3: #9678DE; --au-chart-4: #D9548A; --au-chart-5: #B18E1F; --au-chart-6: #5E87E0; --au-chart-grid: #2A2A2F; --au-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); --au-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.3); --au-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.35); --au-shadow-xl: 0 24px 64px -16px rgb(0 0 0 / 0.65); --au-surface-glass: rgb(23 23 26 / 0.72); --au-surface-highlight: rgb(255 255 255 / 0.05); color-scheme: dark; } /* Grafito en dark: un botón negro sería invisible — primary se invierte a blanco */ [data-theme="dark"]:not([data-accent]), [data-theme="dark"][data-accent="grafito"] { --au-primary: #FFFFFF; --au-primary-hover: #E4E4E8; --au-primary-active: #C9C9CF; --au-on-primary: var(--au-neutral-900); --au-shadow-primary: 0 4px 14px -4px rgb(0 0 0 / 0.5); } /* Respeta la preferencia del sistema cuando la app no fuerza tema. (Espejo del bloque [data-theme="dark"] — mantener sincronizados.) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --au-bg: #101012; --au-surface: #17171A; --au-surface-raised: #1F1F23; --au-surface-sunken: #121215; --au-border: #2A2A2F; --au-border-strong: #6F6F79; --au-text: #EDEDEF; --au-text-muted: #ACACB4; --au-text-subtle: #85858E; --au-text-disabled: #5C5C64; --au-text-inverse: var(--au-neutral-900); --au-primary-soft: color-mix(in srgb, var(--au-accent-600) 24%, #101012); --au-primary-soft-text: var(--au-accent-200); --au-link: var(--au-accent-400); --au-link-hover: var(--au-accent-300); --au-focus-ring: var(--au-accent-400); --au-success: var(--au-bosque-400); --au-success-soft: #122A1D; --au-success-soft-text: var(--au-bosque-300); --au-warning: var(--au-espino-400); --au-warning-accent: var(--au-espino-400); --au-warning-soft: #2C2410; --au-warning-soft-text: #EDBE6A; --au-danger: var(--au-copihue-400); --au-danger-solid: var(--au-copihue-600); --au-danger-solid-hover: var(--au-copihue-700); --au-danger-soft: #321818; --au-danger-soft-text: var(--au-copihue-300); --au-info: var(--au-cielo-400); --au-info-soft: #171F30; --au-info-soft-text: var(--au-cielo-400); --au-scrim: rgb(0 0 0 / 0.6); --au-hover-overlay: rgb(237 237 239 / 0.06); --au-contrast: #FFFFFF; --au-on-contrast: var(--au-neutral-900); --au-chart-mono-1: var(--au-accent-400); --au-chart-mono-2: var(--au-accent-200); --au-chart-mono-3: var(--au-accent-300); --au-chart-mono-4: color-mix(in srgb, var(--au-accent-400) 45%, #101012); --au-chart-1: #2596BE; --au-chart-2: #D9722A; --au-chart-3: #9678DE; --au-chart-4: #D9548A; --au-chart-5: #B18E1F; --au-chart-6: #5E87E0; --au-chart-grid: #2A2A2F; --au-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); --au-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.3); --au-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.35); --au-shadow-xl: 0 24px 64px -16px rgb(0 0 0 / 0.65); --au-surface-glass: rgb(23 23 26 / 0.72); --au-surface-highlight: rgb(255 255 255 / 0.05); color-scheme: dark; } :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-accent]), :root:not([data-theme="light"]):not([data-theme="dark"])[data-accent="grafito"] { --au-primary: #FFFFFF; --au-primary-hover: #E4E4E8; --au-primary-active: #C9C9CF; --au-on-primary: var(--au-neutral-900); --au-shadow-primary: 0 4px 14px -4px rgb(0 0 0 / 0.5); } }