/* AlpsCraft ERP — design tokens (shared by admin + customer portal). Consumed by components.css, utilities.css, app.css, portal.css. Brand-aligned with alpscraft.at + adventures.alpscraft.at: moss-forest green primary + warm clay accent + Fraunces + Inter + warm stone neutrals. Dual theme via [data-theme="light"|"dark"] on . The no-flash init script in templates/layout/*.html sets the attribute before this stylesheet loads. */ /* ────────────────────────────── Theme-agnostic tokens (typography, spacing, radii, motion, layout) ────────────────────────────── */ :root { /* Typography — Inter (body) + Fraunces (display, with opsz) + JetBrains Mono. */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif; --font-display: 'Fraunces', ui-serif, Georgia, 'Source Serif Pro', 'Iowan Old Style', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Discrete type scale (used by utilities + components) */ --fs-2xs: 0.6875rem; /* 11px */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.875rem; /* 14px */ --fs-md: 0.9375rem; /* 15px */ --fs-lg: 1rem; /* 16px */ --fs-body: 1.0625rem; /* 17px — primary body size (adventures default) */ --fs-xl: 1.125rem; /* 18px */ --fs-2xl: 1.25rem; /* 20px */ --fs-3xl: 1.5rem; /* 24px */ --fs-4xl: 1.875rem; /* 30px */ --fs-5xl: 2.25rem; /* 36px */ /* Fluid display sizes (adventures pattern) */ --fs-h2-fluid: clamp(1.75rem, 2vw + 0.75rem, 2.375rem); --fs-h1-fluid: clamp(2.25rem, 3vw + 1rem, 3.25rem); --fs-display: clamp(2.75rem, 5vw + 1rem, 4.5rem); --fs-hero: clamp(3rem, 8vw + 1rem, 6rem); /* Line heights */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.5; --lh-body: 1.65; --lh-relaxed: 1.7; /* Letter spacing */ --ls-tight: -0.01em; --ls-tighter: -0.02em; --ls-wide: 0.04em; --ls-wider: 0.08em; --ls-eyebrow: 0.12em; /* Spacing scale (4px base) */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem; --section-py: clamp(4rem, 6vw + 1rem, 7rem); /* Radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 9999px; /* Motion — adventures' refined ease + durations */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1); --ease-image: cubic-bezier(0.4, 0, 0.2, 1); --ease: var(--ease-out); /* alias for inline styles using var(--ease) */ --dur-fast: 200ms; --dur: 380ms; --dur-slow: 600ms; /* Layout */ --layout-max: 1240px; --layout-pad: 1.5rem; --layout-pad-lg: 2rem; --sidebar-w: 248px; --topbar-h: 60px; --prose-max: 68ch; /* Z scale */ --z-nav: 50; --z-sidebar: 40; --z-overlay: 70; --z-modal: 80; --z-toast: 90; } @media (min-width: 1024px) { :root { --layout-pad: 2rem; } } /* ────────────────────────────── Light theme — default for client-facing surfaces (portal, public offer, emails). Warm cream surface, ink-deep text, moss-green primary, clay-warm CTA. ────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; /* Surfaces — warm cream / stone */ --color-bg-base: #FAF7F2; --color-bg-elevated: #FFFFFF; --color-bg-raised: #F0EBE2; --color-bg-inset: #F7F4EF; --color-bg-overlay: rgba(15, 24, 19, 0.55); --color-topbar-bg: rgba(250, 247, 242, 0.78); /* Borders — ink-tinted alphas + stone hairline */ --color-border-subtle: rgba(21, 33, 27, 0.08); --color-border-default: #E2DBCD; --color-border-strong: rgba(21, 33, 27, 0.18); --color-border-focus: rgba(47, 93, 69, 0.45); /* Foreground — ink + warm grays */ --color-fg-primary: #15211B; --color-fg-secondary: #5C564C; --color-fg-tertiary: #837C72; --color-fg-muted: #9A9286; --color-fg-inverse: #FAF7F2; /* Accent — moss-forest green (brand primary) */ --color-accent: #2F5D45; --color-accent-rgb: 47 93 69; --color-accent-strong: #1F3D2F; --color-accent-bg: rgb(var(--color-accent-rgb) / 0.08); --color-accent-bg-strong: rgb(var(--color-accent-rgb) / 0.16); --color-accent-ring: rgb(var(--color-accent-rgb) / 0.30); /* CTA — warm clay (adventures clay-600). White text in light mode for AA contrast. */ --color-cta: #B57A4E; --color-cta-rgb: 181 122 78; --color-cta-hover: #9F6740; --color-cta-fg: #FFFFFF; --color-cta-ring: rgb(var(--color-cta-rgb) / 0.30); /* Semantic */ --color-success: #5A8A6F; --color-success-rgb: 90 138 111; --color-success-bg: rgb(var(--color-success-rgb) / 0.12); --color-danger: #8B3A2E; --color-danger-rgb: 139 58 46; --color-danger-bg: rgb(var(--color-danger-rgb) / 0.10); --color-warning: #B57A4E; --color-warning-rgb: 181 122 78; --color-warning-bg: rgb(var(--color-warning-rgb) / 0.12); --color-info: #5A8A6F; --color-info-rgb: 90 138 111; --color-info-bg: rgb(var(--color-info-rgb) / 0.10); /* Badge / pill neutrals */ --color-neutral-bg: rgba(21, 33, 27, 0.06); --color-neutral-fg: #5C564C; /* Shadows — warm-tinted ink, soft */ --shadow-sm: 0 1px 2px rgba(21, 33, 27, 0.04), 0 1px 3px rgba(21, 33, 27, 0.06); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(21, 33, 27, 0.06); --shadow-raised: 0 4px 12px rgba(21, 33, 27, 0.06), 0 2px 4px rgba(21, 33, 27, 0.04); --shadow-overlay: 0 18px 40px rgba(21, 33, 27, 0.10), 0 4px 12px rgba(21, 33, 27, 0.06); --shadow-focus: 0 0 0 3px var(--color-accent-ring); --shadow-focus-cta: 0 0 0 3px var(--color-cta-ring); } /* ────────────────────────────── Dark theme — default for admin (staff work long hours). Warm moss-ink (not cool gray), cream text, lifted-moss accent, lifted-clay CTA. ────────────────────────────── */ :root[data-theme="dark"] { color-scheme: dark; /* Surfaces — deep moss-ink */ --color-bg-base: #0F1813; --color-bg-elevated: #15211B; --color-bg-raised: #1F2D24; --color-bg-inset: #0C1310; --color-bg-overlay: rgba(0, 0, 0, 0.65); --color-topbar-bg: rgba(15, 24, 19, 0.72); /* Borders */ --color-border-subtle: rgba(250, 247, 242, 0.06); --color-border-default: rgba(250, 247, 242, 0.12); --color-border-strong: rgba(250, 247, 242, 0.20); --color-border-focus: rgba(123, 173, 138, 0.45); /* Foreground — cream on dark */ --color-fg-primary: #FAF7F2; --color-fg-secondary: #D7D1C5; --color-fg-tertiary: #A39B8E; --color-fg-muted: #6D6557; --color-fg-inverse: #15211B; /* Accent — sage (lifted moss for dark-surface contrast) */ --color-accent: #7BAD8A; --color-accent-rgb: 123 173 138; --color-accent-strong: #5A8A6F; --color-accent-bg: rgb(var(--color-accent-rgb) / 0.12); --color-accent-bg-strong: rgb(var(--color-accent-rgb) / 0.22); --color-accent-ring: rgb(var(--color-accent-rgb) / 0.30); /* CTA — lifted clay. Dark-ink text in dark mode for AA contrast on bright clay. */ --color-cta: #D4A07A; --color-cta-rgb: 212 160 122; --color-cta-hover: #C18A60; --color-cta-fg: #1A1410; --color-cta-ring: rgb(var(--color-cta-rgb) / 0.32); /* Semantic */ --color-success: #7BAD8A; --color-success-rgb: 123 173 138; --color-success-bg: rgb(var(--color-success-rgb) / 0.14); --color-danger: #C8634F; --color-danger-rgb: 200 99 79; --color-danger-bg: rgb(var(--color-danger-rgb) / 0.14); --color-warning: #D4A07A; --color-warning-rgb: 212 160 122; --color-warning-bg: rgb(var(--color-warning-rgb) / 0.14); --color-info: #7BAD8A; --color-info-rgb: 123 173 138; --color-info-bg: rgb(var(--color-info-rgb) / 0.12); /* Badge / pill neutrals */ --color-neutral-bg: rgba(250, 247, 242, 0.06); --color-neutral-fg: #D7D1C5; /* Shadows — deeper for dark, ink-tinted */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-card: 0 1px 0 rgba(250, 247, 242, 0.04) inset, 0 1px 3px rgba(0, 0, 0, 0.50); --shadow-raised: 0 1px 0 rgba(250, 247, 242, 0.05) inset, 0 10px 32px rgba(0, 0, 0, 0.55); --shadow-overlay: 0 20px 48px rgba(0, 0, 0, 0.65); --shadow-focus: 0 0 0 3px var(--color-accent-ring); --shadow-focus-cta: 0 0 0 3px var(--color-cta-ring); } /* Fallback when no data-theme has been set yet (script disabled, FOUC window). Mirrors dark since that was the original admin default. */ :root:not([data-theme]) { color-scheme: dark; --color-bg-base: #0F1813; --color-bg-elevated: #15211B; --color-fg-primary: #FAF7F2; --color-topbar-bg: rgba(15, 24, 19, 0.72); } /* Apply base body styling */ html, body { background-color: var(--color-bg-base); color: var(--color-fg-primary); }