/* ============================================================================= ECOSOUND · DESIGN TOKENS — Sobral & Monteiro brand ----------------------------------------------------------------------------- THIS IS THE CUSTOMIZATION SURFACE. Change the brand here and it propagates through the whole app. Every color, font, radius, shadow, spacing step and animation timing used anywhere in the UI resolves to a variable below. Values are the verified SM Consulting brand (see design/brand/design.md), except the greens, which were retuned away from the site's yellow-greens. Provenance tags: [SITE] read from smconsulting.pt rendered pages (getComputedStyle) and the Themify Ultra theme CSS — verified 2026-08-13 [LOGO] exact vector fill from SM_logo_versoes_2021.pdf [DERIVED] product need the site never had — open to iteration [TUNED] deliberately moved off the site value — see the green block ============================================================================= */ :root { /* ---- BRAND / CORE PALETTE (deep greens on white) ---------------------- */ /* The greens sit on a true-green hue (~109°) rather than the site's yellow-green (~84–91°), which is what read as fluorescent. Hue and lightness come from the midpoint of a moss/fir blend; chroma is then pushed back up to 70% of the original palette's colourfulness, because the midpoint on its own went flat — its tints were all but neutral grey (chroma 0.009–0.028). Colourfulness was never the problem, so it is safe to spend here: even at 100% nothing leaves sRGB and every check holds. Retune with design/brand/palette-blind-test.html. */ --ecs-forest-900: #2C2E35; /* [LOGO] wordmark ink — dark panels, sidebars */ --ecs-forest-800: #24262C; /* [DERIVED] darker ink — selection ink */ --ecs-forest-700: #383A42; /* [DERIVED] lifted ink */ --ecs-forest-600: #37712A; /* [TUNED] button/link hover green */ --ecs-forest-500: #417D34; /* [TUNED] PRIMARY action green (nav CTA, kicker)*/ --ecs-green-600: #31672A; /* [TUNED] ink green — AA text links (6.77:1) */ --ecs-green-500: #599741; /* [TUNED] secondary CTA green, form borders */ --ecs-green-400: #8DBD83; /* [TUNED] panel green — accents on dark surfaces*/ --ecs-green-350: #B2D7A6; /* [DERIVED] sprout — tour step button at rest */ --ecs-green-300: #CADDC8; /* [TUNED] light tint — selection bg, focus halo */ --ecs-green-200: #E2EEDC; /* [TUNED] mint — chips, featured panels */ --ecs-green-100: #F0F8EF; /* [TUNED] lightest mint panel */ /* ---- NEUTRALS / SURFACES --------------------------------------------- */ --ecs-paper: #F4F4F1; /* [DERIVED] app background behind white cards */ --ecs-paper-alt: #E8E7E7; /* [SITE] footer-gray — outer/body background */ --ecs-surface: #FFFFFF; /* [SITE] cards, page base */ --ecs-surface-2: #FAFAF8; /* [DERIVED] hover surface */ --ecs-surface-3: #F0F0ED; /* [DERIVED] readonly inputs */ --ecs-crumb-bg: #ECECEA; /* [DERIVED] breadcrumb chip */ /* ---- TEXT ------------------------------------------------------------- */ --ecs-ink: #2C2E35; /* [LOGO] primary text / headings */ --ecs-text: #444444; /* [SITE] body strong */ --ecs-text-2: #5A5A5A; /* [DERIVED] body */ --ecs-text-muted: #666666; /* [SITE] site body text — secondary */ --ecs-text-faint: #9C9B9B; /* [LOGO] neutral gray — captions */ --ecs-text-mint: #5A6656; /* [DERIVED] quiet text on Mint, green-grey (5.0:1) */ --ecs-text-meadow: #34492F; /* [DERIVED] quiet text on Meadow, green-ink (4.5:1) */ --ecs-on-dark: #FFFFFF; /* text on ink surfaces */ --ecs-on-dark-2: rgba(255, 255, 255, 0.78); /* muted on ink */ --ecs-on-dark-3: rgba(255, 255, 255, 0.56); /* fainter on ink */ --ecs-on-dark-4: rgba(255, 255, 255, 0.38); /* faintest on ink */ /* ---- BORDERS / LINES -------------------------------------------------- */ --ecs-line: #E4E4E4; /* [SITE] hairline — the workhorse border */ --ecs-line-2: #E0E0E0; --ecs-line-3: #ECECEC; --ecs-line-4: #F1F1EF; --ecs-line-mint: #CADDC8; /* [TUNED] green hairline (form fields, chips) */ --ecs-line-field: #D5D5D5; /* [SITE] input border at rest */ --ecs-line-strong: #C9C9C7; --ecs-line-dark: rgba(255, 255, 255, 0.08); --ecs-line-dark-2: rgba(255, 255, 255, 0.16); /* Channel triplets for the few places that need a translucent brand colour (pulse rings, scan sweeps, tints over photography). */ --ecs-accent-rgb: 141, 189, 131; /* = --ecs-green-400 */ --ecs-ink-rgb: 44, 46, 53; /* = --ecs-ink */ /* ---- SEMANTIC / STATUS ------------------------------------------------ */ /* Product semantics the marketing site never needed — already harmonized with the earth tones, so they survive the palette swap unchanged. */ --ecs-warn: #C08A2D; /* pending / processing dot */ --ecs-warn-ink: #8A6217; --ecs-warn-ink-2: #6B4E17; --ecs-warn-bg: #FBF3E3; --ecs-warn-bg-2: #F3E9D2; --ecs-warn-line: #EAD9B4; --ecs-alert: #B4532A; /* alert / needs-review */ --ecs-alert-ink: #9A3D1E; --ecs-info: #2C6480; /* CSV / geo accent */ --ecs-info-bg: #EEF3FB; /* ---- SPECTROGRAM INTENSITY RAMP (low → peak) -------------------------- */ /* [TUNED] blended with the palette so intensity reads in the same family as the UI. Relative luminance rises monotonically across the six stops (0.07 → 0.70), which is what keeps the ramp legible as intensity rather than as six unrelated colours — preserve that if you retune it. */ --ecs-spectro-0: #2F5621; --ecs-spectro-1: #3E752F; --ecs-spectro-2: #4F9544; --ecs-spectro-3: #79B56C; --ecs-spectro-4: #AFCB62; --ecs-spectro-5: #E4DF5B; /* ---- CHART SERIES (one colour per species, by rank) ------------------- */ /* [DERIVED] Identity in a stacked chart: slot 1 is the delivery's commonest taxon, slot 6 the sixth, and the rest share the grey Other. Slot 1 is the action green, so splitting the plain green bars by species leaves the commonest one looking like what it was. The ORDER is the colour-blind safety, not decoration: a stack skips a species a night lacks, so slots one apart touch as well as neighbours, and both pairs hold ΔE ≥ 15 under protanopia and deuteranopia (≥ 19.6 for normal vision), measured with the dataviz skill's validate_palette.js on white. Retune only by re-running it. Three slots are under 3:1 on white; the key, every segment's own title and the table under the chart carry the figures for them. */ --ecs-series-1: #417D34; --ecs-series-2: #E87BA4; --ecs-series-3: #4A3AA7; --ecs-series-4: #EDA100; --ecs-series-5: #E34948; --ecs-series-6: #2A78D6; --ecs-series-other: #9C9B9B; /* ---- TYPOGRAPHY ------------------------------------------------------- */ /* [SITE] Roboto confirmed from the rendered DOM (400/500 in use, 700 for headings). IBM Plex Mono is a [DERIVED] utility face for data, coords, counts and uppercase micro-labels. */ --ecs-font-display: 'Roboto', system-ui, sans-serif; --ecs-font-body: 'Roboto', system-ui, sans-serif; --ecs-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* [DERIVED] The landing's section headings only, in italic: the italic of a species name in a survey report, set large. Nothing else uses it. */ --ecs-font-serif: 'Newsreader', Georgia, serif; --ecs-fw-regular: 400; --ecs-fw-medium: 500; --ecs-fw-semi: 500; /* [SITE] the site never goes 600 — medium is the step */ --ecs-fw-bold: 700; --ecs-fw-black: 700; /* [SITE] 700 is the heaviest weight on the site */ /* Type scale. Site anchors for reference: h1 banner 60/70 ls3 · display 40 · standfirst 30/40 · card title 20/30 caps ls1 · kicker 14–20 caps ls2 · body 16/26.4 · small 14/24. */ --ecs-fs-landing: 56px; /* marketing hero headline */ --ecs-fs-section: 44px; /* marketing section headline (pricing) */ --ecs-fs-hero: 40px; /* = site display size on green panels */ --ecs-fs-h1: 36px; --ecs-fs-h2: 30px; /* = site standfirst size */ --ecs-fs-h3: 28px; --ecs-fs-h4: 26px; --ecs-fs-title: 22px; --ecs-fs-lg: 19px; --ecs-fs-md: 16px; --ecs-fs-base: 15px; --ecs-fs-sm: 14px; --ecs-fs-xs: 13px; --ecs-fs-2xs: 12px; --ecs-fs-3xs: 11px; --ecs-fs-micro: 10px; --ecs-tracking-wide: 0.14em; /* ≈ site kicker ls 2px @ 14px */ --ecs-tracking-wider: 0.20em; --ecs-tracking-eyebrow: 0.24em; --ecs-tracking-tight: -0.02em; /* ≈ site standfirst ls −0.6px @ 30px */ /* ---- SPACING SCALE ---------------------------------------------------- */ --ecs-space-1: 4px; --ecs-space-2: 8px; --ecs-space-3: 12px; --ecs-space-4: 16px; --ecs-space-5: 20px; --ecs-space-6: 24px; --ecs-space-7: 32px; --ecs-space-8: 40px; --ecs-space-9: 52px; --ecs-space-10: 56px; /* ---- RADII ------------------------------------------------------------ */ /* The brand is square. Containers (cards, panels, buttons, tags, rows) sit at 0 and rely on hairline borders; only form controls keep the 4px step the site uses on its inputs. Round is reserved for genuinely circular things — dots, avatars, the circled "+". */ --ecs-radius-sm: 0; /* meters, bars, small chips */ --ecs-radius-md: 4px; /* inputs, selects, segmented items, icon tiles */ --ecs-radius-lg: 0; /* buttons */ --ecs-radius-xl: 0; /* panels */ --ecs-radius-2xl: 0; /* cards */ --ecs-radius-3xl: 0; /* full-bleed containers */ --ecs-radius-pill: 999px;/* dots / avatars / circled "+" only */ /* ---- SHADOWS ---------------------------------------------------------- */ /* Flat by default: hairline borders carry the separation. Shadows are for true overlays only (menus, dialogs, floating pills). */ --ecs-shadow-card: none; --ecs-shadow-card-strong: 0 14px 34px -20px rgba(44, 46, 53, 0.30); --ecs-shadow-pill: 0 10px 24px -12px rgba(44, 46, 53, 0.35); /* ---- LAYOUT ----------------------------------------------------------- */ --ecs-content-narrow: 420px; --ecs-content-form: 440px; --ecs-content-md: 820px; --ecs-content-wide: 900px; --ecs-split-panel: 540px; /* dark side panel width on split screens */ --ecs-topbar-h: 64px; /* ---- CONSOLE SHELL (admin) -------------------------------------------- */ --ecs-sidebar-w: 252px; /* dark nav rail */ --ecs-sidebar-rail-w: 68px; /* collapsed rail (narrow desktop) */ --ecs-console-bar-h: 66px; /* console top bar */ --ecs-console-max: 1500px;/* widest content column */ --ecs-console-pad-x: 26px; --ecs-console-pad-y: 24px; --ecs-kanban-col: 238px; /* min width of a pipeline column */ /* ---- CONSOLE BREAKPOINTS ---------------------------------------------- */ /* Custom properties can't be used in @media, so these are documentation: the admin stylesheet keys off 1500px (kanban scrolls), 1180px (side panels stack + nav collapses to a rail) and 860px (nav becomes a drawer). Change them in css/admin.css §RESPONSIVE. */ /* ---- CONSOLE TYPE STEPS ----------------------------------------------- */ /* Half-steps the dense console needs between the sizes above. */ --ecs-fs-row: 12.5px; /* table cells, nav labels */ --ecs-fs-meta: 11.5px; /* mono meta lines under a title */ --ecs-fs-hint: 10.5px; /* field hints, tiny mono */ --ecs-fs-tag: 9.5px; /* uppercase mono tags */ /* ---- CONSOLE RADII ---------------------------------------------------- */ --ecs-radius-tag: 0; /* squared uppercase tags */ --ecs-radius-ctl: 4px; /* small controls, segmented items */ --ecs-radius-row: 0; /* list rows, kanban cards */ /* ---- CONSOLE CONTROL HEIGHTS ------------------------------------------ */ /* Three heights, and only three. A filter strip mixes a segmented control, a search box, a latching toggle, a select and a button; each of those used to size itself from its own vertical padding, so one strip came out four different heights and read as drift rather than as a row. Controls now set `min-height` from these and zero their vertical padding: a control still grows for two lines of content, but it never sits below its tier. -lg the top bar's own scale — global search, icon buttons -md every control in a filter strip or a card footer -sm controls inside a table row or a dense chip rail */ --ecs-ctl-h-lg: 38px; --ecs-ctl-h: 34px; --ecs-ctl-h-sm: 28px; /* ---- EXTENDED SEMANTIC SURFACES --------------------------------------- */ --ecs-alert-bg: #F7EAE4; /* destructive chip / hover */ --ecs-alert-bg-soft: #FDF7F4; /* destructive card header */ --ecs-alert-line: #E7D3CB; /* destructive border */ --ecs-alert-line-2: #F7EAE4; /* destructive inner divider */ --ecs-info-line: #D3E0EE; --ecs-info-ink: #24506A; --ecs-star: #E0A93B; /* starred audit row */ --ecs-dot-idle: #B9B9B9; /* neutral timeline / status dot */ --ecs-bar-stored: #7FA8BF; /* stored-but-unverified segment */ --ecs-bar-pending: #E0C079; /* pending segment */ --ecs-surface-flag: #F6FBF5; /* unseen / selected row tint */ --ecs-surface-pick: #F0F8EF; /* picked row + active adjustment box */ /* ---- FOCUS ------------------------------------------------------------- */ /* Keyboard focus indicator. Several controls replace the UA outline with a border-colour change, which is too quiet on its own, so :focus-visible paints this ring instead. `-on-dark` is the variant for the nav rail and other dark surfaces. The ink green is used rather than the primary purely for headroom — both clear AA on white since the palette was retuned. */ --ecs-focus-ring: #31672A; --ecs-focus-on-dark: #8DBD83; --ecs-focus-width: 2px; --ecs-focus-offset: 2px; /* The mint halo under the ring (design.md: "#CADDC8 focus halo"). Its spread is offset + ring + 2px, so it fills the gap between the control and the ring and shows 2px past it. */ --ecs-focus-halo: #CADDC8; --ecs-focus-halo-w: 6px; /* ---- TABLE HEADERS ---------------------------------------------------- */ /* One header spec for every table and list head in the portal: uppercase mono at the kicker size. The ink is text-muted, not the brand's faint grey — #9C9B9B at 11px over a tinted header band is 2.7:1, which is text nobody should have to squint at in an Operate tool. */ --ecs-th-font: var(--ecs-fw-medium) var(--ecs-fs-3xs) / 1.2 var(--ecs-font-mono); --ecs-th-tracking: 0.08em; --ecs-th-ink: var(--ecs-text-muted); /* ---- MOTION (subtle animation system) --------------------------------- */ --ecs-ease: cubic-bezier(0.4, 0, 0.2, 1); --ecs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ecs-dur-toggle: 120ms; /* a state flip: grid cell, tree chevron */ --ecs-dur-fast: 0.18s; --ecs-dur-base: 0.32s; --ecs-dur-slow: 0.40s; --ecs-dur-scan: 1.6s; /* estimate scan line */ --ecs-dur-pulse: 1.8s; /* live status dot */ --ecs-enter-shift: 10px; /* fadeUp translate distance */ }