/* * Design tokens: every fixed --am-* value of every style, scheme and palette, * then the primary rules that paint legacy Bootstrap classes from them. * head-css links this sheet first (App\Support\HeadAssets); Garden adds * design-tokens-garden.css, Світанок design-tokens-svitanok.css after it. * Values derived from the primary are not here: resources/head/theme.js * (window.__applyThemeVars) sets them on . * The file ships as written (vite.config.js headAssets): custom-property * text is what getComputedStyle returns, so no minifier rewrites it. */ /* * Warm is the default style. It is also bound to [data-am-style="warm"] so * a warm preview can sit inside a glass page (theme picker swatches). */ :root, [data-am-style="warm"] { /* Surfaces and text */ --am-cream: #f7f4ef; --am-white: #ffffff; --am-card: #ffffff; --am-card-quiet: #fbfaf6; --am-surface-raised: #ffffff; --am-surface-sunken: #f1eee8; --am-ink: #0f1419; --am-ink-2: #1d2530; --am-ink-soft: #444d5a; --am-ink-mute: #5f6875; /* Brand and semantic colors */ --am-peach: #f5c4a8; --am-peach-2: #ecaa86; --am-clay: #865f43; --am-sky: #a8c8e0; --am-sky-2: #79b0d8; --am-sky-deep: #4a7fb5; --am-success: #3f7435; --am-success-rgb: 63, 116, 53; --am-success-hover: #315f29; --am-success-text: #2f5826; --am-warning: #946c22; --am-warning-rgb: 148, 108, 34; --am-warning-text: #694a0c; --am-danger: #a02828; --am-danger-rgb: 160, 40, 40; --am-danger-hover: #861d1d; /* Solid destructive controls keep white-text contrast in every style. */ --am-danger-solid: #a02828; --am-danger-solid-hover: #861d1d; --am-danger-text: #8d2020; --am-info: #2d6685; --am-info-rgb: 45, 102, 133; --am-info-text: #1c5a7a; --am-soft-pink: #f8d4d2; --am-soft-sky: #d2ebf8; --am-soft-green: #d8f1d2; --am-soft-cream: #fef4d8; /* Lines and glass */ --am-line: #eaecef; --am-line-2: #f1f3f6; --am-border-soft: #e3cfc4; --am-glass: rgba(255, 255, 255, .72); --am-glass-strong: rgba(255, 255, 255, .88); /* Floating chrome of the simple shell (top bar, bottom nav); glass overrides both with its own blur and thick milky rim. */ --am-glass-blur: blur(24px) saturate(1.4); /* Simple nav and its safe-area strip share one material contract. */ --am-topnav-surface: var(--am-glass); --am-topnav-scrolled-surface: var(--am-glass-strong); --am-topnav-blur: var(--am-glass-blur); --am-glass-rim: inset 0 0 0 1px rgba(255, 255, 255, .6); /* Opaque white surface of fields and inline chips; dark mode turns it into the card. (--am-white stays white: the ink on coloured fills.) */ --am-paper: #ffffff; /* Ink on a text-grade accent used as a fill (--am-primary-text, --am-warning): those are deep in light mode and pale in dark. */ --am-on-accent: var(--am-white); /* Full-shell chrome over the ambient page: milky pills of the side menu and top bar, the top bar itself, the card rim. */ --am-chrome-fill: rgba(255, 255, 255, .55); --am-chrome-fill-strong: rgba(255, 255, 255, .85); --am-chrome-edge: rgba(255, 255, 255, .8); --am-card-edge: rgba(255, 255, 255, .6); --am-topbar-bg: linear-gradient(180deg, var(--am-topbar-cap-bg) 0%, rgba(247, 244, 239, .55) 100%); --am-topbar-cap-bg: rgba(255, 255, 255, .85); /* Ambient page glow behind both shells (warm corners, a cool centre). */ --am-ambient-full: radial-gradient(ellipse 900px 600px at 6% 0%, rgba(245, 196, 168, .30), transparent 58%), radial-gradient(ellipse 760px 560px at 94% 6%, rgba(168, 200, 224, .26), transparent 58%), radial-gradient(ellipse 720px 540px at 82% 96%, rgba(245, 220, 207, .32), transparent 60%), radial-gradient(ellipse 820px 640px at 14% 92%, rgba(168, 200, 224, .16), transparent 62%), radial-gradient(ellipse 1200px 860px at 50% 48%, rgba(74, 127, 181, .06), transparent 72%); --am-ambient-simple: radial-gradient(ellipse 900px 600px at 10% 5%, rgba(245, 196, 168, .35), transparent 60%), radial-gradient(ellipse 800px 600px at 90% 15%, rgba(168, 200, 224, .35), transparent 60%), radial-gradient(ellipse 900px 700px at 50% 70%, rgba(74, 127, 181, .15), transparent 60%); /* Runtime theme defaults; __applyThemeVars owns all recalculation. */ --am-primary-default: #f5c4a8; --am-primary: #f5c4a8; --am-primary-rgb: 245, 196, 168; /* Tint of primary surfaces and rings; __applyThemeVars derives it (= the primary itself unless a style names --am-tint-neutral). */ --am-tint-rgb: 245, 196, 168; --am-primary-text-fallback: var(--am-clay); --am-primary-text: var(--am-clay); --am-on-primary: var(--am-ink); --am-hover-filter: brightness(.9); /* Typography: one body face, one mono face for code and data, two heading faces (DESIGN.md "Типографика"). --am-font-heading and the display metrics come from the heading choice below, never from a style. Both heading faces draw the full Ukrainian alphabet. The families are role aliases: App\Support\WebFonts::ROLES decides which typeface each one is (today IBM Plex Sans, IBM Plex Mono, Lora, Inter Tight), "... Fallback" is the metric-matched local face. */ --am-font-body: "AM Body", "AM Body Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --am-font-mono: "AM Mono", "AM Mono Fallback", ui-monospace, monospace; --am-font-antiqua: "AM Heading Serif", "AM Heading Serif Fallback", Georgia, serif; --am-font-grotesk: "AM Heading Sans", "AM Heading Sans Fallback", system-ui, sans-serif; /* Italic display lines are the warm voice; the other styles set them upright. */ --am-display-style: italic; --am-font-regular: 400; --am-font-medium: 500; --am-font-semibold: 600; --am-font-bold: 700; --am-font-light: 300; --am-leading-tight: 1.2; --am-leading-body: 1.55; --am-text-xs: .75rem; --am-text-sm: .875rem; --am-text-md: 1rem; --am-text-lg: 1.125rem; --am-text-xl: 1.375rem; --am-text-2xl: 1.75rem; --am-text-3xl: 2.25rem; --am-base-font: 1.0625rem; /* Body text of the wide simple shell and of the full (Bootstrap) shell. */ --am-base-font-wide: var(--am-text-md); --am-shell-font: 0.9375rem; --am-input-font: var(--am-text-md); --am-label-font: 0.8125rem; /* Four-pixel spacing scale */ --am-space-1: 4px; --am-space-2: 8px; --am-space-3: 12px; --am-space-4: 16px; --am-space-5: 20px; --am-space-6: 24px; --am-space-8: 32px; --am-space-10: 40px; --am-space-12: 48px; --am-space-16: 64px; /* Shape, elevation, and controls */ --am-radius-sm: 10px; --am-radius: 16px; --am-radius-lg: 20px; --am-radius-xl: 24px; --am-radius-pill: 999px; /* Tiles: page surfaces fitted edge to edge like the dashboard cards. Gap and inset come from the spacing rhythm below, one for all styles. */ --am-tile-radius: var(--am-radius-xl); --am-shadow-sm: 0 1px 2px rgba(15, 20, 25, .04); --am-shadow: 0 1px 2px rgba(15, 20, 25, .04), 0 10px 30px -10px rgba(15, 20, 25, .08), 0 30px 60px -20px rgba(15, 20, 25, .08); --am-shadow-lg: 0 2px 4px rgba(15, 20, 25, .05), 0 20px 50px -15px rgba(15, 20, 25, .12), 0 50px 100px -30px rgba(15, 20, 25, .12); --am-control-sm: 40px; --am-control-touch: 44px; --am-control: 48px; --am-control-lg: 56px; /* Form controls: one shape and one frame for x-am.* and the Bootstrap adapter */ --am-control-radius: var(--am-radius-sm); --am-control-radius-lg: var(--am-radius); --am-control-bg: var(--am-white); --am-control-border: #d3d8de; --am-control-border-hover: #a9b0b8; /* Boundary that alone tells a control's state (switch track, range thumb ring): 3:1 against the card and the page in every style. */ --am-control-border-strong: #858b93; /* Frame of a text field, select and Choices box: 3:1 against the field, the card, the page and the sunken ground (WCAG 1.4.11), so an older user on an iPad finds the field without its label. Other hairlines (secondary buttons, chips, tracks) stay on the quiet --am-control-border. */ --am-field-border: #80868e; --am-field-border-hover: #64696f; --am-control-edge: 0 0 0 transparent; --am-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23444d5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); /* Chosen card in the appearance picker (partials/_style-choice) */ --am-appearance-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E"); --am-control-sheen: 0 0 0 transparent; --am-track-bg: var(--am-surface-sunken); --am-track-edge: 0 0 0 transparent; --am-switch-track: #d9d5cd; --am-switch-track-edge: inset 0 0 0 1.5px var(--am-control-border-strong); --am-switch-knob: 0 1px 3px rgba(15, 20, 25, .28); --am-tap: var(--am-control-lg); --am-tap-2: var(--am-control); --am-nav-h: 64px; --am-header-inset-top: 0px; --am-header-offset: calc(var(--am-nav-h) + var(--am-header-inset-top)); /* What the floating tab bar (modules/_tabbar) takes from the bottom of the page: the bar, its gap to the edge or the home indicator, and air above it. */ --am-tabbar-space: calc(var(--am-nav-h) + max(var(--am-space-3), env(safe-area-inset-bottom, 0px)) + var(--am-space-4)); --am-modal-sm: 24rem; --am-modal-md: 32rem; --am-modal-lg: 44rem; --am-modal-xl: 60rem; --am-layer-modal: 1100; --am-layer-toast: 1200; /* Dialog backdrop; glass and soft paint their own scrim. */ --am-scrim: rgba(15, 20, 25, .55); /* Toasts: entry shift (down from the top edge on wide screens) and the height docked under them on phones (see the media block below). */ --am-toast-shift: calc(var(--am-space-2) * -1); --am-toast-dock: 0px; /* Chosen value (segment, chip, current page): the primary fill plus a darker edge, so the choice reads without telling hues apart. */ --am-selected-edge: inset 0 0 0 1px color-mix(in srgb, var(--am-primary-text) 55%, transparent); /* Interaction states */ --am-focus-color: #4a7fb5; --am-focus: 0 0 0 3px rgba(74, 127, 181, .35); --am-disabled-opacity: .55; --am-hover-opacity: .92; --am-pressed-scale: .985; --am-motion-fast: 140ms; --am-motion-base: 220ms; --am-motion-slow: 360ms; /* Native app press (html.am-native, design-system/modules/_native.scss): in fast, out with a small spring like a UIKit control. Only the app consumes these; a browser never matches the rules that do. */ --am-press-in: 70ms; --am-press-out: 260ms; --am-press-ease: cubic-bezier(.3, 1.35, .5, 1); /* Safe-area insets: zero on the web and in app builds that stay inside the safe area; edge-to-edge app builds get them below. */ --am-inset-top: 0px; --am-inset-right: 0px; --am-inset-bottom: 0px; --am-inset-left: 0px; } /* The app shell (classes set by resources/js/native-bridge.js). A finger covers the control, so the press is firmer than the web's .985. */ html.am-native { /* The components' immediate :active scale is off in the app (it fired under a scrolling finger); the bridge's .am-pressed uses the firmer native press instead (design-system/modules/_native.scss). */ --am-pressed-scale: 1; --am-native-press-scale: .96; } /* Edge-to-edge builds draw under the status bar and the home indicator. Capacitor's --safe-area-inset-* where the web view reports no env(). native-bridge.js repeats these values for standalone call pages that have no head-css (ThemeSourceContractTest keeps the two equal). */ html.am-native-edge { --am-inset-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --am-inset-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px)); --am-inset-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); --am-inset-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px)); } /* Cabinet headers own the top safe area, including browser/standalone PWA env() insets. Layouts omit this marker for legacy inset app builds and call routes; their existing offsets remain owned by the native bridge. */ html[data-am-cabinet] { --am-header-inset-top: env(safe-area-inset-top, 0px); } html.am-native-edge[data-am-cabinet] { --am-header-inset-top: var(--am-inset-top); } /* The document scrollport reads the header footprint, including the simple pill's upper gap and border clearance. --am-nav-h stays independent. */ html[data-am-cabinet]:has(body.am-shell) { --am-header-offset: var(--am-nav-h); } html.am-header-safe-area[data-am-cabinet]:has(body.am-shell) { --am-header-offset: calc(var(--am-control-touch) + var(--am-space-4) + var(--am-space-3) + var(--am-space-1) + var(--am-header-inset-top)); } html[data-am-cabinet]:has(body.am-warm) { --am-header-offset: calc(var(--bs-topbar-height) + var(--am-header-inset-top)); } @media (min-width: 900px) { html.am-header-safe-area[data-am-cabinet]:has(body.am-shell) { --am-header-offset: calc(var(--am-control-touch) + var(--am-space-6) + var(--am-space-3) + var(--am-space-1) + var(--am-header-inset-top)); } } /* * Glass style ("Скло"), chosen per user in the theme picker. Only tokens * change here; material rules that tokens cannot express (backdrop blur, * pill controls, light numerals) live in * resources/scss/design-system/modules/_style-glass.scss. */ [data-am-style="glass"] { --am-cream: #f4f3ef; --am-card: rgba(255, 255, 255, .55); --am-card-quiet: rgba(255, 255, 255, .4); --am-surface-raised: rgba(255, 255, 255, .74); --am-surface-sunken: rgba(226, 232, 229, .46); --am-ink-mute: #56606b; --am-sky-deep: #33608b; --am-soft-pink: #f7d6d6; --am-soft-sky: #d6e6f0; --am-soft-green: #cdebe2; --am-soft-cream: #f5ead3; --am-line: rgba(78, 96, 90, .16); --am-line-2: rgba(78, 96, 90, .09); --am-border-soft: rgba(78, 96, 90, .18); --am-glass: rgba(255, 255, 255, .56); --am-glass-strong: rgba(255, 255, 255, .76); --am-glass-sheet: rgba(251, 251, 249, .9); --am-glass-rim: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 0 0 1.5px rgba(255, 255, 255, .7); --am-glass-inset: inset 0 1px 3px rgba(38, 54, 50, .1), inset 0 0 0 1px rgba(78, 96, 90, .08), 0 1px 0 rgba(255, 255, 255, .9); --am-glass-track: rgba(226, 232, 229, .5); --am-glass-track-edge: inset 0 0 0 1px rgba(56, 70, 66, .6), inset 0 1px 3px rgba(38, 54, 50, .12); --am-glass-knob: 0 1px 3px rgba(38, 54, 50, .28), 0 0 0 .5px rgba(38, 54, 50, .12); --am-glass-glow: radial-gradient(ellipse 85% 75% at 22% 108%, rgba(170, 220, 205, .42), transparent 68%); --am-glass-glow-alt: radial-gradient(ellipse 80% 70% at 88% 0%, rgba(246, 205, 205, .38), transparent 66%); --am-glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px -8px rgba(var(--am-primary-rgb), .9); --am-glass-blur: blur(22px) saturate(1.6); --am-topnav-surface: var(--am-glass); --am-topnav-scrolled-surface: var(--am-glass-strong); --am-topnav-blur: var(--am-glass-blur); --am-glass-scrim: rgba(236, 240, 238, .5); --am-glass-scrim-blur: blur(12px) saturate(1.2); --am-glass-backdrop: radial-gradient(ellipse 55% 50% at 6% 8%, rgba(178, 222, 208, .7), transparent 70%), radial-gradient(ellipse 45% 40% at 94% 6%, rgba(214, 228, 236, .6), transparent 70%), radial-gradient(ellipse 50% 50% at 96% 96%, rgba(246, 205, 205, .62), transparent 70%), radial-gradient(ellipse 45% 45% at 18% 96%, rgba(206, 232, 222, .5), transparent 70%); /* Display lines stand upright on glass. */ --am-display-style: normal; --am-primary-default: #9fd4c7; --am-primary-text-fallback: #2f5f57; --am-radius-sm: 14px; --am-radius: 20px; --am-radius-lg: 26px; --am-radius-xl: 30px; /* Controls are pills on glass; the frame is the milky rim, not a line */ --am-control-radius: var(--am-radius-pill); --am-control-radius-lg: var(--am-radius-pill); --am-control-bg: var(--am-surface-raised); --am-control-border: rgba(78, 96, 90, .22); --am-control-border-hover: rgba(78, 96, 90, .42); --am-control-border-strong: rgba(56, 70, 66, .6); /* Solid, not a tint: the glass under it shifts with the glow. */ --am-field-border: #7b8581; --am-field-border-hover: #606865; --am-control-edge: var(--am-glass-rim); --am-control-sheen: var(--am-glass-sheen); --am-track-bg: var(--am-glass-track); --am-track-edge: var(--am-glass-inset); --am-switch-track: var(--am-glass-track); --am-switch-track-edge: var(--am-glass-track-edge); --am-switch-knob: var(--am-glass-knob); --am-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(38, 54, 50, .05), 0 4px 12px -6px rgba(38, 54, 50, .08); --am-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 0 0 2px rgba(255, 255, 255, .78), inset 0 0 0 4px rgba(255, 255, 255, .2), inset 0 -10px 24px -18px rgba(255, 255, 255, .9), 0 2px 6px -2px rgba(38, 54, 50, .06), 0 18px 40px -18px rgba(38, 54, 50, .14), 0 40px 80px -40px rgba(38, 54, 50, .1); --am-shadow-lg: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 0 0 2px rgba(255, 255, 255, .78), inset 0 0 0 4px rgba(255, 255, 255, .2), 0 4px 10px -4px rgba(38, 54, 50, .08), 0 28px 60px -24px rgba(38, 54, 50, .2), 0 60px 120px -50px rgba(38, 54, 50, .16); } /* Glass without translucency: solid milky surfaces, same shapes. */ @media (prefers-reduced-transparency: reduce) { [data-am-style="glass"] { --am-card: #fbfbf9; --am-card-quiet: #f8f8f5; --am-surface-raised: #ffffff; --am-surface-sunken: #eceeeb; --am-glass: #fafaf8; --am-glass-strong: #fcfcfb; --am-glass-sheet: #fcfcfb; --am-glass-blur: none; --am-glass-scrim-blur: none; --am-glass-glow: none; --am-glass-glow-alt: none; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-am-style="glass"] { --am-glass: #fafaf8; --am-glass-strong: #fcfcfb; --am-glass-sheet: #fcfcfb; --am-glass-blur: none; --am-glass-scrim: rgba(236, 240, 238, .85); } } /* * Soft style ("М'який"): quiet, refined neutrals with ONE elevation rule. * Surfaces sit a little above the page (one low, wide shadow and a 1px * hairline); controls are flat (solid or hairline pills, flat fields with * a hairline and a clear focus ring); pressed and active states change * tone, never cast an inset. Only tokens change here; what tokens cannot * say lives in resources/scss/design-system/modules/_style-soft.scss. * * Three palettes, chosen per user (theme_settings['soft_palette'], * App\Enums\SoftPalette, ). This base block IS the * default palette "Перлинний туман" (pearl); porcelain and stone below * override colours, shadows and the display face only. */ [data-am-style="soft"] { --am-cream: #eef0f2; --am-card: #fdfdfe; --am-card-quiet: #f8f9fa; --am-surface-raised: #ffffff; --am-surface-sunken: #e7eaed; /* Graphite inks, AA on every ground here (worst: sunken) */ --am-ink: #15181c; --am-ink-2: #20242a; --am-ink-soft: #474d55; --am-ink-mute: #5b626b; /* Colour stays a whisper: tones are pale tinted discs, statuses muted */ --am-peach-2: #cfd4da; --am-clay: #6f5443; --am-sky-deep: #355a7c; --am-soft-pink: #f1e7ea; --am-soft-sky: #e3ebf2; --am-soft-green: #e3ede9; --am-soft-cream: #f1ede3; --am-line: #dde1e6; --am-line-2: #e9ecef; --am-border-soft: #d8dde3; --am-glass: #ffffff; --am-glass-strong: #ffffff; --am-glass-blur: none; --am-topnav-surface: var(--am-card); --am-topnav-scrolled-surface: var(--am-card); --am-topnav-blur: none; --am-glass-rim: 0 0 0 transparent; --am-soft-scrim: rgba(22, 28, 36, .34); /* One elevation: low, wide, barely there */ --am-shadow-sm: 0 1px 2px rgba(20, 28, 38, .05); --am-shadow: 0 1px 2px rgba(20, 28, 38, .05), 0 10px 30px -16px rgba(20, 28, 38, .16); --am-shadow-lg: 0 2px 6px rgba(20, 28, 38, .06), 0 28px 64px -28px rgba(20, 28, 38, .28); /* Display lines (page titles, big numerals) stand upright; the face and its weight come from the heading choice. */ --am-display-style: normal; --am-display-title-size: var(--am-text-2xl); --am-display-numeral-size: 2.25rem; /* Ink is the default accent; a chosen colour still fills primaries. Primary text is checked against this ground, not the warm cream. An ink primary has no hue, so its tints (selected rows, primary badges, hints) take this palette hue instead (__applyThemeVars). */ --am-primary-default: #23282f; --am-primary-text-fallback: #23282f; --am-contrast-ground: #eef0f2; --am-tint-neutral: #6f87a3; --am-radius-sm: 12px; --am-radius: 16px; --am-radius-lg: 20px; --am-radius-xl: 22px; /* Flat controls: hairline pills and hairline fields, no relief */ --am-control-radius: var(--am-radius-pill); --am-control-radius-lg: var(--am-radius-pill); --am-control-bg: #ffffff; --am-control-border: #c9ced5; --am-control-border-hover: #8e959e; --am-control-edge: 0 0 0 transparent; --am-control-sheen: 0 0 0 transparent; --am-track-bg: #e7eaed; --am-track-edge: 0 0 0 transparent; --am-switch-track: #e7eaed; --am-control-border-strong: #7f868f; --am-field-border: #7c838c; --am-field-border-hover: #61666d; --am-switch-track-edge: inset 0 0 0 1px var(--am-control-border-strong); --am-switch-knob: 0 1px 2px rgba(20, 28, 38, .24), 0 0 0 .5px rgba(20, 28, 38, .12); --am-focus-color: #15181c; --am-focus: 0 0 0 3px rgba(21, 24, 28, .16); } /* Palette "Порцеляна": warm ivory page, white surfaces, warm ink. */ [data-am-style="soft"][data-am-palette="porcelain"] { --am-cream: #f6f3ee; --am-card: #ffffff; --am-card-quiet: #fbf9f6; --am-surface-raised: #ffffff; --am-surface-sunken: #eeeae3; --am-ink: #1c1a17; --am-ink-2: #2a2622; --am-ink-soft: #524d46; --am-ink-mute: #6a6359; --am-peach-2: #d9cfc2; --am-clay: #7a5840; --am-sky-deep: #3d5d78; --am-soft-pink: #f4e8e4; --am-soft-sky: #e7edf1; --am-soft-green: #e6ede3; --am-soft-cream: #f4eddf; --am-line: #e5dfd5; --am-line-2: #efeae2; --am-border-soft: #e2dbcf; --am-soft-scrim: rgba(38, 32, 26, .32); --am-shadow-sm: 0 1px 2px rgba(48, 38, 26, .04); --am-shadow: 0 1px 2px rgba(48, 38, 26, .04), 0 12px 32px -18px rgba(48, 38, 26, .14); --am-shadow-lg: 0 2px 6px rgba(48, 38, 26, .05), 0 28px 64px -28px rgba(48, 38, 26, .24); --am-primary-default: #1f1c19; --am-primary-text-fallback: #1f1c19; --am-contrast-ground: #f6f3ee; --am-tint-neutral: #a8865f; --am-control-border: #d3cbbe; --am-control-border-hover: #a39a8c; --am-track-bg: #eeeae3; --am-switch-track: #eeeae3; --am-control-border-strong: #8a8175; --am-field-border: #8a8175; --am-field-border-hover: #6c655b; --am-switch-knob: 0 1px 2px rgba(48, 38, 26, .22), 0 0 0 .5px rgba(48, 38, 26, .12); --am-focus-color: #1c1a17; --am-focus: 0 0 0 3px rgba(28, 26, 23, .16); } /* Palette "Камінь": warm stone page, bone surfaces, espresso ink. */ [data-am-style="soft"][data-am-palette="stone"] { --am-cream: #ebe7e1; --am-card: #f9f7f3; --am-card-quiet: #f4f1ec; --am-surface-raised: #fbfaf7; --am-surface-sunken: #e2ddd5; --am-ink: #221e1a; --am-ink-2: #2c2723; --am-ink-soft: #4f4841; --am-ink-mute: #615950; --am-peach-2: #cfc5b7; --am-clay: #6d4f3b; --am-sky-deep: #3a5670; /* Statuses stay coloured, only greyer; round icons go neutral (module) and keep the tone as one small dot. */ --am-soft-pink: #eee0dc; --am-soft-sky: #e0e6e8; --am-soft-green: #e1e8dc; --am-soft-cream: #eee6d6; --am-line: #d8d0c4; --am-line-2: #e4dfd7; --am-border-soft: #d3cabd; --am-soft-scrim: rgba(42, 34, 28, .36); --am-shadow-sm: 0 1px 2px rgba(52, 40, 28, .05); --am-shadow: 0 1px 2px rgba(52, 40, 28, .05), 0 14px 34px -20px rgba(52, 40, 28, .2); --am-shadow-lg: 0 2px 6px rgba(52, 40, 28, .06), 0 30px 66px -30px rgba(52, 40, 28, .3); --am-primary-default: #3a2f28; --am-primary-text-fallback: #3a2f28; --am-contrast-ground: #ebe7e1; --am-tint-neutral: #9a7b62; --am-control-bg: #fbfaf7; --am-control-border: #c8beb0; --am-control-border-hover: #91877a; --am-track-bg: #e2ddd5; --am-switch-track: #e2ddd5; --am-control-border-strong: #847a6d; --am-field-border: #83796c; --am-field-border-hover: #665e54; --am-switch-knob: 0 1px 2px rgba(52, 40, 28, .24), 0 0 0 .5px rgba(52, 40, 28, .12); --am-focus-color: #221e1a; --am-focus: 0 0 0 3px rgba(34, 30, 26, .16); --am-soft-tone-dot: 6px; } /* * Relief style ("Рельєф"): soft neumorphism after Maria's reference. One * grey world; surfaces are the page's own tone, extruded by a dual shadow * (light top-left, shade bottom-right) or pressed in as wells (fields, * search, tracks, the current menu item). Generous radii and air between * tiles so the shadows can breathe. Only tokens change here; what tokens * cannot say lives in resources/scss/design-system/modules/_style-relief.scss. * * Two shades, chosen per user (theme_settings['relief_palette'], * App\Enums\ReliefPalette, ). This base block IS the * default "Чорно-білий" (mono): graphite accents, tones read as ink; * "Кольоровий" (color) below gives the tones soft natural colours. */ [data-am-style="relief"] { --am-cream: #e4e4e4; --am-card: #e4e4e4; --am-card-quiet: #e1e1e1; --am-surface-raised: #e9e9e9; --am-surface-sunken: #d9d9d9; /* Neutral inks, AA on every grey here (worst: sunken #d9d9d9) */ --am-ink: #141414; --am-ink-2: #1f1f1f; --am-ink-soft: #3d3d3d; --am-ink-mute: #555555; /* Colour is almost gone: statuses keep their hue as text on grey washes */ --am-peach-2: #c9c9c9; --am-clay: #5e4a3e; --am-sky-deep: #3b4f63; --am-soft-pink: #dcd5d4; --am-soft-sky: #d5d9dc; --am-soft-green: #d6dbd4; --am-soft-cream: #dddad2; --am-line: #cdcdcd; --am-line-2: #d6d6d6; --am-border-soft: #c9c9c9; --am-paper: #e4e4e4; --am-glass: #e4e4e4; --am-glass-strong: #e6e6e6; --am-glass-blur: none; --am-topnav-surface: var(--am-cream); --am-topnav-scrolled-surface: var(--am-cream); --am-topnav-blur: none; --am-glass-rim: 0 0 0 transparent; --am-chrome-fill: transparent; --am-chrome-fill-strong: #e9e9e9; --am-card-edge: transparent; --am-relief-scrim: rgba(80, 80, 80, .42); /* Tone stones (decorative, never text): greys here, the colour shade below paints them. */ --am-relief-tone-orange: #9a9a9a; --am-relief-tone-pink: #bdbdbd; --am-relief-tone-sage: #6e6e6e; /* The material: one light and one shade, at three depths, plus wells */ --am-relief-light: rgba(255, 255, 255, .92); --am-relief-shade: rgba(160, 160, 160, .62); --am-relief-raise-sm: -3px -3px 7px var(--am-relief-light), 3px 3px 7px var(--am-relief-shade); --am-relief-raise: -9px -9px 20px var(--am-relief-light), 9px 9px 20px var(--am-relief-shade); --am-relief-raise-lg: -16px -16px 36px var(--am-relief-light), 16px 16px 36px var(--am-relief-shade); --am-relief-inset-sm: inset 2px 2px 4px var(--am-relief-shade), inset -2px -2px 4px var(--am-relief-light); --am-relief-inset: inset 4px 4px 8px var(--am-relief-shade), inset -4px -4px 8px var(--am-relief-light); /* Hairline around extruded surfaces, drawn only for prefers-contrast */ --am-relief-edge: 0 0 0 transparent; --am-shadow-sm: var(--am-relief-raise-sm); --am-shadow: var(--am-relief-raise); --am-shadow-lg: var(--am-relief-raise-lg); /* Display lines (page titles, big numerals) stand upright; the face and its weight come from the heading choice. */ --am-display-style: normal; --am-display-title-size: var(--am-text-2xl); --am-display-numeral-size: 2.5rem; /* Ink is the default accent; a chosen colour still fills primaries. Primary text is checked against this ground, not the warm cream. */ --am-primary-default: #262626; --am-primary-text-fallback: #1f1f1f; --am-contrast-ground: #e4e4e4; /* Generous, rounder shapes after the reference */ --am-radius-sm: 16px; --am-radius: 22px; --am-radius-lg: 28px; --am-radius-xl: 32px; /* Controls are pills; fields are inset wells with a 3:1 hairline */ --am-control-radius: var(--am-radius-pill); --am-control-radius-lg: var(--am-radius-pill); --am-control-bg: #dedede; --am-control-border: rgba(20, 20, 20, .12); --am-control-border-hover: rgba(20, 20, 20, .3); --am-control-border-strong: #767676; --am-field-border: #767676; --am-field-border-hover: #5a5a5a; --am-control-edge: var(--am-relief-inset-sm); --am-control-sheen: var(--am-relief-raise-sm); --am-track-bg: #dadada; --am-track-edge: var(--am-relief-inset); --am-switch-track: #d4d4d4; --am-switch-track-edge: var(--am-relief-inset-sm), inset 0 0 0 1px var(--am-control-border-strong); --am-switch-knob: var(--am-relief-raise-sm); /* One ink ring for keyboard focus, 13:1 on the greys */ --am-focus-color: #1a1a1a; --am-focus: 0 0 0 3px rgba(26, 26, 26, .28); } /* Shade "Кольоровий": the same relief, tones in warm orange, powder pink and sage (the reference's stones). The user's primary stays the accent; an ink primary tints selections warm. */ [data-am-style="relief"][data-am-relief="color"] { --am-peach-2: #e3b48c; --am-clay: #874646; --am-sky-deep: #35536f; --am-soft-pink: #ecd2cf; --am-soft-sky: #d2dae0; --am-soft-green: #d0dccb; --am-soft-cream: #efd6bd; --am-success-text: #365a31; --am-warning-text: #7a4410; --am-info-text: #2d5270; --am-tint-neutral: #c07a3a; /* Decorative tone dots (never text): orange, powder, sage */ --am-relief-tone-orange: #d9822b; --am-relief-tone-pink: #d79a94; --am-relief-tone-sage: #6f9669; } /* * Dark mode ("Темна", ui_prefs.color_scheme, App\Support\HtmlRootAttributes). * The shown mode is , the attribute Bootstrap's * own colour modes key off, so the Velok adapter and our tokens flip * together. Every style and style palette has its own dark block that sets * the whole colour set (the light style blocks rank lower). Nested * [data-am-style] previews inside a dark page follow the page. Brand fills * (peach, mint) stay; text-grade colours move to light tints, fills that * carry white text (success, danger) keep their depth. --am-white stays * white: it is the ink on those fills. __applyThemeVars re-derives the * primary against --am-contrast-ground and --am-primary-text-fallback below. */ :root[data-bs-theme="dark"], [data-bs-theme="dark"] [data-am-style="warm"] { color-scheme: dark; --am-cream: #171513; --am-card: #221f1c; --am-card-quiet: #1d1a18; --am-surface-raised: #2a2623; --am-surface-sunken: #131110; --am-ink: #f3eee8; --am-ink-2: #e6dfd7; --am-ink-soft: #c4bbb1; --am-ink-mute: #a2988e; --am-peach-2: #d99a76; --am-clay: #e0ad88; --am-sky: #7fa6c4; --am-sky-2: #6d9cc4; --am-sky-deep: #93bde3; --am-success-text: #97d08b; --am-warning: #d8a84f; --am-warning-rgb: 216, 168, 79; --am-warning-text: #e7c07a; --am-danger-text: #f0a2a2; --am-info-text: #8cc4e3; --am-soft-pink: #3b2627; --am-soft-sky: #1f2f3b; --am-soft-green: #213125; --am-soft-cream: #362d1c; --am-line: #36312d; --am-line-2: #2b2724; --am-border-soft: #4b3f37; --am-glass: rgba(34, 31, 28, .76); --am-glass-strong: rgba(34, 31, 28, .92); --am-glass-rim: inset 0 0 0 1px rgba(255, 255, 255, .06); --am-paper: var(--am-card); --am-on-accent: #0f1419; --am-chrome-fill: rgba(255, 255, 255, .06); --am-chrome-fill-strong: rgba(255, 255, 255, .1); --am-chrome-edge: rgba(255, 255, 255, .08); --am-card-edge: rgba(255, 255, 255, .05); --am-topbar-bg: linear-gradient(180deg, var(--am-topbar-cap-bg) 0%, rgba(23, 21, 19, .7) 100%); --am-topbar-cap-bg: rgba(23, 21, 19, .92); --am-ambient-full: radial-gradient(ellipse 900px 600px at 6% 0%, rgba(245, 196, 168, .07), transparent 58%), radial-gradient(ellipse 760px 560px at 94% 6%, rgba(168, 200, 224, .05), transparent 58%), radial-gradient(ellipse 720px 540px at 82% 96%, rgba(245, 220, 207, .05), transparent 60%); --am-ambient-simple: radial-gradient(ellipse 900px 600px at 10% 5%, rgba(245, 196, 168, .08), transparent 60%), radial-gradient(ellipse 800px 600px at 90% 15%, rgba(168, 200, 224, .06), transparent 60%); --am-contrast-ground: #171513; --am-primary-text-fallback: #f0b996; --am-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --am-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -10px rgba(0, 0, 0, .45); --am-shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 24px 60px -18px rgba(0, 0, 0, .6); --am-control-bg: #1b1816; --am-control-border: #48413b; --am-control-border-hover: #6d655d; --am-control-border-strong: #8d847a; --am-field-border: #857c72; --am-field-border-hover: #a69c91; --am-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c4bbb1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); --am-track-bg: #131110; --am-switch-track: #3a3430; --am-switch-knob: 0 1px 3px rgba(0, 0, 0, .5); --am-scrim: rgba(5, 4, 3, .66); --am-focus-color: #93bde3; --am-focus: 0 0 0 3px rgba(147, 189, 227, .4); } /* Glass at night: smoked glass over a deep green-grey ground, dim glows. */ :root[data-bs-theme="dark"][data-am-style="glass"], [data-bs-theme="dark"] [data-am-style="glass"] { --am-cream: #111615; --am-card: rgba(255, 255, 255, .055); --am-card-quiet: rgba(255, 255, 255, .035); --am-surface-raised: rgba(46, 56, 54, .82); --am-surface-sunken: rgba(0, 0, 0, .24); --am-ink: #eef3f1; --am-ink-2: #dfe7e4; /* Secondary inks are lifted for the glows: text sits on the panel bloom and the backdrop bloom at once, not on the flat ground. */ --am-ink-soft: #c0cbc7; --am-ink-mute: #acb9b4; --am-sky-deep: #93bde3; /* Status washes are opaque: the same tint pre-composited over a glass panel. Translucent washes took the colour of whatever sat under a badge (a bright bloom, the mint active menu pill), and the light status text fell below 4.5:1 there. */ --am-soft-pink: #3c3332; --am-soft-sky: #2c383b; --am-soft-green: #2b3935; --am-soft-cream: #39392e; --am-line: rgba(220, 240, 234, .12); --am-line-2: rgba(220, 240, 234, .07); --am-border-soft: rgba(220, 240, 234, .14); --am-glass: rgba(28, 36, 34, .62); --am-glass-strong: rgba(28, 36, 34, .8); --am-glass-sheet: rgba(24, 31, 30, .94); --am-glass-rim: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .07); --am-glass-inset: inset 0 1px 3px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06); --am-glass-track: rgba(255, 255, 255, .08); --am-glass-track-edge: inset 0 0 0 1px rgba(200, 220, 214, .45), inset 0 1px 3px rgba(0, 0, 0, .3); --am-glass-knob: 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(0, 0, 0, .3); --am-glass-glow: radial-gradient(ellipse 85% 75% at 22% 108%, rgba(70, 140, 120, .17), transparent 68%); --am-glass-glow-alt: radial-gradient(ellipse 80% 70% at 88% 0%, rgba(150, 90, 100, .14), transparent 66%); --am-glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -8px rgba(var(--am-primary-rgb), .5); --am-glass-scrim: rgba(6, 10, 9, .6); --am-glass-backdrop: radial-gradient(ellipse 55% 50% at 6% 8%, rgba(60, 120, 104, .3), transparent 70%), radial-gradient(ellipse 45% 40% at 94% 6%, rgba(60, 90, 110, .26), transparent 70%), radial-gradient(ellipse 50% 50% at 96% 96%, rgba(120, 70, 80, .24), transparent 70%), radial-gradient(ellipse 45% 45% at 18% 96%, rgba(50, 100, 90, .22), transparent 70%); --am-contrast-ground: #111615; --am-primary-text-fallback: #9fd4c7; --am-control-bg: rgba(255, 255, 255, .06); --am-control-border: rgba(220, 240, 234, .18); --am-control-border-hover: rgba(220, 240, 234, .36); --am-control-border-strong: rgba(220, 240, 234, .55); --am-field-border: #7d8a86; --am-field-border-hover: #9aa7a3; --am-track-bg: var(--am-glass-track); --am-switch-track: var(--am-glass-track); --am-switch-knob: var(--am-glass-knob); --am-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .3); --am-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 6px -2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .55); --am-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 4px 10px -4px rgba(0, 0, 0, .35), 0 28px 60px -24px rgba(0, 0, 0, .65); } @media (prefers-reduced-transparency: reduce) { :root[data-bs-theme="dark"][data-am-style="glass"], [data-bs-theme="dark"] [data-am-style="glass"] { --am-card: #1b2220; --am-card-quiet: #181e1d; --am-surface-raised: #222a28; --am-surface-sunken: #0d1110; --am-glass: #1b2220; --am-glass-strong: #1e2624; --am-glass-sheet: #1e2624; } } /* Soft at night, "Перлинний туман": cool graphite, a light ink accent. */ :root[data-bs-theme="dark"][data-am-style="soft"], [data-bs-theme="dark"] [data-am-style="soft"] { --am-cream: #15171a; --am-card: #1e2125; --am-card-quiet: #1a1d20; --am-surface-raised: #24272c; --am-surface-sunken: #111316; --am-ink: #eceef1; --am-ink-2: #dfe2e6; --am-ink-soft: #b7bdc5; --am-ink-mute: #99a0aa; --am-peach-2: #4a5059; --am-clay: #d3ad92; --am-sky-deep: #9ab8d6; --am-soft-pink: #33282b; --am-soft-sky: #222c36; --am-soft-green: #222d29; --am-soft-cream: #2f2b22; --am-line: #30343a; --am-line-2: #262a2f; --am-border-soft: #353a41; --am-glass: #1e2125; --am-glass-strong: #1e2125; --am-glass-rim: 0 0 0 transparent; --am-soft-scrim: rgba(0, 0, 0, .55); --am-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --am-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -16px rgba(0, 0, 0, .55); --am-shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 64px -28px rgba(0, 0, 0, .7); --am-primary-default: #e6e8eb; --am-primary-text-fallback: #e6e8eb; --am-contrast-ground: #15171a; --am-tint-neutral: #8fa3bb; --am-control-bg: #1a1d20; --am-control-border: #3d424a; --am-control-border-hover: #5f6670; --am-control-border-strong: #858c96; --am-field-border: #7f8691; --am-field-border-hover: #a0a7b1; --am-track-bg: #111316; --am-switch-track: #30343a; --am-switch-knob: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(0, 0, 0, .3); --am-focus-color: #e6e8eb; --am-focus: 0 0 0 3px rgba(230, 232, 235, .24); } /* "Порцеляна" at night: warm neutral graphite, ivory accent. */ :root[data-bs-theme="dark"][data-am-style="soft"][data-am-palette="porcelain"], [data-bs-theme="dark"] [data-am-style="soft"][data-am-palette="porcelain"] { --am-cream: #171614; --am-card: #201e1b; --am-card-quiet: #1c1a18; --am-surface-raised: #272421; --am-surface-sunken: #121110; --am-ink: #f1ede7; --am-ink-2: #e3ded6; --am-ink-soft: #bdb6ac; --am-ink-mute: #9e968b; --am-peach-2: #544c43; --am-line: #34302b; --am-line-2: #2a2723; --am-border-soft: #3a352f; --am-glass: #201e1b; --am-glass-strong: #201e1b; --am-primary-default: #eee8df; --am-primary-text-fallback: #eee8df; --am-contrast-ground: #171614; --am-tint-neutral: #c4a27c; --am-control-bg: #1c1a18; --am-control-border: #433e37; --am-control-border-hover: #676058; --am-control-border-strong: #8b8378; --am-field-border: #857d72; --am-field-border-hover: #a69e93; --am-track-bg: #121110; --am-switch-track: #34302b; --am-focus-color: #eee8df; --am-focus: 0 0 0 3px rgba(238, 232, 223, .24); } /* "Камінь" at night: espresso stone, bone accent. */ :root[data-bs-theme="dark"][data-am-style="soft"][data-am-palette="stone"], [data-bs-theme="dark"] [data-am-style="soft"][data-am-palette="stone"] { --am-cream: #1a1714; --am-card: #24201c; --am-card-quiet: #1f1c19; --am-surface-raised: #2b2621; --am-surface-sunken: #141210; --am-ink: #f1ebe3; --am-ink-2: #e3dcd2; --am-ink-soft: #bfb5a9; --am-ink-mute: #a09588; --am-peach-2: #574d43; --am-soft-pink: #362828; --am-soft-sky: #242b2e; --am-soft-green: #262c24; --am-soft-cream: #332c20; --am-line: #3a332c; --am-line-2: #2e2924; --am-border-soft: #40382f; --am-glass: #24201c; --am-glass-strong: #24201c; --am-primary-default: #ece2d5; --am-primary-text-fallback: #ece2d5; --am-contrast-ground: #1a1714; --am-tint-neutral: #b8977c; --am-control-bg: #1f1c19; --am-control-border: #473f37; --am-control-border-hover: #6d6359; --am-control-border-strong: #8f8478; --am-field-border: #897e71; --am-field-border-hover: #aa9f92; --am-track-bg: #141210; --am-switch-track: #3a332c; --am-focus-color: #ece2d5; --am-focus: 0 0 0 3px rgba(236, 226, 213, .24); } /* Relief at night: the same extrusion on a graphite ground. The light is a faint lift, the shade near black; inks move to light greys. */ :root[data-bs-theme="dark"][data-am-style="relief"], [data-bs-theme="dark"] [data-am-style="relief"] { --am-cream: #2b2e33; --am-card: #2b2e33; --am-card-quiet: #282b30; --am-surface-raised: #31353a; --am-surface-sunken: #23262a; --am-ink: #eceef0; --am-ink-2: #dfe2e5; --am-ink-soft: #b8bdc3; --am-ink-mute: #9ba1a8; --am-peach-2: #4a4f56; --am-clay: #d6b39a; --am-sky-deep: #a3bdd6; --am-soft-pink: #3a3234; --am-soft-sky: #2f363d; --am-soft-green: #2f3833; --am-soft-cream: #3a362d; --am-line: #3a3e44; --am-line-2: #33373c; --am-border-soft: #40454b; --am-paper: #2b2e33; --am-glass: #2b2e33; --am-glass-strong: #2d3035; --am-glass-rim: 0 0 0 transparent; --am-chrome-fill: transparent; --am-chrome-fill-strong: #31353a; --am-card-edge: transparent; --am-relief-scrim: rgba(0, 0, 0, .6); --am-relief-tone-orange: #8a8f96; --am-relief-tone-pink: #6a6f76; --am-relief-tone-sage: #a8adb3; --am-relief-light: rgba(255, 255, 255, .055); --am-relief-shade: rgba(0, 0, 0, .5); /* Restated: the shared dark block above sets flat shadows. */ --am-shadow-sm: var(--am-relief-raise-sm); --am-shadow: var(--am-relief-raise); --am-shadow-lg: var(--am-relief-raise-lg); --am-switch-knob: var(--am-relief-raise-sm); --am-primary-default: #e6e8eb; --am-primary-text-fallback: #e6e8eb; --am-contrast-ground: #2b2e33; --am-control-bg: #26292d; --am-control-border: rgba(236, 238, 240, .12); --am-control-border-hover: rgba(236, 238, 240, .3); --am-control-border-strong: #7c8189; --am-field-border: #7c8189; --am-field-border-hover: #9ea3aa; --am-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23b8bdc3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); --am-track-bg: #23262a; --am-switch-track: #3a3e44; --am-focus-color: #e6e8eb; --am-focus: 0 0 0 3px rgba(230, 232, 235, .28); } /* "Кольоровий" at night: the stones glow a little on graphite. */ :root[data-bs-theme="dark"][data-am-style="relief"][data-am-relief="color"], [data-bs-theme="dark"] [data-am-style="relief"][data-am-relief="color"] { --am-peach-2: #6b5140; --am-clay: #e6aaa4; --am-soft-pink: #3d2e30; --am-soft-sky: #2f363d; --am-soft-green: #2c3a2f; --am-soft-cream: #3d3024; --am-success-text: #a6cf9c; --am-warning-text: #eab77f; --am-info-text: #8cc4e3; --am-tint-neutral: #d99a5b; --am-relief-tone-orange: #e39a52; --am-relief-tone-pink: #d9a19c; --am-relief-tone-sage: #8fb489; } /* * Heading face, chosen per user: "Антиква" (Lora) or "Гротеск" (Inter * Tight), theme_settings['heading_font'], App\Enums\HeadingFont, rendered * as by the shells. No attribute (call rooms, public * pages) = Антиква. Declared after the styles so a heading block outranks a * style block on the same element; previews carry their own attribute. * Both faces carry lining tabular figures, so big numerals * (--am-font-numeral) follow the heading face. */ :root, /* Spacing rhythm, one scale for every style (after shadcn/ui dashboard-01): the page gutter and the gap between tiles move together and tighten on a phone, where the dashboard already used 12px gaps and a 16px inset. */ :root { --am-page-gutter: var(--am-space-4); --am-tile-gap: var(--am-space-3); --am-tile-pad: var(--am-space-4); } @media (min-width: 576px) { :root { --am-page-gutter: var(--am-space-5); --am-tile-gap: var(--am-space-4); --am-tile-pad: var(--am-space-5); } } @media (min-width: 1200px) { :root { --am-page-gutter: var(--am-space-6); --am-tile-gap: var(--am-space-5); --am-tile-pad: var(--am-space-6); } } /* Relief keeps more air: its shadows reach past a tile's edge. */ :root[data-am-style="relief"] { --am-tile-gap: var(--am-space-4); --am-tile-pad: var(--am-space-5); } @media (min-width: 576px) { :root[data-am-style="relief"] { --am-tile-gap: var(--am-space-5); --am-tile-pad: var(--am-space-6); } } @media (min-width: 1200px) { :root[data-am-style="relief"] { --am-tile-gap: var(--am-space-6); --am-tile-pad: var(--am-space-6); } } [data-am-heading="serif"] { --am-font-heading: var(--am-font-antiqua); --am-font-numeral: var(--am-font-antiqua); --am-display-weight: 500; --am-display-tracking: -.01em; /* Small display titles (dialogs, start tiles): heavier than the display line. */ --am-title-weight: 600; } [data-am-heading="sans"] { --am-font-heading: var(--am-font-grotesk); --am-font-numeral: var(--am-font-grotesk); --am-display-weight: 300; --am-display-tracking: -.02em; --am-title-weight: 500; /* Гротеск is always upright: italic display rules keep their face and lose the slant (the italic is never loaded or synthesised). */ --am-display-style: normal; } /* More contrast: darker hairlines and field frames, deeper secondary ink. */ @media (prefers-contrast: more) { /* :root-qualified and later, so it outranks the palette blocks */ :root[data-am-style="soft"], [data-am-style="soft"] { --am-ink-soft: #3a3a3a; --am-ink-mute: #4a4a4a; --am-line: #858585; --am-line-2: #9e9e9e; --am-control-border: #6b6b6b; --am-control-border-hover: #3d3d3d; --am-field-border: #6b6b6b; --am-field-border-hover: #3d3d3d; } } /* Relief with more contrast: the extrusion is no longer the only edge. */ @media (prefers-contrast: more) { :root[data-am-style="relief"], [data-am-style="relief"] { --am-ink-soft: #2a2a2a; --am-ink-mute: #404040; --am-line: #7a7a7a; --am-line-2: #8f8f8f; --am-control-border: #6b6b6b; --am-control-border-hover: #3d3d3d; --am-field-border: #5a5a5a; --am-field-border-hover: #3d3d3d; --am-relief-edge: 0 0 0 1px #7a7a7a; } :root[data-bs-theme="dark"][data-am-style="relief"] { --am-ink-soft: #d0d4d8; --am-ink-mute: #bcc1c7; --am-line: #8a9098; --am-line-2: #737982; --am-control-border: #8a9098; --am-control-border-hover: #b8bdc3; --am-field-border: #9ea3aa; --am-field-border-hover: #c4c8cd; --am-relief-edge: 0 0 0 1px #8a9098; } } /* Large text is a per-user setting (ui_prefs.text_size, "Вигляд"), rendered by both shells. The root size scales every rem token (--am-text-*) and the body sizes use that root once (large overrides retain their exact 19/18/17/18/15 px at the default browser size, with an 18 px root). */ :root[data-am-text="large"] { font-size: 112.5%; --am-base-font: calc(19 / 18 * 1rem); --am-base-font-wide: var(--am-text-md); --am-shell-font: calc(17 / 18 * 1rem); --am-tap: 60px; --am-input-font: var(--am-text-md); --am-label-font: calc(15 / 18 * 1rem); } @media (prefers-contrast: more) { :root { --am-ink-soft: #2c333d; --am-ink-mute: #4a525d; --am-line: #cdd2d8; } } /* Phones: toasts rise from the bottom, above whatever is docked there (the floating tab bar, the "Зараз" button, the portal SOS button). */ @media (max-width: 767px) { :root { --am-toast-shift: var(--am-space-2); } body:has(.am-sos-trigger) { --am-toast-dock: calc(var(--am-control-lg) + var(--am-space-4)); } body:has(.am-tabbar) { --am-toast-dock: calc(var(--am-nav-h) + var(--am-space-3)); } body:has(.am-tabbar):has(.am-fab.is-shown) { --am-toast-dock: calc(var(--am-nav-h) + var(--am-control) + var(--am-space-6)); } /* A sticky save bar docked on the tab bar (modules/_tabbar): the toast after a save rises above both instead of landing on the button. */ body:has(.am-tabbar):has(.am-account-savebar, .am-session-form__submit, .am-client-form__save) { --am-toast-dock: calc(var(--am-nav-h) + var(--am-control-lg) + var(--am-space-3) * 4); } } @media (prefers-reduced-motion: reduce) { :root { --am-motion-fast: 0ms; --am-motion-base: 0ms; --am-motion-slow: 0ms; } /* Reduced motion in the app: the press is a dim, not a movement. */ html.am-native { --am-native-press-scale: 1; } } /* Primary rules. Bootstrap and Velok legacy classes take the primary and its derived forms (--am-primary, --am-on-primary, --am-primary-text, --am-tint-rgb, --am-hover-filter) that theme.js sets on . They declare no custom property, so their place after the Garden and Світанок token sheets or before them paints the same. */ .btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--am-primary) !important; border-color: var(--am-primary) !important; color: var(--am-on-primary) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):hover { background-color: var(--am-primary) !important; border-color: var(--am-primary) !important; color: var(--am-on-primary) !important; filter: var(--am-hover-filter); } .btn-outline-primary { color: var(--am-primary-text) !important; border-color: var(--am-primary) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--am-primary) !important; border-color: var(--am-primary) !important; color: var(--am-on-primary) !important; filter: var(--am-hover-filter); } .bg-primary, .btn-primary, .avatar-sm.bg-primary, .avatar.bg-primary, .rounded-circle.bg-primary, .page-item.active .page-link, .dropdown-item.active, .dropdown-item:active, .nav-link.active, .nav-pills .nav-link.active { color: var(--am-on-primary) !important; } .text-primary, a.text-primary, .link-primary, .page-link, .spinner-border.text-primary { color: var(--am-primary-text) !important; } .btn-soft-primary, .btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active, .btn-soft-primary:not(:disabled):not(.disabled):active { color: var(--am-ink) !important; } .bg-primary { background-color: var(--am-primary) !important; } .bg-soft-primary { background-color: rgba(var(--am-tint-rgb), .15) !important; color: var(--am-ink) !important; } .badge-soft-primary, .badge.badge-soft-primary { background-color: rgba(var(--am-tint-rgb), .25) !important; color: var(--am-ink) !important; border: 1px solid var(--am-border-soft) !important; } .border-primary { border-color: var(--am-primary) !important; } .nav-link.active, .nav-pills .nav-link.active { background-color: var(--am-primary) !important; color: var(--am-on-primary) !important; } .form-check-input:checked { background-color: var(--am-primary) !important; border-color: var(--am-primary) !important; } .form-check-input:focus, .form-control:focus, .form-select:focus { border-color: var(--am-focus-color) !important; box-shadow: var(--am-focus) !important; } .page-item.active .page-link { background-color: var(--am-primary) !important; border-color: var(--am-primary) !important; color: var(--am-on-primary) !important; } .main-nav .navbar-nav .menu-item.active .menu-link::before { background-color: var(--am-primary) !important; } .main-nav .navbar-nav .menu-item.active .nav-icon svg, .main-nav .navbar-nav .menu-item.active .nav-icon i, .main-nav .navbar-nav .menu-item.active .nav-icon iconify-icon, .main-nav .navbar-nav .menu-item.active .nav-text { color: var(--am-on-primary) !important; } .main-nav .navbar-nav .menu-link:hover .nav-icon svg { color: var(--am-primary-text) !important; fill: var(--am-primary-text) !important; } .main-nav .navbar-nav .menu-item.active .menu-link:hover .nav-icon svg, .main-nav .navbar-nav .menu-item.active .menu-link:hover .nav-icon i, .main-nav .navbar-nav .menu-item.active .menu-link:hover .nav-icon iconify-icon { color: var(--am-on-primary) !important; fill: var(--am-on-primary) !important; } .progress-bar, .dropdown-item.active, .dropdown-item:active, .fc-button-primary:not(:disabled).fc-button-active, .fc-button-primary:not(:disabled):active, .avatar-sm.bg-primary, .avatar.bg-primary, .rounded-circle.bg-primary { background-color: var(--am-primary) !important; } .dropdown-item.active, .dropdown-item:active, .fc-button-primary:not(:disabled).fc-button-active, .fc-button-primary:not(:disabled):active, .avatar-sm.bg-primary, .avatar.bg-primary, .rounded-circle.bg-primary { color: var(--am-on-primary) !important; } /* FullCalendar: the chosen view is primary-filled (segmented language); the other toolbar buttons are quiet and painted by the calendar tile. */ .fc-button-primary:not(:disabled).fc-button-active, .fc-button-primary:not(:disabled):active { border-color: var(--am-primary) !important; } /* Today is a light wash in the month and week grids; the day view is all today, so it stays the plain surface. */ .fc .fc-daygrid-day.fc-day-today, .fc .fc-timeGridWeek-view .fc-timegrid-col.fc-day-today { background-color: rgba(var(--am-tint-rgb), .08) !important; } .fc .fc-timeGridDay-view .fc-timegrid-col.fc-day-today { background-color: transparent !important; } .avatar-sm.bg-primary > *, .avatar.bg-primary > *, .rounded-circle.bg-primary > *, .btn.btn-primary > iconify-icon, .btn.btn-primary > i, .btn.btn-primary .text-white { color: var(--am-on-primary) !important; }