/* ================================================================
Pipelet Design System — "Naturalist" theme (extension)
----------------------------------------------------------------
A vintage natural-history skin ON TOP of the Momentum
lightBronzeWebex base. It ONLY re-maps existing semantic token
*values* — same token names the components already consume — so
it is purely additive and non-invasive:
* Nothing changes until a surface opts in via either
(whole app)
...
(one page/section)
* Hardcoded hex in legacy templates will NOT follow the skin
(that is the audit's hex->token hardening backlog). Author
NEW surfaces token-pure and they are fully naturalist on day 1.
Mood: warm, calm, elegant, faintly mysterious — aged paper, fine
lines, muted palette, generous whitespace. No neon, no hard
shadows, no glassmorphism.
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&display=swap');
[data-theme^="naturalist"],
.theme-naturalist {
/* ---- Typography: clean sans for UI, Fraunces serif for display ---- */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-family-serif: 'Fraunces', 'GT Alpina', Georgia, 'Times New Roman', serif;
--font-display: 'Fraunces', 'GT Alpina', Georgia, serif; /* new token */
/* ---- Palette primitives (muted natural-history) ---- */
--paper-page: #EDE8DC; /* warm off-white ground (much less yellow) */
--paper-card: #FAF7F0; /* near-white leaf — cards lift off the page */
--paper-sunken: #E0DACB; /* recessed */
--ink: #1F1B14; /* near-black warm brown — crisp contrast */
--ink-sepia: #574A38; /* sepia (darkened for readability) */
--ink-faded: #9A8A6E; /* faded (WCAG-overridden below) */
--line: rgba(74, 58, 38, .22);
--petrol: #2E5E5B;
--green-faded: #5C7349;
--ochre: #9A6B16;
--rust: #9B3B22;
/* ---- Backgrounds ---- */
--color-bg-primary: var(--paper-card);
--color-bg-secondary: var(--paper-sunken);
--color-bg-tertiary: var(--paper-page);
--color-bg-quaternary: #DAD2C0;
--color-bg-active: #E4DDCD;
--color-bg-disabled: #E8E2D6;
--color-bg-glass: rgba(250, 247, 240, .85);
--color-bg-overlay: rgba(42, 35, 23, .45);
--color-bg-gradient: var(--paper-page);
--color-bg-brand-primary: var(--petrol);
--color-bg-brand-secondary: #244B49;
--color-bg-brand-subtle: #DFE6DD;
--color-bg-success-primary: var(--green-faded);
--color-bg-success-subtle: #E4E8D4;
--color-bg-warning-primary: var(--ochre);
--color-bg-warning-subtle: #F0E6CC;
--color-bg-error-primary: var(--rust);
--color-bg-error-subtle: #EFD9CF;
/* ---- Text / foreground ---- */
--color-text-primary: var(--ink);
--color-text-secondary: var(--ink-sepia);
--color-text-tertiary: var(--ink-faded);
--color-text-quaternary: #B5A684;
--color-text-placeholder: #A8997C;
--color-text-disabled: #B7A988;
--color-text-brand-primary: var(--petrol);
--color-text-brand-secondary: #244B49;
--color-text-success: var(--green-faded);
--color-text-warning: var(--ochre);
--color-text-error: var(--rust);
--color-fg-primary: var(--ink);
--color-fg-secondary: var(--ink-sepia);
--color-fg-tertiary: var(--ink-faded);
--color-fg-brand-primary: var(--petrol);
--color-fg-success-primary: var(--green-faded);
--color-fg-warning-primary: var(--ochre);
--color-fg-error-primary: var(--rust);
/* ---- Borders (hairline sepia at rising emphasis) ---- */
--color-border: var(--line);
--color-border-tertiary: rgba(74, 58, 38, .16);
--color-border-secondary: rgba(74, 58, 38, .28);
--color-border-primary: rgba(74, 58, 38, .40);
--color-border-brand: var(--petrol);
--color-border-brand-solid: var(--petrol);
--color-border-error: var(--rust);
--color-border-error-solid: var(--rust);
/* ---- Brand ramp -> petrol (nav-active, links, focus) ---- */
--brand-50: #DFE6DD;
--brand-100: #C3D2CE;
--brand-200: #9BB5B0;
--brand-300: #6E9590;
--brand-400: #487571;
--brand-500: var(--petrol);
--brand-600: #244B49;
--brand-700: #1C3A38;
/* ---- Inputs / controls ---- */
--input-bg: #F8F1DD;
--input-text: var(--ink);
--input-placeholder: #A8997C;
--input-border: rgba(74, 58, 38, .30);
--input-border-hover: rgba(74, 58, 38, .45);
--input-border-focus: var(--petrol);
--input-ring-focus: 0 0 0 3px rgba(46, 94, 91, .22);
--toggle-bg-off: #CFC1A0;
--toggle-bg-on: var(--petrol);
--toggle-knob: #F8F1DD;
--indicator-online: var(--green-faded);
--indicator-offline: var(--ink-faded);
/* ---- Focus rings (petrol, not Webex blue) ---- */
--ring-brand: 0 0 0 3px rgba(46, 94, 91, .25);
--ring-gray: 0 0 0 3px rgba(106, 90, 67, .14);
--ring-error: 0 0 0 3px rgba(155, 59, 34, .22);
/* ---- Shadows softened to warm, near-flat (no hard shadows) ---- */
--shadow-xs: 0 1px 1px rgba(60, 45, 25, .05);
--shadow-sm: 0 1px 2px rgba(60, 45, 25, .06);
--shadow-md: 0 2px 6px rgba(60, 45, 25, .07);
--shadow-lg: 0 6px 14px rgba(60, 45, 25, .08);
--shadow-xl: 0 10px 22px rgba(60, 45, 25, .09);
/* ---- Motion (ruhig, langsam) ---- */
--transition-subtle: 120ms ease;
--transition-standard: 200ms ease;
--transition-generous: 420ms cubic-bezier(.4, 0, .2, 1);
/* ---- Energy-flow domain colours (muted). SVGs reference these as
var(--energy-*, ) so non-naturalist themes keep the
original bright palette and only naturalist re-tints. ---- */
--energy-pv: var(--ochre);
--energy-battery: var(--green-faded);
--energy-grid: var(--ink-sepia);
--energy-cloud: #4A7A8C; /* slate-sepia */
--energy-wallbox: var(--rust);
--energy-socket: var(--petrol);
/* ---- Specimen illustration style (the curated fine-line objects) ---- */
--specimen-stroke: var(--ink-sepia);
--specimen-stroke-w: 1.1px;
--specimen-hairline: .7px;
--specimen-wash-petrol: rgba(46, 94, 91, .10);
--specimen-wash-ochre: rgba(154, 107, 22, .10);
--specimen-wash-green: rgba(92, 115, 73, .11);
--specimen-wash-rust: rgba(155, 59, 34, .09);
--specimen-wash-sepia: rgba(106, 90, 67, .08);
/* ---- WCAG-AA contrast (cleaner, lighter paper → ratios improve).
Matrix on --paper-card #FAF7F0:
primary #1F1B14 ~15.6:1 AAA
secondary #574A38 ~7.5:1 AAA
tertiary #6E6048 ~5.3:1 AA
petrol #2E5E5B ~6.0:1 AA ---- */
--ink-faded: #6E6048;
--input-placeholder: #7E7058;
--color-text-tertiary: #6E6048;
}
/* Paper ground + a *very* faint grain (subtle, never loud). */
[data-theme^="naturalist"] body,
.theme-naturalist {
background-color: var(--paper-page);
background-image:
radial-gradient(rgba(74, 58, 38, .028) 1px, transparent 1px);
background-size: 4px 4px;
color: var(--color-text-primary);
}
/* Display headings become the fine serif when themed (scoped only). */
[data-theme^="naturalist"] h1,
[data-theme^="naturalist"] h2,
[data-theme^="naturalist"] .ct-docs-page-h1-title,
[data-theme^="naturalist"] .edge-section-heading,
.theme-naturalist h1,
.theme-naturalist h2,
.theme-naturalist .ct-docs-page-h1-title,
.theme-naturalist .edge-section-heading {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: .01em;
}
/* Paper cards: hairline frame, soft warm shadow, crisp corners. */
[data-theme^="naturalist"] .card,
[data-theme^="naturalist"] .edge-summary-card,
[data-theme^="naturalist"] .dash-kpi,
[data-theme^="naturalist"] .lm-group-card,
.theme-naturalist .card,
.theme-naturalist .edge-summary-card,
.theme-naturalist .dash-kpi,
.theme-naturalist .lm-group-card {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-secondary);
box-shadow: var(--shadow-sm);
border-radius: var(--radius-md);
}
/* ---- Naturalist motif components (additive; use where wanted) ---- */
/* Small-caps overline label, e.g. section kickers. */
.edge-overline {
font-family: var(--font-family);
font-variant: small-caps;
letter-spacing: .12em;
font-size: 12px;
color: var(--color-text-secondary);
}
/* Editorial display heading helper. */
.edge-display {
font-family: var(--font-display);
font-weight: 500;
color: var(--color-text-primary);
line-height: 1.12;
}
/* Fine double rule (engraving-style divider). */
.edge-rule {
height: 3px;
border-top: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--color-border-tertiary);
margin: 16px 0;
}
/* Curated "specimen plate": numbered, fine-framed illustration card. */
.edge-plate {
position: relative;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-sm);
padding: 18px;
}
.edge-plate__no {
font-variant: small-caps;
letter-spacing: .12em;
font-size: 11px;
color: var(--color-text-tertiary);
}
.edge-plate__caption {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--color-text-secondary);
text-align: center;
}
/* ---- Component states (the tokens existed; these apply them) ---- */
[data-theme^="naturalist"] .edge-btn,
.theme-naturalist .edge-btn {
transition: background var(--transition-standard),
border-color var(--transition-standard);
}
[data-theme^="naturalist"] .edge-btn:hover,
.theme-naturalist .edge-btn:hover { background: var(--color-bg-active); }
[data-theme^="naturalist"] .edge-btn:active,
.theme-naturalist .edge-btn:active { transform: translateY(.5px); }
[data-theme^="naturalist"] .edge-btn-primary,
.theme-naturalist .edge-btn-primary {
background: var(--petrol); color: #F8F1DD; border-color: var(--petrol);
}
[data-theme^="naturalist"] .edge-btn-primary:hover,
.theme-naturalist .edge-btn-primary:hover { background: var(--brand-600); }
[data-theme^="naturalist"] a,
.theme-naturalist a {
color: var(--color-text-brand-primary);
text-underline-offset: 2px;
}
[data-theme^="naturalist"] a:hover,
.theme-naturalist a:hover { color: var(--brand-600); }
[data-theme^="naturalist"] .edge-input:focus,
[data-theme^="naturalist"] input:focus,
[data-theme^="naturalist"] select:focus,
[data-theme^="naturalist"] textarea:focus,
.theme-naturalist .edge-input:focus,
.theme-naturalist input:focus,
.theme-naturalist select:focus,
.theme-naturalist textarea:focus {
border-color: var(--input-border-focus);
box-shadow: var(--input-ring-focus);
outline: none;
}
/* Visible focus ring for keyboard users on every interactive element. */
[data-theme^="naturalist"] :focus-visible,
.theme-naturalist :focus-visible {
outline: none;
box-shadow: var(--ring-brand);
border-radius: var(--radius-xs);
}
[data-theme^="naturalist"] .edge-table tbody tr:hover,
.theme-naturalist .edge-table tbody tr:hover { background: var(--color-bg-active); }
[data-theme^="naturalist"] :disabled,
[data-theme^="naturalist"] [aria-disabled="true"],
.theme-naturalist :disabled,
.theme-naturalist [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* ---- Specimen illustrations (curated fine-line domain objects) ----