/* Hospedus · Design Tokens v1.0 — fonte única de verdade da identidade */ :root { /* ---- marca ---- */ --hsp-blue-50: #F1F6FA; --hsp-blue-100: #DCEAF2; --hsp-blue-200: #B8D4E4; --hsp-blue-300: #8ABBD3; --hsp-blue-400: #4A93B5; --hsp-blue-500: #0B6691; --hsp-blue-600: #095679; --hsp-blue-700: #084662; --hsp-blue-800: #06364B; --hsp-blue-900: #042534; --hsp-orange-50: #FFF6EC; --hsp-orange-100: #FFE8CF; --hsp-orange-200: #FFD09E; --hsp-orange-300: #FDB562; --hsp-orange-400: #F79B2E; --hsp-orange-500: #F38305; --hsp-orange-600: #CC6C04; --hsp-orange-700: #A05603; --hsp-orange-800: #7A4103; --hsp-orange-900: #572F02; --hsp-mist: #C8D5E2; --hsp-ink: #0E1B24; /* ---- neutros ---- */ --hsp-neutral-0: #FFFFFF; --hsp-neutral-50: #F5F8FA; --hsp-neutral-100: #E9EFF4; --hsp-neutral-200: #D6E0E9; --hsp-neutral-300: #C8D5E2; --hsp-neutral-400: #9DAEBC; --hsp-neutral-500: #6E8291; --hsp-neutral-600: #4A5C68; --hsp-neutral-700: #33434E; --hsp-neutral-800: #1D2C36; --hsp-neutral-900: #0E1B24; /* ---- escalas da marca do cliente ---- * Os componentes nunca usam --hsp-blue-* / --hsp-orange-* diretamente: usam * estas duas escalas (ou os papéis abaixo). Por omissão apontam para a * paleta original; o personalizador de aparência sobrescreve-as com a * escala gerada a partir da cor escolhida pelo cliente. */ --hsp-primary-50: var(--hsp-blue-50); --hsp-primary-100: var(--hsp-blue-100); --hsp-primary-200: var(--hsp-blue-200); --hsp-primary-300: var(--hsp-blue-300); --hsp-primary-400: var(--hsp-blue-400); --hsp-primary-500: var(--hsp-blue-500); --hsp-primary-600: var(--hsp-blue-600); --hsp-primary-700: var(--hsp-blue-700); --hsp-primary-800: var(--hsp-blue-800); --hsp-primary-900: var(--hsp-blue-900); --hsp-secondary-50: var(--hsp-orange-50); --hsp-secondary-100: var(--hsp-orange-100); --hsp-secondary-200: var(--hsp-orange-200); --hsp-secondary-300: var(--hsp-orange-300); --hsp-secondary-400: var(--hsp-orange-400); --hsp-secondary-500: var(--hsp-orange-500); --hsp-secondary-600: var(--hsp-orange-600); --hsp-secondary-700: var(--hsp-orange-700); --hsp-secondary-800: var(--hsp-orange-800); --hsp-secondary-900: var(--hsp-orange-900); /* ---- semântica ---- */ --hsp-surface-base: var(--hsp-neutral-50); --hsp-surface-raised: var(--hsp-neutral-0); --hsp-surface-sunken: var(--hsp-neutral-100); /* fundo de imagem a carregar, skeleton */ --hsp-surface-placeholder: var(--hsp-neutral-200); /* sem imagem, barras vazias */ --hsp-surface-inverse: var(--hsp-primary-900); /* rodapé, CTA, cabeçalho do painel, sidebar */ --hsp-surface-inverse-hover: var(--hsp-primary-800); --hsp-border-subtle: var(--hsp-neutral-100); --hsp-border-strong: var(--hsp-neutral-200); --hsp-border-hover: var(--hsp-neutral-400); --hsp-text-primary: var(--hsp-neutral-900); --hsp-text-secondary: var(--hsp-neutral-600); --hsp-text-muted: var(--hsp-neutral-500); --hsp-text-disabled: var(--hsp-neutral-400); --hsp-text-on-inverse: var(--hsp-neutral-0); --hsp-text-on-inverse-muted: var(--hsp-primary-200); --hsp-heading: var(--hsp-primary-700); --hsp-action: var(--hsp-primary-500); --hsp-action-hover: var(--hsp-primary-600); --hsp-action-text: var(--hsp-primary-700); /* texto da marca sobre fundo claro */ --hsp-action-soft: var(--hsp-primary-50); /* hover, selecionado, badges */ --hsp-action-soft-hover: var(--hsp-primary-100); --hsp-action-border: var(--hsp-primary-200); --hsp-on-action: var(--hsp-neutral-0); /* texto/ícone sobre --hsp-action */ --hsp-accent: var(--hsp-secondary-500); --hsp-accent-hover: var(--hsp-secondary-600); --hsp-accent-text: var(--hsp-secondary-700); --hsp-accent-soft: var(--hsp-secondary-100); --hsp-on-accent: var(--hsp-neutral-0); /* texto/ícone sobre --hsp-accent */ --hsp-success: #157F4F; --hsp-success-bg: #E4F4EC; --hsp-warning: #B7791F; --hsp-warning-bg: #FDF3E0; --hsp-danger: #C0332B; --hsp-danger-bg: #FBEAE8; --hsp-info: #0B6691; --hsp-info-bg: #DCEAF2; /* ---- estados de reserva ---- */ --hsp-booking-confirmed: #157F4F; --hsp-booking-confirmed-bg: #E4F4EC; --hsp-booking-pending: #B7791F; --hsp-booking-pending-bg: #FDF3E0; --hsp-booking-cancelled: #C0332B; --hsp-booking-cancelled-bg: #FBEAE8; --hsp-booking-blocked: #4A5C68; --hsp-booking-blocked-bg: #E9EFF4; --hsp-booking-cleaning: #0B6691; --hsp-booking-cleaning-bg: #DCEAF2; --hsp-booking-checkin: #A05603; --hsp-booking-checkin-bg: #FFE8CF; /* ---- tipografia ---- */ --hsp-font-brand: "Poppins", "Segoe UI", Roboto, sans-serif; --hsp-font-ui: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --hsp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --hsp-text-xs: 12px; --hsp-text-sm: 14px; --hsp-text-base: 16px; --hsp-text-lg: 20px; --hsp-text-xl: 24px; --hsp-text-2xl: 32px; --hsp-text-3xl: 40px; --hsp-text-4xl: 56px; --hsp-lh-tight: 1.2; --hsp-lh-normal: 1.55; --hsp-lh-loose: 1.65; /* ---- forma e ritmo ---- */ --hsp-radius-sm: 4px; --hsp-radius-md: 8px; --hsp-radius-lg: 12px; --hsp-radius-full: 999px; --hsp-space-1: 4px; --hsp-space-2: 8px; --hsp-space-3: 12px; --hsp-space-4: 16px; --hsp-space-5: 24px; --hsp-space-6: 32px; --hsp-space-7: 48px; --hsp-space-8: 64px; --hsp-shadow-sm: 0 1px 2px rgba(14,27,36,.06); --hsp-shadow-md: 0 4px 12px rgba(14,27,36,.08); --hsp-shadow-lg: 0 12px 32px rgba(14,27,36,.12); --hsp-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--hsp-action); --hsp-container: 1280px; --hsp-measure: 720px; } /* Nota: o pacote de marca inclui um modo escuro automático (prefers-color-scheme) * que foi retirado daqui de propósito. O admin, o portal e o site público ainda * não têm tabelas/badges/formulários desenhados e testados para superfícies * escuras, por isso ligá-lo automaticamente conforme o tema do sistema * operativo do utilizador deixava o ecrã inteiro escuro e ilegível em vez de * só a sidebar do portal (que é escura por desenho, não por este modo). Uma * versão dark mode completa fica para quando houver tempo de a desenhar e * testar a sério — não como efeito colateral automático. */ /* Números tabulares obrigatórios em dados */ .hsp-num, table td, .hsp-price, .hsp-date { font-variant-numeric: tabular-nums; }