/* ============================================================================= * Orient — Design Tokens * * Variables base del sistema de marca. Vienen directamente de * docs/brand-system.md y son la unica fuente de verdad para colores, tipografia, * radios, sombras, easings y duraciones. * * Nunca hardcodear estos valores en componentes — siempre usar la variable * (var(--token-name)). Si se necesita un valor que no existe aqui, agregarlo * primero al brand-system y luego al token correspondiente. * * S24: el modo oscuro fue removido. La estetica joyeria es fija en claro. * * @author Delinger * ============================================================================= */ :root { /* --------------------------------------------------------------------------- * 1. Colores de marca * ------------------------------------------------------------------------- */ --color-orient-gold: #9A7D2B; /* dorado principal de marca */ --color-orient-gray: #A5A7A9; /* gris neutro de marca */ --color-orient-dark: #000000; /* negro tipografico */ --color-orient-light: #F8F4EF; /* crema calida */ --color-orient-accent: #E8C882; /* dorado vivo del logo y momentos premium */ /* Alias semantico para texto/fondos "ink" (negro tipografico). Usado en botones primarios y CTAs. Existe como token aparte por si en modo dark queremos invertirlo a blanco sin tocar todos los call sites. */ --color-ink-900: var(--color-orient-dark); /* --------------------------------------------------------------------------- * 2. Paleta de sistema (semantica) * Tomada de iOS/macOS. Usar SOLO para estados, no decorativos. * ------------------------------------------------------------------------- */ --system-blue: #007AFF; --system-indigo: #5856D6; --system-teal: #30B0C0; --system-green: #34C759; --system-orange: #FF9500; --system-red: #FF3B30; --system-yellow: #FFCC00; --system-pink: #FF2D55; /* --------------------------------------------------------------------------- * 3. Escala de grises Apple * ------------------------------------------------------------------------- */ --gray-1: #8E8E93; --gray-2: #AEAEB2; --gray-3: #C7C7CC; --gray-4: #D1D1D6; --gray-5: #E5E5EA; --gray-6: #F2F2F7; /* --------------------------------------------------------------------------- * 4. Jerarquia de fondos (light) * ------------------------------------------------------------------------- */ --bg-canvas: #F5F5F7; /* capa base del documento */ --bg-surface: #FFFFFF; /* cards, popovers */ --bg-secondary: #F2F2F7; /* areas secundarias */ --bg-tertiary: rgba(118, 118, 128, 0.08); /* hover states sutiles */ /* --------------------------------------------------------------------------- * 5. Jerarquia de texto (light) * Cuatro niveles de opacidad — usar segun importancia, no oscurecer manual. * ------------------------------------------------------------------------- */ --fg-primary: rgba(15, 15, 20, 1.00); --fg-secondary: rgba(60, 60, 67, 0.82); /* +0.04 — refuerzo de contraste WCAG AA */ --fg-tertiary: rgba(60, 60, 67, 0.64); /* +0.08 — contraste 4.6:1 sobre marmol */ --fg-quaternary: rgba(60, 60, 67, 0.40); /* +0.08 — limite UI deshabilitada */ /* --------------------------------------------------------------------------- * 6. Tints de acento dorado * Variantes translucidas del Orient Gold para fondos sutiles. * ------------------------------------------------------------------------- */ --gold-soft: rgba(154, 125, 43, 0.10); --gold-medium: rgba(154, 125, 43, 0.20); --gold-strong: rgba(154, 125, 43, 0.45); /* --------------------------------------------------------------------------- * 7. Materiales Liquid Glass (light) — push S6 hacia look WWDC25 / Sequoia ultra * Valores mas opacos en regular y un blur mas pronunciado para que * el material lea como "vidrio" sin perder lo translucido. * ------------------------------------------------------------------------- */ /* S20: liquid glass mas notorio (pedido Carlos con ejemplo de pildora con fondo azul cielo brillante atras). Bajamos opacidad base + subimos blur + borde mas luminoso para que el material se lea como vidrio real. */ --glass-regular: rgba(255, 255, 255, 0.14); --glass-thick: rgba(255, 255, 255, 0.34); --glass-thin: rgba(255, 255, 255, 0.08); --glass-clear: rgba(255, 255, 255, 0.08); --glass-tinted: rgba(154, 125, 43, 0.14); --glass-border: rgba(255, 255, 255, 0.80); /* borde brillante tipo apple liquid glass */ --glass-stroke: rgba(255, 255, 255, 0.92); --glass-chrome: rgba(255, 255, 255, 0.42); /* chrome de aplicacion (sidebar/topbar) */ /* --------------------------------------------------------------------------- * 8. Niveles de blur — S20: subidos para que el efecto sea mas evidente * ------------------------------------------------------------------------- */ --blur-glass-thin: blur(18px) saturate(180%); --blur-glass: blur(36px) saturate(200%); --blur-glass-thick: blur(48px) saturate(200%); --blur-chrome: blur(40px) saturate(180%); /* --------------------------------------------------------------------------- * 9. Sistema de sombras (light) — sombras mas extendidas + inset highlight * El inset 0 1px 0 0 rgba(255,255,255,0.9) es el highlight superior * tipo Apple WWDC25 — refleja la luz que entra por arriba de la card. * ------------------------------------------------------------------------- */ --shadow-glass-sm: 0 1px 2px rgba(15, 15, 20, 0.04), 0 4px 12px rgba(15, 15, 20, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.65); --shadow-glass-md: 0 2px 6px rgba(15, 15, 20, 0.06), 0 12px 32px rgba(15, 15, 20, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.80), inset 0 0 0 1px rgba(255, 255, 255, 0.35); --shadow-glass-lg: 0 6px 12px rgba(15, 15, 20, 0.08), 0 24px 64px rgba(15, 15, 20, 0.14), inset 0 1px 0 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.40); --shadow-glass-xl: 0 12px 24px rgba(15, 15, 20, 0.10), 0 40px 100px rgba(15, 15, 20, 0.22), inset 0 1px 0 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.40); /* --------------------------------------------------------------------------- * 10. Radios concentricos * Regla: hijos siempre con radio MENOR que su contenedor. * ------------------------------------------------------------------------- */ --radius: 0.875rem; /* 14px — base del sistema */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 26px; --radius-3xl: 32px; --radius-4xl: 40px; /* --------------------------------------------------------------------------- * 11. Movimiento — easings (spring) * ------------------------------------------------------------------------- */ --ease-spring-soft: cubic-bezier(0.16, 1, 0.30, 1); --ease-spring-snap: cubic-bezier(0.17, 0.67, 0.12, 0.96); --ease-spring-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1); /* --------------------------------------------------------------------------- * 12. Movimiento — duraciones * ------------------------------------------------------------------------- */ --dur-press: 120ms; --dur-snap: 180ms; --dur-smooth: 280ms; --dur-sheet: 360ms; /* --------------------------------------------------------------------------- * 13. Tipografia — stacks * * Stack premium tipo tech-luxury: Space Grotesk para display (geometrico * con caracter), Plus Jakarta Sans para UI/body (variable, neutro premium), * JetBrains Mono para datos (mas legible que IBM Plex en cifras pequenas). * * Decision tomada en S5.5 tras rechazar Cormorant Garamond — la direccion * boutique-romantica del serif clasico no encajaba con el target del cliente. * El nuevo eje es tech-premium con identidad de marca (gris-dorado-negro). * ------------------------------------------------------------------------- */ --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, monospace; /* --------------------------------------------------------------------------- * 14. Acentos derivados de la paleta (gris-dorado-negro) * El Orient Gray del logo gana protagonismo como neutro de marca. * ------------------------------------------------------------------------- */ --gray-soft: rgba(165, 167, 169, 0.10); /* Orient Gray @ 10% */ --gray-medium: rgba(165, 167, 169, 0.25); /* Orient Gray @ 25% */ --gray-strong: rgba(165, 167, 169, 0.55); /* Orient Gray @ 55% */ } /* ============================================================================= * Accesibilidad — preferencias del sistema operativo. * ============================================================================= */ /* Liquid Glass forzado SIEMPRE (decision S6 del cliente). Originalmente respetabamos `prefers-reduced-transparency: reduce` cayendo a `--bg-surface` solido, pero la regla de marca pide glass uniforme. Si en el futuro hay que reactivar la deferencia a a11y, restaurar el bloque `@media (prefers-reduced-transparency: reduce)` que estaba aqui. */ /* Usuarios con preferencia de menos movimiento: animaciones instantaneas. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }