/* FILE: wwwroot/css/tokens.css PURPOSE: Design system base — Apple/Airbnb-inspired. Cores, tipografia, spacing, elevação, motion. USAGE: Importado no via App.razor. Usar SEMPRE via var(--pe-*). AI-NOTE: NÃO duplicar tokens noutros ficheiros — aumentar este. Paleta: oceano (primary), coral (accent), areia (neutrais quentes). Tipografia: Inter (carregada via Google Fonts em App.razor). Escala de elevação 0–5 inspirada em Material 3 + Apple HIG. Spacing 4-base (0.25rem). Tipografia modular ~1.125x. */ :root { color-scheme: light dark; /* ─── Paleta neutra (areia quente) ─────────────────────────────── */ --pe-neutral-0: #ffffff; --pe-neutral-50: #fafaf9; --pe-neutral-100:#f5f5f4; --pe-neutral-200:#e7e5e4; --pe-neutral-300:#d6d3d1; --pe-neutral-400:#a8a29e; --pe-neutral-500:#78716c; --pe-neutral-600:#57534e; --pe-neutral-700:#44403c; --pe-neutral-800:#292524; --pe-neutral-900:#1c1917; --pe-neutral-950:#0c0a09; /* ─── Marca: oceano (primary) ──────────────────────────────────── */ --pe-brand-50: #f0f9ff; --pe-brand-100: #e0f2fe; --pe-brand-200: #bae6fd; --pe-brand-300: #7dd3fc; --pe-brand-400: #38bdf8; --pe-brand-500: #0ea5e9; --pe-brand-600: #0284c7; --pe-brand-700: #0369a1; --pe-brand-800: #075985; --pe-brand-900: #0c4a6e; /* ─── Accent: coral (CTA, alerta positivo) ─────────────────────── */ --pe-accent-50: #fff1f2; --pe-accent-100: #ffe4e6; --pe-accent-300: #fda4af; --pe-accent-500: #f43f5e; --pe-accent-600: #e11d48; --pe-accent-700: #be123c; /* ─── Identidade regional (Fatia 1) ──────────────────────────── Cores de assinatura: oceano profundo + coral-sardinha + areia + noite. Usar para chrome editorial (topbar escura opcional, ticker, badges de urgência, CTAs com personalidade regional). NÃO substituir as paletas principais — coexistem. */ --pe-pe-atlantico: #0B4F6C; /* azul-Atlântico, profundo, sério */ --pe-pe-atlantico-2: #073B52; --pe-pe-coral: #FF5A4E; /* coral-sardinha, urgência/CTA quente */ --pe-pe-coral-2: #E83E32; --pe-pe-areia: #F5EFE6; /* fundo quente, papel/areia */ --pe-pe-areia-2: #EBE2D3; --pe-pe-noite: #0E1116; /* header escuro, ticker, modo "câmara" */ --pe-pe-farol: #FFD166; /* highlight (raro, "agora") */ /* Aliases semânticos da identidade */ --pe-color-editorial: var(--pe-pe-atlantico); --pe-color-urgent: var(--pe-pe-coral); --pe-color-urgent-hover:var(--pe-pe-coral-2); --pe-color-ticker-bg: var(--pe-pe-noite); --pe-color-ticker-text: #F5EFE6; /* ─── Semânticas ───────────────────────────────────────────────── */ --pe-success: #10b981; --pe-warning: #f59e0b; --pe-danger: #ef4444; --pe-info: #0ea5e9; /* ─── Aliases de uso (LIGHT por defeito) ───────────────────────── */ --pe-color-bg: var(--pe-neutral-50); --pe-color-surface: var(--pe-neutral-0); --pe-color-surface-2: var(--pe-neutral-100); --pe-color-surface-3: var(--pe-neutral-200); --pe-color-text: var(--pe-neutral-900); --pe-color-text-soft: var(--pe-neutral-700); --pe-color-muted: var(--pe-neutral-500); --pe-color-border: rgba(28, 25, 23, 0.08); --pe-color-border-strong:rgba(28, 25, 23, 0.16); --pe-color-brand: var(--pe-brand-600); --pe-color-brand-hover: var(--pe-brand-700); --pe-color-brand-contrast: #ffffff; --pe-color-accent: var(--pe-accent-600); --pe-color-accent-hover: var(--pe-accent-700); --pe-color-chip-bg: var(--pe-neutral-100); --pe-color-chip-text: var(--pe-neutral-800); --pe-color-chip-bg-on: var(--pe-neutral-900); --pe-color-chip-text-on: var(--pe-neutral-0); --pe-color-success-bg: rgba(16, 185, 129, 0.12); --pe-color-success-text: #047857; --pe-overlay-scrim: rgba(12, 10, 9, 0.5); /* Compat antigos (legado, vão sendo migrados) */ --pe-color-bg-chip: var(--pe-color-chip-bg); --pe-color-text-chip: var(--pe-color-chip-text); --pe-color-bg-chip-accent: var(--pe-color-success-bg); --pe-color-text-chip-accent: var(--pe-color-success-text); --color-bg: var(--pe-color-bg); --color-surface: var(--pe-color-surface); --color-text: var(--pe-color-text); --color-muted: var(--pe-color-muted); --color-border: var(--pe-color-border); --color-accent: var(--pe-color-brand); --color-chip-bg: var(--pe-color-chip-bg); --color-chip-text: var(--pe-color-chip-text); /* ─── Tipografia ───────────────────────────────────────────────── */ --pe-font-sans: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --pe-font-display: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --pe-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; --pe-text-xs: 0.75rem; /* 12 */ --pe-text-sm: 0.875rem; /* 14 */ --pe-text-base: 1rem; /* 16 */ --pe-text-lg: 1.125rem; /* 18 */ --pe-text-xl: 1.25rem; /* 20 */ --pe-text-2xl: 1.5rem; /* 24 */ --pe-text-3xl: 1.875rem; /* 30 */ --pe-text-4xl: 2.25rem; /* 36 */ --pe-text-5xl: 3rem; /* 48 */ --pe-text-6xl: 3.75rem; /* 60 */ --pe-leading-tight: 1.15; --pe-leading-snug: 1.3; --pe-leading-normal: 1.5; --pe-leading-relaxed: 1.65; --pe-tracking-tight: -0.02em; --pe-tracking-snug: -0.01em; --pe-tracking-normal: 0; --pe-tracking-wide: 0.06em; /* ─── Spacing (4-base) ─────────────────────────────────────────── */ --pe-space-0: 0; --pe-space-1: 0.25rem; --pe-space-2: 0.5rem; --pe-space-3: 0.75rem; --pe-space-4: 1rem; --pe-space-5: 1.25rem; --pe-space-6: 1.5rem; --pe-space-8: 2rem; --pe-space-10: 2.5rem; --pe-space-12: 3rem; --pe-space-16: 4rem; --pe-space-20: 5rem; --pe-space-24: 6rem; /* legado */ --pe-space-xs: var(--pe-space-1); --pe-space-sm: var(--pe-space-2); --pe-space-md: var(--pe-space-4); --pe-space-lg: var(--pe-space-6); --pe-space-xl: var(--pe-space-8); /* ─── Radius ───────────────────────────────────────────────────── */ --pe-radius-xs: 4px; --pe-radius-sm: 8px; --pe-radius-md: 12px; --pe-radius-lg: 16px; --pe-radius-xl: 20px; --pe-radius-2xl: 28px; --pe-radius-pill: 9999px; --radius-lg: var(--pe-radius-lg); /* ─── Elevação ─────────────────────────────────────────────────── */ --pe-shadow-0: none; --pe-shadow-1: 0 1px 2px rgba(28, 25, 23, 0.06); --pe-shadow-2: 0 2px 6px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04); --pe-shadow-3: 0 6px 16px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04); --pe-shadow-4: 0 12px 32px rgba(28, 25, 23, 0.10), 0 4px 8px rgba(28, 25, 23, 0.04); --pe-shadow-5: 0 24px 64px rgba(28, 25, 23, 0.14), 0 8px 16px rgba(28, 25, 23, 0.06); --pe-shadow-card: var(--pe-shadow-2); --pe-shadow-card-hover: var(--pe-shadow-4); --pe-shadow-sheet: 0 -12px 40px rgba(28, 25, 23, 0.12); --shadow-card: var(--pe-shadow-2); --shadow-card-hover: var(--pe-shadow-4); /* ─── Mobile-nativo ───────────────────────────────────────────── */ --pe-safe-top: env(safe-area-inset-top, 0px); --pe-safe-right: env(safe-area-inset-right, 0px); --pe-safe-bottom: env(safe-area-inset-bottom, 0px); --pe-safe-left: env(safe-area-inset-left, 0px); --pe-touch-min: 44px; --pe-tap-feedback: rgba(28, 25, 23, 0.06); /* ─── Motion ───────────────────────────────────────────────────── */ --pe-motion-fast: 120ms; --pe-motion-base: 200ms; --pe-motion-slow: 320ms; --pe-easing-standard: cubic-bezier(0.2, 0, 0, 1); --pe-easing-emphasize: cubic-bezier(0.2, 0, 0, 1.2); /* ─── Z-index ──────────────────────────────────────────────────── */ --pe-z-base: 0; --pe-z-topbar: 30; --pe-z-ticker: 29; --pe-z-nav: 50; --pe-z-sheet: 80; --pe-z-toast: 90; --pe-z-modal: 100; /* ─── Layout ───────────────────────────────────────────────────── */ --pe-container-max: 1240px; --pe-container-narrow: 880px; /* Altura do header sticky por breakpoint (bar1 + ticker, sem navbar em mobile) Usado em scroll-margin-top para que anchors não fiquem escondidos atrás do header. mobile : bar1(52) + ticker(38) = 90px tablet : bar1(60) + navbar(44) + ticker(38) = 142px desktop: bar1(64) + navbar(42) + ticker(38) = 144px */ --pe-scroll-offset: 90px; } @media (prefers-color-scheme: dark) { :root { --pe-color-bg: var(--pe-neutral-950); --pe-color-surface: var(--pe-neutral-900); --pe-color-surface-2: var(--pe-neutral-800); --pe-color-surface-3: var(--pe-neutral-700); --pe-color-text: var(--pe-neutral-50); --pe-color-text-soft: var(--pe-neutral-200); --pe-color-muted: var(--pe-neutral-400); --pe-color-border: rgba(245, 245, 244, 0.10); --pe-color-border-strong:rgba(245, 245, 244, 0.20); --pe-color-brand: var(--pe-brand-400); --pe-color-brand-hover: var(--pe-brand-300); --pe-color-chip-bg: var(--pe-neutral-800); --pe-color-chip-text: var(--pe-neutral-100); --pe-color-chip-bg-on: var(--pe-neutral-0); --pe-color-chip-text-on: var(--pe-neutral-900); --pe-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4); --pe-shadow-3: 0 6px 16px rgba(0, 0, 0, 0.5); --pe-shadow-4: 0 12px 32px rgba(0, 0, 0, 0.55); } } @media (prefers-reduced-motion: reduce) { :root { --pe-motion-fast: 0ms; --pe-motion-base: 0ms; --pe-motion-slow: 0ms; } } /* Reset/base global mínima — sem libs. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* clip não cria scroll container — o wheel/scroll funcionam normalmente */ overflow-x: clip; } body { margin: 0; font-family: var(--pe-font-sans); font-size: var(--pe-text-base); line-height: var(--pe-leading-normal); color: var(--pe-color-text); background: var(--pe-color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; overflow-x: clip; overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } h1, h2, h3, h4, h5, h6 { font-family: var(--pe-font-display); font-weight: 700; letter-spacing: var(--pe-tracking-snug); color: var(--pe-color-text); margin: 0; } h1 { font-size: var(--pe-text-4xl); line-height: var(--pe-leading-tight); letter-spacing: var(--pe-tracking-tight); } h2 { font-size: var(--pe-text-2xl); line-height: var(--pe-leading-snug); } h3 { font-size: var(--pe-text-xl); line-height: var(--pe-leading-snug); } p { margin: 0; } a { color: var(--pe-color-brand); text-decoration: none; } a:hover { color: var(--pe-color-brand-hover); } img, svg, video { display: block; max-width: 100%; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--pe-color-brand); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--pe-brand-200); color: var(--pe-neutral-900); }