/* ============================================================= FOOZ Design System — Colors & Type Infrastructure-grade UI tokens. ============================================================= */ /* --- Fonts ---------------------------------------------------- */ @font-face { font-family: "Geologica"; font-style: normal; font-weight: 100; font-display: swap; src: url("./fonts/Geologica-Thin.ttf") format("truetype"); } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 200; font-display: swap; src: url("./fonts/Geologica-ExtraLight.ttf") format("truetype"); } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/Geologica-Light.ttf") format("truetype"); } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Geologica-Regular.ttf") format("truetype"); } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Geologica-Medium.ttf") format("truetype"); } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Geologica-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Geologica-Bold.ttf") format("truetype"); } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Geologica-ExtraBold.ttf") format("truetype"); } @font-face { font-family: "Geologica"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/Geologica-Black.ttf") format("truetype"); } /* Inter is loaded via Google Fonts for the secondary UI face. In production, host locally to avoid CDN dependencies. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* --------------------------------------------------------------- CORE PALETTE — FOZ DEEP SEA Official 7-stop brand palette. Use sparingly; the further down the ladder, the more "infrastructure" the surface feels. The Deep Sea ladder is the spine. Anything else (lavender accents, report cyan, semantic colors) builds on top of it. --------------------------------------------------------------- */ /* 1 — Bright Cerulean — signal cyan, live data, brand drop */ --fooz-cyan: #00B0FB; --fooz-bright-cerulean: #00B0FB; /* 2 — Celestial Blue — secondary actions, marketing accents */ --fooz-azure: #3B86F5; --fooz-celestial: #3B86F5; --fooz-celestial-blue: #3B86F5; /* 3 — Rich Blue — primary brand action, focus, links */ --fooz-electric: #0D0EFF; --fooz-rich: #0D0EFF; --fooz-rich-blue: #0D0EFF; /* 4 — Cobalt Blue — primary hover, deeper accents */ --fooz-indigo: #0D0EB0; /* legacy alias — semantically Cobalt */ --fooz-cobalt: #0D0EB0; --fooz-cobalt-blue: #0D0EB0; /* 5 — Catalina Blue — body emphasis, dark UI surfaces */ --fooz-navy: #001D82; --fooz-catalina: #001D82; --fooz-catalina-blue: #001D82; /* 6 — Dark Royal Blue — dark surface base */ --fooz-deep: #000F5A; --fooz-dark-royal: #000F5A; --fooz-dark-royal-blue: #000F5A; /* 7 — Blue Charcoal — darkest surface, near-black brand */ --fooz-abyss: #00051A; --fooz-charcoal: #00051A; --fooz-blue-charcoal: #00051A; /* Neutrals (brand-spec) */ --fooz-white: #FFFFFF; --fooz-fog: #EEEEEE; /* soft surface divider */ --fooz-mist: #B3E0FC; /* tinted neutral, brand-adjacent */ /* Extended neutrals (derived, oklch-tuned for cool cast) */ --fooz-n-50: #F7F9FC; --fooz-n-100: #EEF2F8; --fooz-n-200: #E1E7F0; --fooz-n-300: #C8D2E1; --fooz-n-400: #9AA7BD; --fooz-n-500: #6B7A93; --fooz-n-600: #4B5670; --fooz-n-700: #2F3852; --fooz-n-800: #1B2238; --fooz-n-900: #0E1426; /* Product accents (drop marks) */ --fooz-energy: #F3B41C; /* energia — solar yellow */ --fooz-gas: #F37920; /* gás — flame orange */ --fooz-water: #00B0FB; /* água — signal cyan */ /* Semantic */ --fooz-success: #19B981; --fooz-warning: #F3B41C; --fooz-danger: #E5484D; --fooz-info: #00B0FB; /* --------------------------------------------------------------- SURFACE / FOREGROUND — light mode (default) --------------------------------------------------------------- */ --bg-canvas: var(--fooz-n-50); --bg-surface: #FFFFFF; --bg-sunken: var(--fooz-n-100); --bg-hover: rgba(13, 14, 255, 0.04); --bg-active: rgba(13, 14, 255, 0.08); --fg-strong: var(--fooz-abyss); --fg-default: var(--fooz-n-800); --fg-muted: var(--fooz-n-500); --fg-subtle: var(--fooz-n-400); --fg-on-brand: #FFFFFF; --fg-link: var(--fooz-electric); --border-subtle: rgba(14, 20, 38, 0.06); --border-default: rgba(14, 20, 38, 0.10); --border-strong: rgba(14, 20, 38, 0.18); --border-focus: var(--fooz-electric); /* --------------------------------------------------------------- REPORTS PALETTE — extracted from the live FOOZ PDF reports (RELATÓRIOS de Consumo, Alertas, Economia). The reports are the source of truth for any printable / dashboard output. --------------------------------------------------------------- */ --report-cyan: #00B0FB; /* same as --fooz-cyan — page section titles, banner fill */ --report-cyan-strong:#0091D6; /* hover / pressed */ --report-navy: #001A4D; /* cover dark column, body emphasis */ --report-text: #1B2238; /* body */ --report-muted: #6B7A93; /* labels, metadata */ /* Delta indicators (used on every report KPI row) */ --report-delta-pos: #10A36D; /* ▼ economy good / consumption down */ --report-delta-neg: #D03A40; /* ▲ consumption up / overrun */ --report-delta-zero: #9AA7BD; /* ● neutral */ /* Categorical chart palette (alerts bar chart, table markers, legends) */ --cat-1: #00B0FB; /* cyan — consumption */ --cat-2: #F37920; /* orange — peak / pico de consumo */ --cat-3: #5BB6FB; /* sky-blue — telemetry / fora do expediente */ --cat-4: #DC3545; /* coral red — sinal / signal interference */ --cat-5: #F3B41C; /* warm yellow — energy */ --cat-6: #5BB6FB; /* sky — reservatório */ --cat-7: #19B981; /* green — meta atingida */ --cat-8: #6B7A93; /* gray — outros */ /* --------------------------------------------------------------- GRADIENT — "Foz Deep Sea" — the canonical brand gradient. Diagonal from Bright Cerulean down through the full Deep Sea ladder to Blue Charcoal. Use for hero washes, brand keylines, marketing surfaces. Never use as a button fill. --------------------------------------------------------------- */ --gradient-ocean: linear-gradient(180deg, #00B0FB 0%, #3B86F5 28%, #0D0EFF 58%, #001D82 82%, #000F5A 100%); --gradient-ocean-h: linear-gradient(90deg, #00B0FB 0%, #3B86F5 28%, #0D0EFF 58%, #001D82 82%, #000F5A 100%); --gradient-ocean-soft: linear-gradient(180deg, rgba(0,176,251,0.10) 0%, rgba(0,15,90,0.00) 70%); /* --------------------------------------------------------------- GRADIENT — "FOOZ CTA" — primary call-to-action diagonal The single official gradient for interactive surfaces on light backgrounds. Goes from Bright Cerulean / Sky highlight at the top-left → Rich Blue mid → Catalina Blue at the bottom-right. Always pair with the official shadow + inset highlight: background: var(--gradient-cta); box-shadow: var(--shadow-cta); --------------------------------------------------------------- */ --gradient-cta: linear-gradient(135deg, #5BB6FB 0%, #0D0EFF 50%, #001D82 100%); --gradient-cta-hover: linear-gradient(135deg, #7AC4FC 0%, #3B86F5 35%, #0D0EFF 70%, #001D82 100%); --gradient-cta-text: linear-gradient(120deg, #3B86F5 0%, #0D0EFF 55%, #001D82 100%); /* Drop-shadow + inner highlight that gives the pill its lift on white. Use --shadow-cta on buttons; --shadow-cta-lg on hero CTAs / promo pills. */ --shadow-cta: 0 10px 24px -8px rgba(13,14,255,0.45), inset 0 1px 0 rgba(255,255,255,0.30); --shadow-cta-lg: 0 18px 38px -12px rgba(13,14,255,0.50), 0 4px 12px -4px rgba(0,29,130,0.30), inset 0 1px 0 rgba(255,255,255,0.32); /* Hairline accents — thin horizontal / vertical lines that frame hero edges, sidebar borders, KPI tops. Always blue → blue. */ --gradient-hairline-h: linear-gradient(90deg, #00B0FB 0%, #3B86F5 50%, #001D82 100%); --gradient-hairline-v: linear-gradient(180deg, #00B0FB 0%, #3B86F5 50%, #001D82 100%); /* Alias — the full 7-stop ladder, advertised name */ --gradient-foz-deep-sea: linear-gradient(135deg, #00B0FB 0%, /* Bright Cerulean */ #3B86F5 18%, /* Celestial Blue */ #0D0EFF 38%, /* Rich Blue */ #0D0EB0 58%, /* Cobalt Blue */ #001D82 78%, /* Catalina Blue */ #000F5A 92%, /* Dark Royal Blue */ #00051A 100% /* Blue Charcoal */ ); /* Card gradients — pre-mixed pairs from the Deep Sea ladder. Use these on the 5-card category row in marketing (see image). Goes from light at index 1 to near-black at index 5. */ --gradient-card-1: linear-gradient(160deg, #5BB6FB 0%, #00B0FB 60%, #3B86F5 100%); /* cyan family */ --gradient-card-2: linear-gradient(160deg, #3B86F5 0%, #0D0EFF 100%); /* celestial → rich */ --gradient-card-3: linear-gradient(160deg, #0D0EB0 0%, #001D82 70%, #000F5A 100%); /* cobalt → catalina → dark royal */ --gradient-card-4: linear-gradient(160deg, #001D82 0%, #000F5A 50%, #00051A 100%); /* catalina → charcoal */ --gradient-card-5: linear-gradient(160deg, #000F5A 0%, #00051A 100%); /* dark royal → charcoal */ /* --------------------------------------------------------------- ACCENT — Marketing Violet ⚠️ DEPRECATED Removed from the brand spine in 2026-05. Kept here only for back-compat with legacy artifacts that still reference these tokens. NEW UI must use `--gradient-cta` for interactive surfaces and the Deep Sea palette for everything else. --------------------------------------------------------------- */ --accent-violet: #0D0EFF; /* @deprecated → use --fooz-rich */ --accent-violet-light: #5BB6FB; /* @deprecated → use --fooz-azure-soft */ --accent-violet-mid: #3B86F5; /* @deprecated → use --fooz-celestial */ --accent-violet-deep: #0D0EB0; /* @deprecated → use --fooz-cobalt */ /* --------------------------------------------------------------- SPECTRUM GRADIENT ⚠️ DEPRECATED Original cyan→violet rainbow. Replaced by `--gradient-cta` (Celestial → Rich → Catalina). Kept as alias resolving to the new sober blue ramp so older surfaces don't break. --------------------------------------------------------------- */ --spectrum-sky: #5BB6FB; --spectrum-azure: #3B86F5; --spectrum-core: #0D0EFF; --spectrum-indigo: #001D82; --spectrum-violet: #000F5A; /* @deprecated → was #8272F0, now Dark Royal */ --gradient-spectrum: linear-gradient(90deg, #5BB6FB 0%, #00B0FB 14%, #3B86F5 48%, #0D0EFF 78%, #001D82 100%); --gradient-spectrum-v: linear-gradient(180deg, #5BB6FB 0%, #00B0FB 14%, #3B86F5 48%, #0D0EFF 78%, #001D82 100%); --gradient-spectrum-radial: radial-gradient(120% 100% at 0% 50%, #5BB6FB 0%, #0D0EFF 40%, #001D82 100%); /* --------------------------------------------------------------- RADII — soft, rounded but never pill (except controls). --------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* --------------------------------------------------------------- SHADOWS — soft, layered, cool-tinted. Apple-quiet. --------------------------------------------------------------- */ --shadow-xs: 0 1px 1px rgba(14, 20, 38, 0.04); --shadow-sm: 0 1px 2px rgba(14, 20, 38, 0.06), 0 1px 1px rgba(14, 20, 38, 0.03); --shadow-md: 0 4px 12px -2px rgba(14, 20, 38, 0.08), 0 2px 4px rgba(14, 20, 38, 0.04); --shadow-lg: 0 12px 32px -8px rgba(14, 20, 38, 0.12), 0 4px 8px rgba(14, 20, 38, 0.04); --shadow-xl: 0 24px 56px -12px rgba(14, 20, 38, 0.18), 0 8px 16px rgba(14, 20, 38, 0.06); --shadow-focus: 0 0 0 4px rgba(13, 14, 255, 0.16); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* --------------------------------------------------------------- SPACING — 4pt scale. --------------------------------------------------------------- */ --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; /* --------------------------------------------------------------- TYPOGRAPHY — Geologica (display) + Inter (UI fallback). Geologica is the brand voice; Inter is for dense data tables where Geologica's geometric warmth is too soft. --------------------------------------------------------------- */ --font-display: "Geologica", "Inter", system-ui, -apple-system, sans-serif; --font-ui: "Geologica", "Inter", system-ui, -apple-system, sans-serif; --font-data: "Inter", "Geologica", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — desktop. Steps in 1.18 minor-third. */ --fs-12: 12px; --lh-12: 16px; --fs-13: 13px; --lh-13: 18px; --fs-14: 14px; --lh-14: 20px; --fs-15: 15px; --lh-15: 22px; --fs-16: 16px; --lh-16: 24px; --fs-18: 18px; --lh-18: 28px; --fs-20: 20px; --lh-20: 30px; --fs-24: 24px; --lh-24: 32px; --fs-30: 30px; --lh-30: 38px; --fs-36: 36px; --lh-36: 44px; --fs-48: 48px; --lh-48: 56px; --fs-64: 64px; --lh-64: 70px; --fs-80: 80px; --lh-80: 84px; /* Letterspacing — Geologica needs slight negative at display sizes. */ --tracking-tight: -0.022em; --tracking-snug: -0.014em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* Motion — calm, decisive. No bounce. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* default exit */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* loops, scrubs */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; } /* =============================================================== DARK MODE Surfaces drop into the deep-ocean palette. =============================================================== */ :root.dark, [data-theme="dark"] { --bg-canvas: var(--fooz-abyss); --bg-surface: #060B25; /* one step above abyss */ --bg-sunken: #03081C; --bg-hover: rgba(0, 176, 251, 0.08); --bg-active: rgba(0, 176, 251, 0.14); --fg-strong: #FFFFFF; --fg-default: #E5ECF8; --fg-muted: #8C9BBA; --fg-subtle: #5F6E8E; --fg-on-brand: #FFFFFF; --fg-link: var(--fooz-cyan); --border-subtle: rgba(255, 255, 255, 0.06); --border-default:rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50), 0 1px 1px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.65), 0 4px 8px rgba(0, 0, 0, 0.30); --shadow-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.75), 0 8px 16px rgba(0, 0, 0, 0.35); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* =============================================================== SEMANTIC TYPOGRAPHY CLASSES =============================================================== */ .fz-display-1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-80); line-height: var(--lh-80); letter-spacing: var(--tracking-tight); color: var(--fg-strong); } .fz-display-2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-64); line-height: var(--lh-64); letter-spacing: var(--tracking-tight); color: var(--fg-strong); } .fz-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-48); line-height: var(--lh-48); letter-spacing: var(--tracking-snug); color: var(--fg-strong); } .fz-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-36); line-height: var(--lh-36); letter-spacing: var(--tracking-snug); color: var(--fg-strong); } .fz-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-24); line-height: var(--lh-24); letter-spacing: var(--tracking-snug); color: var(--fg-strong); } .fz-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: var(--tracking-normal);color: var(--fg-strong); } .fz-eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); } .fz-body-lg { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--fg-default); } .fz-body { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-15); line-height: var(--lh-15); color: var(--fg-default); } .fz-body-sm { font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--fg-default); } .fz-caption { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--fg-muted); } .fz-label { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--fg-default); } .fz-data { font-family: var(--font-data); font-feature-settings: "tnum" 1, "cv11" 1; font-variant-numeric: tabular-nums; } .fz-mono { font-family: var(--font-mono); font-feature-settings: "calt" 0; } .fz-link { color: var(--fg-link); text-decoration: none; font-weight: 500; } .fz-link:hover{ text-decoration: underline; text-underline-offset: 3px; }