/* ============================================================================ FULL Geo Ops — Design Tokens ---------------------------------------------------------------------------- CSS custom properties ONLY. No component rules live here (see components.css). Source of truth: FULL Services Design System (linha 4.0). Prefix: --fs-* · Consume anywhere with var(--fs-...). DARK MODE: the source design system does NOT define a dark theme. The app is light-only. A [data-theme="dark"] scaffold is included at the bottom, fully commented out, listing every token that would need a dark value IF a dark theme is later specified. Do not ship guessed values — fill from a real spec. ============================================================================ */ :root { /* ---- Brand yellow (the FULL color) ------------------------------------ */ --fs-yellow: #FFD910; /* amarelo-mãe — CTAs, ações, estados ativos */ --fs-yellow-hover: #EACD2F; /* hover / mid */ --fs-yellow-soft: #FFF9D8; /* fundo suave (produto) */ --fs-yellow-soft-web: #FFFBE4; /* fundo suave (web/LPs) */ --fs-yellow-cream: #FFFDF0; /* topo do gradiente-assinatura; hover de linha de tabela */ --fs-on-yellow: #182230; /* texto sobre amarelo */ --fs-gold: #FFD700; /* dourado secundário — detalhes de marca, logo */ --fs-gold-text: #D19E00; /* dourado tipográfico sobre claro (eyebrows, ícones) */ --fs-gold-dark: #B39700; /* hover / borda de dourado; links de destaque */ /* ---- Ink / text (never pure black) ------------------------------------ */ --fs-ink: #13171E; /* títulos */ --fs-body: #334155; /* texto-corpo — slate */ --fs-muted: #667085; /* texto secundário / metadados */ --fs-ui-gray: #344054; /* labels / ícones de UI */ --fs-gray-strong: #475467; --fs-gray-400: #98A2B3; --fs-gray-300: #CBD2DC; /* separadores › em breadcrumbs, ícones fracos */ --fs-near-black: #0C111D; /* ---- Surfaces --------------------------------------------------------- */ --fs-canvas: #FFFFFF; --fs-canvas-warm: #FFFDF0; --fs-surface-card: #FFFFFF; --fs-surface-soft: #F9FAFB; /* cabeçalhos de tabela, faixas suaves */ --fs-surface-alt: #F5F8FA; --fs-hairline: #E9ECF0; /* bordas padrão (produto) */ --fs-hairline-web: #E5E7EB; /* bordas (web) */ --fs-deep-accent: #004437; /* acento profundo — máx. 1 seção por página */ /* ---- Semantic (paired bg / fg) ---------------------------------------- */ --fs-success: #039855; --fs-success-bg: #D1FADF; --fs-success-dot: #17B26A; --fs-danger: #E43B25; --fs-danger-bg: #FFE5E2; --fs-info: #1B4BF5; --fs-info-bg: #EEF1FE; --fs-warning: #A67102; --fs-warning-bg: #FFF9D8; /* ---- Data-viz palette (pastel — treemap / heatmap / charts) ----------- */ /* Softened tones chosen for legibility of dark text on light fills. */ --fs-viz-green: #CBEBDC; /* alta visibilidade — fundo */ --fs-viz-green-ink: #0F6B49; /* alta visibilidade — texto / dot */ --fs-viz-red: #F7D6D0; /* baixa visibilidade — fundo */ --fs-viz-red-ink: #B03A2E; /* baixa visibilidade — texto / dot */ --fs-viz-neutral: #F2F0E9; /* média / sem dado — fundo */ --fs-viz-neutral-ink:#475467; /* média / sem dado — texto */ /* ---- Model / engine brand colors (badges) ----------------------------- */ --fs-model-chatgpt: #26547C; --fs-model-claude: #3D8F63; --fs-model-perplexity: #2C2C87; /* ---- Source-type colors (dot / bg / fg) ------------------------------- */ --fs-src-owned-dot: #12B76A; --fs-src-owned-bg: #E7F6EE; --fs-src-owned-fg: #0A7C4A; --fs-src-comp-dot: #F04438; --fs-src-comp-bg: #FDECEA; --fs-src-comp-fg: #C4123F; --fs-src-edit-dot: #2E90FA; --fs-src-edit-bg: #EAF2FE; --fs-src-edit-fg: #1F5FBF; --fs-src-social-dot:#F79009; --fs-src-social-bg:#FEF3E6; --fs-src-social-fg:#B3690E; --fs-src-review-dot:#EE46BC; --fs-src-review-bg:#FCEBF6; --fs-src-review-fg:#C11574; --fs-src-3p-dot: #22CCEE; --fs-src-3p-bg: #E6F8FC; --fs-src-3p-fg: #0E7090; --fs-src-other-dot: #98A2B3; --fs-src-other-bg: #F2F4F7; --fs-src-other-fg: #475467; /* ---- Overlay / scrim -------------------------------------------------- */ --fs-scrim: rgba(0, 0, 0, .5); /* ---- Signature background gradients (content area only, never on cards) */ --fs-app-gradient: radial-gradient(ellipse 800px 500px at 10% 0%, rgba(255,217,16,.22) 0%, transparent 70%), radial-gradient(ellipse 600px 600px at 90% 30%, rgba(255,217,16,.12) 0%, transparent 70%), linear-gradient(180deg, #FFFDF0 0%, #FFFFFF 60%); /* ======================= TYPOGRAPHY ==================================== */ --fs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* font shorthand: weight size/line-height family */ --fs-text-display-xl: 700 48px/1.1 var(--fs-font-sans); /* h1 / hero */ --fs-text-display-lg: 700 36px/1.2 var(--fs-font-sans); /* h2 */ --fs-text-display-md: 600 28px/1.2 var(--fs-font-sans); /* h3 */ --fs-text-display-sm: 600 22px/1.2 var(--fs-font-sans); /* h4 */ --fs-text-page-title: 800 23px/1.2 var(--fs-font-sans); /* saudação do painel (-0.3px tracking) */ --fs-text-section-title: 700 15px/1.3 var(--fs-font-sans); /* títulos de seção fora de cards */ --fs-text-metric: 800 26px/1.1 var(--fs-font-sans); /* números de métrica (tabular-nums) */ --fs-text-body-md: 400 16px/1.5 var(--fs-font-sans); --fs-text-body-sm: 400 13.5px/1.5 var(--fs-font-sans); /* UI densa do app */ --fs-text-button: 600 13px/1.2 var(--fs-font-sans); --fs-text-label: 500 12.5px/1.3 var(--fs-font-sans); --fs-text-caption: 500 12px/1.35 var(--fs-font-sans); --fs-text-data-mono: 400 12px/1.4 var(--fs-font-mono); /* IDs, hashes, timestamps */ /* ======================= SPACING ======================================= */ --fs-space-xs: 4px; --fs-space-sm: 8px; --fs-space-md: 12px; --fs-space-base: 16px; --fs-space-lg: 20px; --fs-space-xl: 24px; --fs-space-xxl: 32px; --fs-space-section: 28px; /* ======================= RADIUS ======================================== */ --fs-radius-xs: 2px; /* detalhes de sublinhado */ --fs-radius-sm: 8px; --fs-radius-interact: 10px; /* inputs e botões — o raio de "interação" */ --fs-radius-md: 12px; /* raio de card padrão */ --fs-radius-lg: 16px; /* cards grandes */ --fs-radius-xl: 20px; --fs-radius-full: 999px; /* pills, avatares, contadores */ /* ======================= SHADOW ======================================== */ --fs-shadow-card: 0 1px 2px rgba(16, 24, 40, .05); --fs-shadow-pop: 0 12px 32px rgba(16, 24, 40, .14); /* menus, popovers */ --fs-shadow-modal: 0 24px 64px rgba(16, 24, 40, .22); /* modais, drawers */ --fs-nav-shadow: 0 6px 24px rgba(16, 24, 40, .08); /* ======================= MOTION ======================================== */ --fs-ease-out: cubic-bezier(.16, 1, .3, 1); --fs-duration-fast: .13s; --fs-duration-base: .4s; /* ======================= LAYOUT CONSTANTS ============================== */ --fs-header-height: 62px; /* topbar de busca */ --fs-sidebar-width: 232px; --fs-sidebar-collapsed: 72px; --fs-content-max: 1200px; --fs-bp-tablet: 768px; --fs-bp-mobile: 480px; } /* ============================================================================ DARK THEME SCAFFOLD — not defined in the source design system. Uncomment and supply real values only when a dark spec exists. ---------------------------------------------------------------------------- [data-theme="dark"] { --fs-ink: ; --fs-body: ; --fs-muted: ; --fs-canvas: ; --fs-surface-card: ; --fs-surface-soft: ; --fs-hairline: ; --fs-success-bg: ; --fs-danger-bg: ; --fs-warning-bg: ; --fs-info-bg: ; --fs-app-gradient: ; } ============================================================================ */