/* UNIMES redesign — tokens. As primitivas abaixo sao copia verbatim de docs/design-system/tokens/, apenas reescopadas de :root para .unimes-redesign. Nao edite valores aqui: altere no design system e recopie. O ultimo bloco traduz os nomes --unimes-* usados pelos componentes do tema para os tokens do design system. */ /* ========================================================================== docs/design-system/tokens/colors.css ========================================================================== */ /* UNIMES — Color tokens Aligned to the 2025 brand strategy ("Guia Estratégico de Comunicação e Uso de Marca UNIMES", assets/brand/). The palette is organized in LINHAS (lines): • Linha Mestra — Vermelho Escarlate #FC303F → IDENTITY (logo, brand fields, trilha accent). NOT a UI/CTA color: in UI, red = errors/destructive only. • Linha de Destaque — Azul Intenso #07CFFF → highlight / interactive / focus • Linha de Base — Azul Profundo #04003D → base: bg, text, chrome, DEFAULT CTA • Linha Institucional — Vermelho Clássico #8A0E2E → formal/institutional pieces only • Sector lines (submarcas): saúde, cuidado, ed. física, nutrição, direito, gestão Red = identity; navy = structure & CTA; cyan = highlight. See README §3. */ .unimes-redesign { /* ---- Brand primitives ---- */ --unimes-red: #FC303F; /* Vermelho Escarlate · Pantone 1788C · MASTER */ --unimes-cyan: #07CFFF; /* Azul Intenso · Pantone 306C · HIGHLIGHT */ --unimes-navy: #04003D; /* Azul Profundo · Pantone 2766C · BASE */ --unimes-white: #FFFFFF; --unimes-red-classic:#8A0E2E; /* Vermelho Clássico · Pantone 1955C · institutional */ --unimes-wine: #8A0E2E; /* Vermelho Legado (vinho) — INSTITUTIONAL only (documents, certificates). Not product chrome. */ /* Red ramp (Linha Mestra) */ --red-800: #6E0A1A; --red-700: #8A0E2E; /* = Vermelho Clássico (institutional) */ --red-600: #E01828; --red-500: #FC303F; /* = brand red */ --red-400: #FF5C68; --red-300: #FF8A93; --red-200: #FFC0C5; --red-100: #FFE2E4; --red-050: #FFF1F2; /* Wine ramp (Linha Institucional / "Vermelho Legado" / vinho) — reserved for formal/institutional materials. NOT product-UI chrome: header, footer, mega-menu and Área do Aluno use NAVY as the structural base (an earlier exploration used wine for chrome; reverted). */ --wine-900: #3E0614; --wine-800: #5C0A20; /* deepest institutional band */ --wine-700: #8A0E2E; /* = Vermelho Legado (brand) */ --wine-600: #A3163A; --wine-500: #BC2049; --wine-400: #D14A6C; --wine-300: #E08398; --wine-200: #EFBCC8; --wine-100: #F7DCE3; --wine-050: #FBEFF2; /* Cyan ramp (Linha de Destaque) — dark steps added for accessible text/links */ --cyan-800: #064E63; --cyan-700: #086A86; /* readable on white */ --cyan-600: #0AA0C9; --cyan-500: #07CFFF; /* = brand cyan */ --cyan-400: #54DEFF; --cyan-300: #8FE9FF; --cyan-200: #C0F2FF; --cyan-100: #E2F9FF; --cyan-050: #F1FCFF; /* Navy ramp (Linha de Base) */ --navy-900: #02001F; --navy-800: #04003D; /* = brand navy */ --navy-700: #0C0A52; --navy-600: #1A1770; --navy-500: #2F2B96; --navy-400: #5A56C4; --navy-300: #9794DE; --navy-200: #C7C5EE; --navy-100: #E7E6F8; --navy-050: #F4F3FC; /* Neutral / gray ramp (cool, very slightly navy-tinted) */ --gray-900: #15151C; --gray-800: #25262F; --gray-700: #3A3B46; --gray-600: #54555F; --gray-500: #71727C; --gray-400: #9A9BA4; --gray-300: #C4C5CC; --gray-200: #E2E3E8; --gray-100: #EFF0F3; --gray-050: #F7F8FA; /* ---- Sector / submarca colors (linhas) ---- */ --linha-saude: #00DABD; /* Verde Vital · saúde / ciências biológicas */ --linha-cuidado: #5B205E; /* Violeta Sapiente · saúde & biomédicas (cuidado) */ --linha-edfisica: #510E26; /* Grená Legado · Educação Física (FEFIS) */ --linha-nutricao: #FFB64D; /* Amarelo Âmbar · Nutrição */ --linha-direito: #04003D; /* Azul Profundo · Direito & Humanas */ --linha-gestao: #2563C9; /* Steel blue · Gestão & Tecnologia */ --linha-gestao-soft: #E8EEFB; --linha-institucional: #8A0E2E; /* Vermelho Clássico · institucional / formal */ /* Support / semantic accents (UI feedback — distinct from brand lines) */ --green-500: #1F9D55; /* success / aprovado / matriculado */ --green-050: #E7F6EE; --amber-500: #E6A100; /* warning / pendência */ --amber-050: #FCF3DA; --info-500: var(--cyan-600); /* informational — uses brand cyan family */ --info-050: var(--cyan-050); /* ================= SEMANTIC ALIASES ================= */ /* Surfaces */ --surface-page: var(--gray-050); --surface-card: var(--unimes-white); --surface-raised: var(--unimes-white); --surface-sunken: var(--gray-100); --surface-inverse: var(--unimes-navy); --surface-brand: var(--unimes-navy); /* base panels */ --surface-master: var(--unimes-red); /* full red brand fields — identity moments, not UI */ --surface-accent: var(--unimes-red); --surface-accent-soft: var(--red-050); --surface-brand-soft: var(--navy-050); --surface-student: var(--unimes-navy); /* student/admin chrome (sidebars, app shells) — navy, per README */ --surface-student-soft: var(--navy-050); --surface-institutional: var(--wine-800); /* formal/institutional pieces only (documents, certificates) */ --surface-highlight: var(--unimes-cyan); --surface-highlight-soft:var(--cyan-050); /* Text */ --text-strong: var(--unimes-navy); --text-body: var(--gray-800); --text-muted: var(--gray-500); --text-subtle: var(--gray-400); --text-on-brand: var(--unimes-white); --text-on-accent: var(--unimes-white); --text-on-master: var(--unimes-white); --text-link: var(--cyan-700); /* interactive = cyan family (accessible) */ --text-link-hover:var(--cyan-800); /* Borders & dividers */ --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-400); --border-brand: var(--unimes-navy); --border-accent: var(--unimes-red); --border-highlight:var(--unimes-cyan); /* Interactive — NEUTRAL CTA SYSTEM primary = navy (BASE) is the default, neutral call-to-action. inverse = white, for the SAME primary action on dark/navy backgrounds. highlight = cyan, the energetic accent / promo / "destaque" button (replaces red for attention-grabbing CTAs). danger = red (MASTER) — reserved for ERROR / destructive actions ONLY (a red button otherwise reads as an error/alert). secondary = navy outline, supporting action. */ --action-primary: var(--unimes-navy); --action-primary-hover: var(--navy-700); --action-primary-active: var(--navy-900); --action-inverse: var(--unimes-white); --action-inverse-hover: var(--gray-100); --action-inverse-active: var(--gray-200); --action-highlight: var(--unimes-cyan); --action-highlight-hover: var(--cyan-600); --action-highlight-active: var(--cyan-700); --action-danger: var(--unimes-red); /* errors / destructive ONLY */ --action-danger-hover: var(--red-600); --action-danger-active: var(--red-700); --action-secondary: var(--unimes-navy); --action-secondary-hover: var(--navy-050); --action-secondary-active: var(--navy-100); /* Focus ring — cyan (innovation / highlight) */ --focus-ring: var(--unimes-cyan); /* States */ --state-success: var(--green-500); --state-success-soft: var(--green-050); --state-warning: var(--amber-500); --state-warning-soft: var(--amber-050); --state-danger: var(--red-600); --state-danger-soft: var(--red-050); --state-info: var(--cyan-600); --state-info-soft: var(--cyan-050); } /* ========================================================================== docs/design-system/tokens/spacing.css ========================================================================== */ /* UNIMES — Spacing, radii, shadows, layout tokens */ .unimes-redesign { /* Spacing scale (4px base) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Radii — UNIMES uses soft, friendly but not pill-everything corners. The mark itself is sharp/angular, so chrome stays moderately rounded. */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; --radius-card: var(--radius-lg); /* Border widths */ --border-thin: 1px; --border-med: 2px; --border-thick: 3px; /* Shadows — soft, cool, navy-tinted. Low elevation overall. */ --shadow-xs: 0 1px 2px rgba(4, 0, 61, 0.06); --shadow-sm: 0 2px 6px rgba(4, 0, 61, 0.08); --shadow-md: 0 6px 18px rgba(4, 0, 61, 0.10); --shadow-lg: 0 14px 36px rgba(4, 0, 61, 0.14); --shadow-xl: 0 24px 60px rgba(4, 0, 61, 0.18); --shadow-focus: 0 0 0 3px rgba(7, 207, 255, 0.40); /* Layout */ --container-sm: 640px; --container-md: 880px; --container-lg: 1120px; --container-xl: 1280px; --gutter: var(--space-6); /* Motion — quick, confident, no bounce. */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ } /* ========================================================================== docs/design-system/tokens/typography.css ========================================================================== */ /* UNIMES — Typography tokens Single family: Bicyclette. Large titles (>=24px) = Light 300; everything else = Regular 400. No bold in UI — hierarchy from size, color and uppercase+tracking. Heavy cuts only via --weight-promo (rare). */ .unimes-redesign { /* Families */ --font-sans: "Bicyclette", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: "Bicyclette", "Segoe UI", system-ui, sans-serif; --font-body: "Bicyclette", "Segoe UI", system-ui, sans-serif; /* Weights — ONLY these cuts exist in Bicyclette. There is NO Medium (500) nor SemiBold (600): a 500 request falls back to Regular (400); a 600 request rounds UP to Bold (700) — so "semibold" looks identical to bold. For lighter titles use Regular (400) or Light (300); never 500/600. */ --fw-thin: 100; /* @kind font */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 800; /* @kind font */ /* USO RESTRITO — ver --weight-promo */ --fw-ultra: 900; /* @kind font */ /* USO RESTRITO — ver --weight-promo */ /* Type scale (1.250 major-third-ish, tuned) */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 62px; --text-6xl: 80px; /* Line heights */ --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed:1.65; /* Letter spacing — Bicyclette display likes a touch tight; labels open wide */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-label: 0.12em; /* uppercase eyebrows / kickers */ /* Semantic roles The system is now UNIFORMLY REGULAR (400) — no bold in layout. Hierarchy comes from SIZE, COLOR (navy --text-strong vs muted) and UPPERCASE+tracking for eyebrows/kickers — never weight. Bicyclette also has no Medium/SemiBold, so there is no intermediate step anyway. The heavier cuts (Bold 700 / Black 800 / Ultra 900) are reserved for rare, opt-in punch moments only (a discount seal, a splash number) via --weight-promo — never general UI. Title line-heights are tight (~1.0–1.1). */ --display-weight: var(--fw-light); --heading-weight: var(--fw-regular); --body-weight: var(--fw-regular); --label-weight: var(--fw-regular); --weight-promo: var(--fw-ultra); /* restricted: discount seals / splash only */ } /* ========================================================================== Apelidos do tema -> tokens do design system Os componentes continuam usando --unimes-*; a fonte da verdade e o bloco acima. ========================================================================== */ .unimes-redesign { /* Marca */ --unimes-color-brand-scarlet: var(--unimes-red); --unimes-color-brand-cyan: var(--unimes-cyan); --unimes-color-brand-deep: var(--unimes-navy); /* Estados do escarlate: o design system nao define rampa de interacao para o vermelho (o CTA padrao e navy), entao estes tres permanecem como extensao do tema, com os valores ja em uso. */ --unimes-color-brand-scarlet-dark: #c91f2c; --unimes-color-brand-scarlet-hover: #b51c28; --unimes-color-brand-scarlet-active: #a31823; /* Neutros */ --unimes-color-neutral-white: var(--unimes-white); --unimes-color-neutral-50: var(--gray-050); --unimes-color-neutral-100: var(--gray-100); --unimes-color-neutral-200: var(--gray-200); --unimes-color-neutral-300: var(--gray-300); --unimes-color-neutral-500: var(--gray-500); --unimes-color-neutral-600: var(--gray-600); --unimes-color-neutral-700: var(--gray-700); --unimes-color-neutral-900: var(--gray-900); /* Semanticos */ --unimes-color-semantic-success: var(--state-success); --unimes-color-semantic-warning: var(--state-warning); --unimes-color-semantic-danger: var(--state-danger); --unimes-color-semantic-info: var(--state-info); --unimes-color-semantic-focus: var(--focus-ring); /* Tipografia: familia e pesos vem do design system; tamanhos, entrelinhas e tracking permanecem os desta base (escala fluida, sem equivalente no DS). */ --unimes-font-family-sans: var(--font-sans); /* Escala tipografica por papel. Tamanhos, entrelinhas e tracking sao os desta base e nao mudam nesta etapa. Os PESOS passam a vir do design system: titulos grandes em Light 300, todo o resto em Regular 400. Sem negrito na interface; a Bicyclette nao possui os cortes 500 e 600. */ --unimes-font-display-size: clamp(2.5rem,2rem + 2.5vw,4rem); --unimes-font-display-line-height: 0.98; --unimes-font-display-letter-spacing: -0.035em; --unimes-font-display-weight: var(--fw-light); --unimes-font-h1-size: clamp(2.125rem,1.75rem + 1.875vw,3.25rem); --unimes-font-h1-line-height: 1.05; --unimes-font-h1-letter-spacing: -0.03em; --unimes-font-h1-weight: var(--fw-light); --unimes-font-h2-size: clamp(1.75rem,1.5rem + 1.25vw,2.5rem); --unimes-font-h2-line-height: 1.1; --unimes-font-h2-letter-spacing: -0.025em; --unimes-font-h2-weight: var(--fw-light); --unimes-font-h3-size: clamp(1.5rem,1.25rem + 1vw,2rem); --unimes-font-h3-line-height: 1.15; --unimes-font-h3-letter-spacing: -0.02em; --unimes-font-h3-weight: var(--fw-light); --unimes-font-h4-size: clamp(1.25rem,1.125rem + 0.5vw,1.5rem); --unimes-font-h4-line-height: 1.25; --unimes-font-h4-letter-spacing: -0.015em; --unimes-font-h4-weight: var(--fw-regular); --unimes-font-body-lg-size: clamp(1.0625rem,1rem + 0.3125vw,1.25rem); --unimes-font-body-lg-line-height: 1.65; --unimes-font-body-lg-letter-spacing: 0; --unimes-font-body-lg-weight: var(--fw-regular); --unimes-font-body-size: 1rem; --unimes-font-body-line-height: 1.65; --unimes-font-body-letter-spacing: 0; --unimes-font-body-weight: var(--fw-regular); --unimes-font-body-sm-size: 0.875rem; --unimes-font-body-sm-line-height: 1.55; --unimes-font-body-sm-letter-spacing: 0; --unimes-font-body-sm-weight: var(--fw-regular); --unimes-font-label-size: 0.875rem; --unimes-font-label-line-height: 1.35; --unimes-font-label-letter-spacing: 0.01em; --unimes-font-label-weight: var(--fw-regular); --unimes-font-caption-size: 0.75rem; --unimes-font-caption-line-height: 1.4; --unimes-font-caption-letter-spacing: 0.015em; --unimes-font-caption-weight: var(--fw-regular); /* Espacamento */ --unimes-space-1: var(--space-1); --unimes-space-2: var(--space-2); --unimes-space-3: var(--space-3); --unimes-space-4: var(--space-4); --unimes-space-5: var(--space-5); --unimes-space-6: var(--space-6); --unimes-space-8: var(--space-8); --unimes-space-10: var(--space-10); --unimes-space-12: var(--space-12); --unimes-space-16: var(--space-16); --unimes-space-20: var(--space-20); --unimes-space-24: var(--space-24); /* Sem equivalente no design system: gutter fluido, ritmo de secao e alvo de toque de 44px exigido pelo CLAUDE.md. */ --unimes-space-gutter: clamp(1rem, 3vw, 2rem); --unimes-space-section: clamp(3rem, 7vw, 6rem); --unimes-space-control: 2.75rem; /* Raios */ --unimes-radius-sm: var(--radius-sm); --unimes-radius-md: var(--radius-md); --unimes-radius-lg: var(--radius-lg); --unimes-radius-pill: var(--radius-pill); /* Sombras: a escala do design system tem cinco degraus com geometria propria e nenhum coincide com os tres em uso; mantidas como extensao do tema. */ --unimes-shadow-sm: 0 1px 2px rgba(4, 0, 61, .08); --unimes-shadow-md: 0 10px 30px rgba(4, 0, 61, .1); --unimes-shadow-lg: 0 20px 50px rgba(4, 0, 61, .14); /* Layout */ --unimes-layout-readable: 46rem; --unimes-layout-content: 72rem; --unimes-layout-wide: var(--container-xl); /* Grade: sem equivalente no design system. */ --unimes-grid-columns-mobile: 4; --unimes-grid-columns-tablet: 8; --unimes-grid-columns-desktop: 12; /* Transicoes */ --unimes-transition-fast: var(--dur-fast); --unimes-transition-normal: var(--dur-base); --unimes-transition-slow: var(--dur-slow); }