/* * AUTEXOPEN UI Theme Tokens * Version: 1.0 ยท 2026-09-15 * * Reusable Dark / Light theme variables for AUTEXOPEN digital products. * Source of semantic rules: AO_UI_Theme_Tokens.md * Brand source: AO - Guia_de_Marca.md * * Usage: * or * * This file intentionally exposes tokens only; it does not force an app layout. */ :root { /* Official brand constants */ --ao-brand-blue: #00263A; --ao-brand-orange: #EE7C17; --ao-brand-cyan: #00E7FF; --ao-brand-bone: #F8F4E8; --ao-brand-gray: #4A4949; --ao-brand-black: #000000; /* Typography */ --ao-font-display: "Montserrat", "Poppins", Arial, sans-serif; --ao-font-body: "Poppins", "Open Sans", Arial, sans-serif; /* Geometry */ --ao-radius-sm: 8px; --ao-radius-md: 12px; --ao-radius-lg: 18px; --ao-shadow-soft: 0 8px 24px rgba(0, 38, 58, 0.08); color-scheme: dark; } :root, [data-theme="dark"] { color-scheme: dark; --ao-bg-app: #00263A; --ao-bg-sidebar: #00263A; --ao-bg-hero: #00263A; --ao-bg-card: #063247; --ao-bg-card-alt: #092F41; --ao-text-primary: #FFFFFF; --ao-text-secondary: #B7C8CF; --ao-text-muted: #88A2AD; --ao-border: #285063; --ao-action: #EE7C17; --ao-action-text: #FFFFFF; --ao-info: #00E7FF; --ao-info-bg: #063E4C; --ao-info-border: #16798A; --ao-success: #82D64B; --ao-success-bg: #123D32; --ao-success-border: #4A8E62; --ao-warning: #FFB451; --ao-warning-bg: #493314; --ao-danger: #FF7272; --ao-danger-bg: #4A2027; --ao-input-bg: #F8F4E8; --ao-input-text: #163540; --ao-input-placeholder: #6A7477; --ao-focus-ring: #00E7FF; --ao-overlay: rgba(0, 0, 0, 0.35); } [data-theme="light"] { color-scheme: light; --ao-bg-app: #F8F4E8; --ao-bg-sidebar: #00263A; --ao-bg-hero: #00263A; --ao-bg-card: #FFFDF7; --ao-bg-card-alt: #F4F0E5; --ao-text-primary: #00263A; --ao-text-secondary: #4A4949; --ao-text-muted: #6A6968; --ao-border: #D9D2C3; --ao-action: #EE7C17; --ao-action-text: #FFFFFF; /* Functional derivative for readable cyan on light surfaces */ --ao-info: #007C91; --ao-info-bg: #E6FAFC; --ao-info-border: #BEEEF3; /* Functional success colors; not corporate brand colors */ --ao-success: #2F6F3E; --ao-success-bg: #EAF4EC; --ao-success-border: #7FAE8A; --ao-warning: #A85A00; --ao-warning-bg: #FFF1DD; --ao-danger: #A83232; --ao-danger-bg: #FDEAEA; --ao-input-bg: #FFFDF7; --ao-input-text: #00263A; --ao-input-placeholder: #73706A; --ao-focus-ring: #007C91; --ao-overlay: rgba(0, 38, 58, 0.12); } /* Optional semantic aliases for easier adoption in existing apps */ :root { --bg-app: var(--ao-bg-app); --bg-sidebar: var(--ao-bg-sidebar); --bg-card: var(--ao-bg-card); --bg-card-alt: var(--ao-bg-card-alt); --text-primary: var(--ao-text-primary); --text-secondary: var(--ao-text-secondary); --text-muted: var(--ao-text-muted); --border: var(--ao-border); --accent-orange: var(--ao-action); --accent-cyan: var(--ao-info); --accent-cyan-soft: var(--ao-info-bg); --success: var(--ao-success); --success-bg: var(--ao-success-bg); --success-border: var(--ao-success-border); --warning: var(--ao-warning); --danger: var(--ao-danger); --input-bg: var(--ao-input-bg); --input-text: var(--ao-input-text); --focus-ring: var(--ao-focus-ring); } /* Optional utility classes. Safe to reuse; apps may ignore them. */ .ao-theme-surface { background: var(--ao-bg-app); color: var(--ao-text-primary); } .ao-card { background: var(--ao-bg-card); color: var(--ao-text-primary); border: 1px solid var(--ao-border); border-radius: var(--ao-radius-md); box-shadow: var(--ao-shadow-soft); } .ao-badge-info { color: var(--ao-info); background: var(--ao-info-bg); border: 1px solid var(--ao-info-border); } .ao-badge-success { color: var(--ao-success); background: var(--ao-success-bg); border: 1px solid var(--ao-success-border); } .ao-button-primary { color: var(--ao-action-text); background: var(--ao-action); border: 1px solid var(--ao-action); } .ao-input { color: var(--ao-input-text); background: var(--ao-input-bg); border: 1px solid var(--ao-border); } .ao-input::placeholder { color: var(--ao-input-placeholder); } .ao-input:focus-visible, .ao-button-primary:focus-visible, .ao-focusable:focus-visible { outline: 3px solid var(--ao-focus-ring); outline-offset: 2px; } /* Theme-switch helper. JS remains app-owned. */ .ao-theme-toggle { color: var(--ao-text-primary); background: var(--ao-bg-card); border: 1px solid var(--ao-border); border-radius: 999px; } @media (prefers-reduced-motion: no-preference) { .ao-theme-surface, .ao-card, .ao-theme-toggle { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } }