/* ============================================================ FOM Design System — VANILLA build (no React). Single stylesheet: design tokens + all component styles. Link this file, write plain HTML with the documented classes, and (for interactive components) load fom-ds.js. Dark theme: add data-theme="dark" to . ============================================================ */ /* ===================== TOKENS ===================== */ /* ============================================================ FOM — Fonts Brand typeface: AXIFORMA (Bold/ExtraBold display; Regular + Medium/SemiBold body). Source: brandbook §6.1–6.2. System fallback: Arial (Windows) / Helvetica (macOS) — §6.3. Licensed .ttf files bundled under assets/fonts/. All weights are exposed under the single family "Axiforma" so font-weight selects the right cut. ============================================================ */ @font-face { font-family: 'Axiforma'; src: url('./fonts/Axiforma-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Axiforma'; src: url('./fonts/Axiforma-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Axiforma'; src: url('./fonts/Axiforma-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Axiforma'; src: url('./fonts/Axiforma-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Axiforma'; src: url('./fonts/Axiforma-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } /* ============================================================ FOM — Colors Source: FOM brandbook §5.1 "Основная палитра" Corporate palette: Red, Black, Grey, White. Red is the corporate hero color. Green is a functional status color only (success) — it is NOT part of the brand palette. ============================================================ */ :root { /* ---- Brand primitives (exact brandbook values) ---- */ --fom-red: #EE3831; /* PANTONE 3556 C · corporate red */ --fom-black: #101820; /* PANTONE Black 6 C */ --fom-grey: #53565A; /* PANTONE Cool Gray 11 C */ --fom-white: #FFFFFF; /* ---- Functional green (success status only — not a brand color) ---- */ --green-500: #13B35E; /* ---- Red ramp (derived around #EE3831 for states/tints) ---- */ --red-700: #B81E18; /* pressed / deep */ --red-600: #D62820; /* hover */ --red-500: #EE3831; /* base — corporate red */ --red-400: #F3635D; --red-300: #F89691; --red-200: #FBC4C1; --red-100: #FDE3E1; --red-50: #FEF2F1; /* tint surface */ /* ---- Neutral ramp (cool grey, anchored on #101820 / #53565A) ---- */ --neutral-900: #101820; /* near-black ink */ --neutral-800: #1E2630; --neutral-700: #2D3641; --neutral-600: #424b56; --neutral-500: #53565A; /* brand grey */ --neutral-400: #767A80; --neutral-300: #A2A6AC; --neutral-200: #D2D5D9; --neutral-150: #E2E4E7; --neutral-100: #EEF0F2; --neutral-50: #F6F7F8; --white: #FFFFFF; /* ---- Semantic: text ---- */ --text-strong: var(--neutral-900); /* headings, primary copy */ --text-body: #2D3641; /* default running text */ --text-muted: var(--neutral-500); /* captions, section numbers */ --text-subtle: var(--neutral-400); /* placeholder, disabled label */ --text-inverse: var(--white); /* on red / on dark */ --text-brand: var(--fom-red); /* links, emphasis, urls */ --text-on-red: var(--white); /* ---- Semantic: surface ---- */ --surface-page: var(--white); --surface-subtle: var(--neutral-50); /* mockup tile / app canvas */ --surface-muted: var(--neutral-100); --surface-card: var(--white); --surface-inverse: var(--fom-black); --surface-brand: var(--fom-red); /* hero / section blocks */ --surface-brand-tint: var(--red-50); --surface-input: var(--white); /* field/control backgrounds */ --surface-disabled: var(--neutral-50);/* disabled field background */ --surface-hover: var(--neutral-100); /* row/item hover */ --surface-hover-strong: var(--neutral-150); /* pressed / deeper hover */ --surface-track: var(--neutral-150); /* progress / slider track */ --control-knob: var(--white); /* switch knob, slider thumb */ /* ---- Semantic: border ---- */ --border-subtle: var(--neutral-150); /* hairlines, dividers */ --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-brand: var(--fom-red); --border-on-red: rgba(255,255,255,0.45); /* ---- Interactive (primary = red) ---- */ --action-primary: var(--fom-red); --action-primary-hover: var(--red-600); --action-primary-active: var(--red-700); --action-primary-fg: var(--white); --focus-ring: rgba(238,56,49,0.40); /* ---- Status (kept on-brand; red doubles as error) ---- */ --status-success: var(--green-500); --status-success-bg: #E7F6EE; --status-warning: #E6A100; --status-warning-bg: #FCF3DA; --status-error: var(--fom-red); --status-error-bg: var(--red-50); --status-info: var(--neutral-700); --status-info-bg: var(--neutral-100); /* ---- Soft badge tints (tone bg + readable fg; themed for light/dark) ---- */ --badge-soft-neutral-bg: var(--neutral-100); --badge-soft-neutral-fg: var(--neutral-700); --badge-soft-red-bg: var(--red-50); --badge-soft-red-fg: var(--red-700); --badge-soft-green-bg: #E7F6EE; --badge-soft-green-fg: #0C6B39; --badge-soft-warning-bg: #FCF3DA; --badge-soft-warning-fg: #8A6200; /* ---- Misc themed surfaces ---- */ --tooltip-bg: var(--fom-black); /* tooltip body + arrow */ --surface-brand-tint-strong: var(--red-100); /* active nav hover, stronger brand tint */ --alert-success-border: #BFE6CF; --alert-warning-border: #F2E2AD; --alert-error-border: var(--red-200); } /* ============================================================ Dark theme — opt-in via (or any ancestor). Overrides only the semantic layer; brand primitives stay intact. Components read these tokens, so the whole kit re-themes from here. ============================================================ */ [data-theme="dark"] { /* Brand red is muted for dark surfaces — the full-chroma #EE3831 vibrates / glares on near-black. We lower chroma & lift lightness so every red element (buttons, badges, chips, sliders, progress, checks…) softens at once, since they all read var(--fom-red). The vivid red is unchanged in the light theme. */ --fom-red: #D85C54; /* muted corporate red for dark */ --red-700: #B0413B; --red-600: #C44C45; --red-500: #D85C54; --red-400: #E47B74; --red-300: #EE9D98; /* surfaces */ --surface-page: #0E141B; --surface-subtle: #121922; --surface-muted: #1B232E; --surface-card: #161E28; --surface-inverse: #F6F7F8; --surface-brand: #C44C45; /* deeper still for large red fills */ --surface-brand-tint: rgba(216, 92, 84, 0.16); --surface-input: #121922; --surface-disabled: rgba(255, 255, 255, 0.045); --surface-hover: rgba(255, 255, 255, 0.06); --surface-hover-strong: rgba(255, 255, 255, 0.10); --surface-track: rgba(255, 255, 255, 0.14); /* control-knob stays light (white) for contrast on tracks/red */ /* text */ --text-strong: #F2F4F6; --text-body: #CFD3D8; --text-muted: #9CA2A9; --text-subtle: #767C83; --text-inverse: var(--fom-black); --text-brand: var(--red-400); --text-on-red: var(--white); /* borders */ --border-subtle: rgba(255, 255, 255, 0.08); --border-default: rgba(255, 255, 255, 0.14); --border-strong: rgba(255, 255, 255, 0.26); --border-brand: var(--fom-red); --border-on-red: rgba(255, 255, 255, 0.45); /* interactive (red lightens on hover, deepens on press, against dark) */ --action-primary: var(--fom-red); --action-primary-hover: var(--red-400); --action-primary-active: var(--red-600); --action-primary-fg: var(--white); --focus-ring: rgba(216, 92, 84, 0.45); /* status */ --status-success: #2FBE71; --status-success-bg: rgba(19, 179, 94, 0.16); --status-warning: #E6A100; --status-warning-bg: rgba(230, 161, 0, 0.16); --status-error: var(--red-400); --status-error-bg: rgba(216, 92, 84, 0.16); --status-info: var(--neutral-300); --status-info-bg: rgba(255, 255, 255, 0.07); /* soft badges: bright text on translucent tint so green/amber/red stay distinct and readable on dark (the light-theme dark text muddied them) */ --badge-soft-neutral-bg: rgba(255, 255, 255, 0.09); --badge-soft-neutral-fg: #D2D7DC; --badge-soft-red-bg: rgba(216, 92, 84, 0.18); --badge-soft-red-fg: #F0A8A2; --badge-soft-green-bg: rgba(47, 190, 113, 0.18); --badge-soft-green-fg: #6FD9A4; --badge-soft-warning-bg: rgba(230, 161, 0, 0.20); --badge-soft-warning-fg: #EDBA52; --tooltip-bg: #2D3641; --surface-brand-tint-strong: rgba(216, 92, 84, 0.26); --alert-success-border: rgba(47, 190, 113, 0.32); --alert-warning-border: rgba(230, 161, 0, 0.34); --alert-error-border: rgba(216, 92, 84, 0.34); color-scheme: dark; } /* ============================================================ FOM — Typography Axiforma. Display/accent uses heavy weights at large sizes only (brandbook §6.1). Body uses Regular/SemiBold (§6.2). Geometric-rounded, generous tracking tightening on large display. ============================================================ */ :root { /* ---- Families ---- */ --font-display: 'Axiforma', system-ui, Arial, sans-serif; /* accent — big headings only */ --font-text: 'Axiforma', system-ui, Arial, sans-serif; /* body / UI */ --font-system: Arial, Helvetica, system-ui, sans-serif; /* PPT/email fallback (§6.3) */ /* ---- OpenType: Axiforma's Russian Cyrillic ("1st stylistic set", brandbook §6.2). Default Axiforma ships Bulgarian Cyrillic forms (т→m-like, д→g-like, л→n-like); ss01 switches them to correct Russian shapes. Applied globally below. ---- */ --font-feature-ru: "ss01"; /* ---- Weights ---- */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extrabold: 800; /* @kind font */ /* ---- Type scale (rem · 1rem = 16px) ---- */ --fs-display-2xl: 5rem; /* 80 — hero section titles on red */ --fs-display-xl: 3.75rem; /* 60 */ --fs-display-lg: 3rem; /* 48 — page headings */ --fs-display-md: 2.25rem; /* 36 */ --fs-h1: 1.875rem; /* 30 */ --fs-h2: 1.5rem; /* 24 */ --fs-h3: 1.25rem; /* 20 */ --fs-h4: 1.125rem; /* 18 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 — default */ --fs-body-sm: 0.875rem; /* 14 */ --fs-caption: 0.8125rem; /* 13 — section numbers, meta */ --fs-micro: 0.6875rem; /* 11 — labels, eyebrows */ /* ---- Line heights ---- */ --lh-tight: 1.05; /* @kind font */ --lh-snug: 1.2; /* @kind font */ --lh-normal: 1.5; /* @kind font */ --lh-relaxed: 1.65; /* @kind font */ /* ---- Letter spacing ---- */ --ls-display: -0.02em; /* @kind font */ --ls-heading: -0.01em; /* @kind font */ --ls-normal: 0em; /* @kind font */ --ls-eyebrow: 0.12em; /* @kind font */ /* ---- Composite role tokens ---- */ --text-display: var(--fw-extrabold) var(--fs-display-lg)/var(--lh-tight) var(--font-display); --text-title: var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display); --text-heading: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-text); --text-base: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-text); --text-label: var(--fw-semibold) var(--fs-body-sm)/1.3 var(--font-text); } /* Enable Russian Cyrillic forms everywhere. font-feature-settings is an inherited property, so declaring it on the root cascades to all text + components. */ :root { font-feature-settings: "ss01"; } /* Form/interactive elements (button, input, select, textarea) do NOT inherit font-feature-settings from their parent by default — the UA stylesheet resets them to `normal`, which makes Axiforma fall back to Bulgarian Cyrillic on buttons, tabs and fields. Force the Russian set on them explicitly. */ button, input, select, textarea, optgroup { font-feature-settings: "ss01"; } /* ============================================================ FOM — Spacing, radii, shadows, borders, motion The brandbook is flat & geometric (solid color blocks, square logo tiles, thin hairline rules, neutral-grey product canvas). Shadows are restrained; radii are modest. Hairline = 1px. ============================================================ */ :root { /* ---- Spacing scale (4px base) ---- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* ---- Radii (modest; the brand reads square/geometric) ---- */ --radius-none: 0; --radius-xs: 3px; /* logo-tile corner */ --radius-sm: 6px; --radius-md: 10px; /* default control / card */ --radius-lg: 16px; /* large card / sheet */ --radius-xl: 24px; --radius-pill: 999px; --radius-circle: 50%; /* ---- Border widths ---- */ --border-hairline: 1px; /* dividers / section rules */ --border-thin: 1.5px; --border-thick: 2px; /* ---- Icon sizes (Lucide substitution; rounded 2px stroke) ---- Pair with the Icon wrapper. md (20) is the default UI glyph; sm (16) for dense rows/inputs, lg (24) for headers, xl (32) for empty states. */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-stroke: 2; /* matches Lucide's 2px rounded stroke */ /* ---- Shadows (soft, neutral, low spread) ---- */ --shadow-xs: 0 1px 2px rgba(16,24,32,0.06); --shadow-sm: 0 1px 3px rgba(16,24,32,0.08), 0 1px 2px rgba(16,24,32,0.06); --shadow-md: 0 4px 12px rgba(16,24,32,0.08), 0 2px 4px rgba(16,24,32,0.05); --shadow-lg: 0 12px 28px rgba(16,24,32,0.12), 0 4px 10px rgba(16,24,32,0.06); --shadow-xl: 0 24px 56px rgba(16,24,32,0.16); --shadow-red: 0 8px 22px rgba(238,56,49,0.30); /* lift on primary CTAs */ --shadow-focus: 0 0 0 3px var(--focus-ring); /* ---- Layout ---- */ --container-sm: 640px; --container-md: 960px; --container-lg: 1200px; --container-xl: 1320px; --gutter: var(--space-6); /* ---- Motion (clean fades / short eases; no bounce) ---- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ } /* Dark theme: deepen shadows so elevation still reads on dark surfaces. Lives here (after :root) so it overrides the light --shadow-* at equal specificity by source order. */ [data-theme="dark"] { --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.40); --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.62); } /* ===================== VANILLA HELPERS ===================== The React kit mounted overlays only when open; in the vanilla build they live in the DOM and toggle via the [hidden] attribute. These rules make [hidden] win over the components' display rules. */ .fom-modal__backdrop[hidden], .fom-drawer__backdrop[hidden], .fom-menu[hidden], .fom-pop[hidden] { display: none !important; } /* ===================== COMPONENTS ===================== */ /* ===== Avatar (core) ===== */ .fom-avatar{display:inline-flex;align-items:center;justify-content:center; border-radius:50%;overflow:hidden;font-family:var(--font-text);font-weight:var(--fw-semibold); background:var(--red-100);color:var(--red-700);flex:none;user-select:none} .fom-avatar img{width:100%;height:100%;object-fit:cover;display:block} .fom-avatar--xs{width:24px;height:24px;font-size:10px} .fom-avatar--sm{width:32px;height:32px;font-size:var(--fs-caption)} .fom-avatar--md{width:40px;height:40px;font-size:var(--fs-body-sm)} .fom-avatar--lg{width:56px;height:56px;font-size:var(--fs-body-lg)} .fom-avatar--square{border-radius:var(--radius-md)} /* ===== Badge (core) ===== */ .fom-badge{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-text); font-weight:var(--fw-medium);font-size:var(--fs-caption);line-height:1; padding:5px 10px;border-radius:var(--radius-pill);white-space:nowrap} .fom-badge--sm{font-size:var(--fs-micro);padding:3px 8px} .fom-badge .fom-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor} .fom-badge--solid.is-neutral{background:var(--neutral-700);color:#fff} .fom-badge--solid.is-red{background:var(--fom-red);color:#fff} .fom-badge--solid.is-green{background:var(--green-500);color:#fff} .fom-badge--solid.is-warning{background:var(--status-warning);color:#fff} .fom-badge--soft.is-neutral{background:var(--badge-soft-neutral-bg);color:var(--badge-soft-neutral-fg)} .fom-badge--soft.is-red{background:var(--badge-soft-red-bg);color:var(--badge-soft-red-fg)} .fom-badge--soft.is-green{background:var(--badge-soft-green-bg);color:var(--badge-soft-green-fg)} .fom-badge--soft.is-warning{background:var(--badge-soft-warning-bg);color:var(--badge-soft-warning-fg)} /* ===== Button (core) ===== */ .fom-btn{--_bg:var(--fom-red);--_fg:#fff;--_bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--font-text);font-weight:var(--fw-semibold);font-feature-settings:"ss01"; border:1.5px solid var(--_bd);background:var(--_bg);color:var(--_fg); border-radius:var(--radius-md);cursor:pointer;white-space:nowrap; text-decoration:none;transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);-webkit-tap-highlight-color:transparent} .fom-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)} .fom-btn--md{height:44px;padding:0 20px;font-size:var(--fs-body)} .fom-btn--sm{height:36px;padding:0 14px;font-size:var(--fs-body-sm);border-radius:var(--radius-sm)} .fom-btn--lg{height:54px;padding:0 28px;font-size:var(--fs-body-lg)} .fom-btn--block{width:100%} .fom-btn--primary{--_bg:var(--action-primary);--_fg:var(--action-primary-fg)} .fom-btn--primary:hover{--_bg:var(--action-primary-hover)} .fom-btn--primary:active{--_bg:var(--action-primary-active)} .fom-btn--secondary{--_bg:var(--surface-input);--_fg:var(--text-strong);--_bd:var(--border-default)} .fom-btn--secondary:hover{--_bg:var(--surface-hover);--_bd:var(--border-strong)} .fom-btn--secondary:active{--_bg:var(--surface-hover-strong)} .fom-btn--ghost{--_bg:transparent;--_fg:var(--text-strong)} .fom-btn--ghost:hover{--_bg:var(--surface-hover)} .fom-btn--ghost:active{--_bg:var(--surface-hover-strong)} .fom-btn--inverse{--_bg:#fff;--_fg:var(--fom-red)} .fom-btn--inverse:hover{--_bg:rgba(255,255,255,.88)} .fom-btn[disabled],.fom-btn[aria-disabled="true"]{opacity:.45;pointer-events:none} .fom-btn svg{width:1.15em;height:1.15em;flex:none} .fom-btn__spin{width:1.05em;height:1.05em;border-radius:50%;border:2px solid currentColor;border-top-color:transparent; flex:none;animation:fom-btn-spin .6s linear infinite} @keyframes fom-btn-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.fom-btn__spin{animation-duration:1.4s}} /* ===== Card (core) ===== */ .fom-card{background:var(--surface-card);border:1px solid var(--border-subtle); border-radius:var(--radius-lg);overflow:hidden;font-family:var(--font-text);color:var(--text-body)} .fom-card--pad{padding:var(--space-5)} .fom-card--flat{box-shadow:none} .fom-card--raised{box-shadow:var(--shadow-sm);border-color:transparent} .fom-card--floating{box-shadow:var(--shadow-md);border-color:transparent} .fom-card--interactive{cursor:pointer;transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)} .fom-card--interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} /* ===== Icon (core) ===== */ .fom-icon{display:inline-flex;align-items:center;justify-content:center;flex:none; color:currentColor;line-height:0;vertical-align:middle} .fom-icon svg{width:100%;height:100%;display:block;stroke-width:var(--icon-stroke)} .fom-icon--sm{width:var(--icon-sm);height:var(--icon-sm)} .fom-icon--md{width:var(--icon-md);height:var(--icon-md)} .fom-icon--lg{width:var(--icon-lg);height:var(--icon-lg)} .fom-icon--xl{width:var(--icon-xl);height:var(--icon-xl)} /* ===== IconButton (core) ===== */ .fom-iconbtn{display:inline-flex;align-items:center;justify-content:center; border:1.5px solid transparent;background:transparent;color:var(--text-strong); border-radius:var(--radius-md);cursor:pointer;flex:none; transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)} .fom-iconbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus)} .fom-iconbtn--md{width:44px;height:44px} .fom-iconbtn--sm{width:36px;height:36px;border-radius:var(--radius-sm)} .fom-iconbtn--lg{width:54px;height:54px} .fom-iconbtn--ghost:hover{background:var(--surface-hover)} .fom-iconbtn--ghost:active{background:var(--surface-hover-strong)} .fom-iconbtn--solid{background:var(--action-primary);color:#fff} .fom-iconbtn--solid:hover{background:var(--action-primary-hover)} .fom-iconbtn--outline{border-color:var(--border-default)} .fom-iconbtn--outline:hover{background:var(--surface-hover);border-color:var(--border-strong)} .fom-iconbtn[disabled]{opacity:.45;pointer-events:none} .fom-iconbtn svg{width:1.25em;height:1.25em} .fom-iconbtn--md{font-size:18px}.fom-iconbtn--sm{font-size:16px}.fom-iconbtn--lg{font-size:22px} .fom-iconbtn__spin{width:1.25em;height:1.25em;border-radius:50%;border:2px solid currentColor;border-top-color:transparent; animation:fom-iconbtn-spin .6s linear infinite} @keyframes fom-iconbtn-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.fom-iconbtn__spin{animation-duration:1.4s}} /* ===== Accordion (data) ===== */ .fom-acc{font-family:var(--font-text);border-top:1px solid var(--border-subtle)} .fom-acc__item{border-bottom:1px solid var(--border-subtle)} .fom-acc__btn{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left; border:0;background:transparent;cursor:pointer;font:inherit;color:var(--text-strong); font-weight:var(--fw-semibold);font-size:var(--fs-body);padding:var(--space-4) var(--space-1)} .fom-acc__btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)} .fom-acc__title{flex:1} .fom-acc__chev{flex:none;width:20px;height:20px;color:var(--text-muted); transition:transform var(--dur-base) var(--ease-standard)} .fom-acc__chev svg{width:100%;height:100%} .fom-acc__item.is-open .fom-acc__chev{transform:rotate(180deg)} .fom-acc__panel{overflow:hidden;display:grid;grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-standard)} .fom-acc__item.is-open .fom-acc__panel{grid-template-rows:1fr} .fom-acc__panel>div{min-height:0} .fom-acc__body{padding:0 var(--space-1) var(--space-4);color:var(--text-body);font-size:var(--fs-body-sm);line-height:var(--lh-normal)} @media (prefers-reduced-motion:reduce){.fom-acc__panel,.fom-acc__chev{transition:none}} /* ===== EmptyState (data) ===== */ .fom-empty{display:flex;flex-direction:column;align-items:center;text-align:center; padding:var(--space-12) var(--space-6);font-family:var(--font-text);color:var(--text-body)} .fom-empty--compact{padding:var(--space-8) var(--space-5)} .fom-empty__icon{display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:var(--radius-pill);background:var(--surface-brand-tint); color:var(--fom-red);margin-bottom:var(--space-4)} .fom-empty__icon svg{width:26px;height:26px} .fom-empty__title{font-weight:var(--fw-bold);font-size:var(--fs-h3);color:var(--text-strong)} .fom-empty__desc{margin-top:var(--space-2);font-size:var(--fs-body-sm);color:var(--text-muted);max-width:42ch;line-height:var(--lh-normal)} .fom-empty__actions{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap;justify-content:center} /* ===== List (data) ===== */ .fom-list{font-family:var(--font-text);list-style:none;margin:0;padding:0;width:100%} .fom-list--divided>.fom-list__item+.fom-list__item{border-top:1px solid var(--border-subtle)} .fom-list--card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card)} .fom-list__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4); color:var(--text-body);text-align:left;width:100%;background:transparent;border:0;font:inherit} .fom-list__item--int{cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)} .fom-list__item--int:hover{background:var(--surface-hover)} .fom-list__item--int:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)} .fom-list__lead,.fom-list__trail{flex:none;display:inline-flex;align-items:center;color:var(--text-muted)} .fom-list__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .fom-list__title{font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);color:var(--text-strong); line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fom-list__desc{font-size:var(--fs-caption);color:var(--text-muted);line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ===== Pagination (data) ===== */ .fom-pg{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-text)} .fom-pg__btn{min-width:36px;height:36px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center; border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);cursor:pointer; font:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-strong); transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)} .fom-pg__btn:hover:not([disabled]):not(.is-active){background:var(--surface-hover)} .fom-pg__btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)} .fom-pg__btn.is-active{background:var(--fom-red);color:#fff} .fom-pg__btn[disabled]{opacity:.4;cursor:not-allowed} .fom-pg__gap{min-width:24px;text-align:center;color:var(--text-subtle)} .fom-pg__arrow svg{width:18px;height:18px} /* ===== ProgressBar (data) ===== */ .fom-progress{display:block;width:100%;height:8px;background:var(--surface-track); border-radius:var(--radius-pill);overflow:hidden} .fom-progress--sm{height:5px}.fom-progress--lg{height:12px} .fom-progress__bar{height:100%;background:var(--fom-red);border-radius:inherit; transition:width var(--dur-base) var(--ease-standard)} .fom-progress__bar--success{background:var(--status-success)} .fom-progress__bar--warning{background:var(--status-warning)} .fom-progress__bar--indet{width:40%;animation:fom-progress-slide 1.1s var(--ease-standard) infinite} @keyframes fom-progress-slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}} @media (prefers-reduced-motion:reduce){.fom-progress__bar--indet{animation-duration:2.2s}} /* ===== Skeleton (data) ===== */ .fom-skel{display:block;background:var(--surface-muted);border-radius:var(--radius-sm);position:relative;overflow:hidden} .fom-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:fom-skel-shine 1.4s var(--ease-standard) infinite} .fom-skel--circle{border-radius:50%} .fom-skel--text{border-radius:var(--radius-xs)} .fom-skel__lines{display:flex;flex-direction:column;gap:var(--space-2)} @keyframes fom-skel-shine{100%{transform:translateX(100%)}} @media (prefers-reduced-motion:reduce){.fom-skel::after{animation:none}} /* ===== Spinner (data) ===== */ .fom-spinner{display:inline-block;border-radius:50%;border-style:solid;border-color:var(--neutral-200); border-top-color:var(--fom-red);animation:fom-spin .7s linear infinite;vertical-align:middle} .fom-spinner--inverse{border-color:rgba(255,255,255,.35);border-top-color:#fff} @keyframes fom-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.fom-spinner{animation-duration:1.4s}} /* ===== Table (data) ===== */ .fom-table__scroll{width:100%;overflow-x:auto} .fom-table{width:100%;border-collapse:collapse;font-family:var(--font-text);font-size:var(--fs-body-sm);color:var(--text-body)} .fom-table th,.fom-table td{padding:var(--space-3) var(--space-4);text-align:left;vertical-align:middle} .fom-table--sm th,.fom-table--sm td{padding:var(--space-2) var(--space-3)} .fom-table thead th{font-weight:var(--fw-semibold);font-size:var(--fs-caption);color:var(--text-muted); letter-spacing:.01em;border-bottom:1px solid var(--border-default);white-space:nowrap;background:var(--surface-page)} .fom-table--sticky thead th{position:sticky;top:0;z-index:1} .fom-table tbody td{border-bottom:1px solid var(--border-subtle);color:var(--text-strong)} .fom-table tbody tr:last-child td{border-bottom:0} .fom-table--hover tbody tr:hover{background:var(--surface-hover)} .fom-table--clickable tbody tr{cursor:pointer} .fom-table__sort{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:0;background:transparent; font:inherit;color:inherit;padding:0;font-weight:var(--fw-semibold)} .fom-table__sort:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)} .fom-table__caret{width:14px;height:14px;opacity:.4} .fom-table__caret--on{opacity:1;color:var(--fom-red)} .fom-table__caret svg{width:100%;height:100%} .fom-table__empty{padding:0} .is-num{text-align:right;font-variant-numeric:tabular-nums} /* ===== Alert (feedback) ===== */ .fom-alert{display:flex;gap:12px;font-family:var(--font-text); border-radius:var(--radius-md);padding:14px 16px;font-size:var(--fs-body-sm); border:1px solid transparent;align-items:flex-start} .fom-alert__icon{flex:none;margin-top:1px;display:inline-flex} .fom-alert__icon svg{width:18px;height:18px} .fom-alert__body{flex:1;line-height:1.45;color:var(--text-body)} .fom-alert__title{font-weight:var(--fw-semibold);color:var(--text-strong);margin-bottom:2px} .fom-alert--info{background:var(--surface-muted);border-color:var(--border-subtle)} .fom-alert--info .fom-alert__icon{color:var(--text-muted)} .fom-alert--success{background:var(--badge-soft-green-bg);border-color:var(--alert-success-border)} .fom-alert--success .fom-alert__icon{color:var(--badge-soft-green-fg)} .fom-alert--warning{background:var(--badge-soft-warning-bg);border-color:var(--alert-warning-border)} .fom-alert--warning .fom-alert__icon{color:var(--badge-soft-warning-fg)} .fom-alert--error{background:var(--badge-soft-red-bg);border-color:var(--alert-error-border)} .fom-alert--error .fom-alert__icon{color:var(--badge-soft-red-fg)} /* ===== Checkbox (forms) ===== */ .fom-check{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--font-text); cursor:pointer;color:var(--text-body);font-size:var(--fs-body)} .fom-check input{position:absolute;opacity:0;width:0;height:0} .fom-check__box{flex:none;width:20px;height:20px;border-radius:var(--radius-xs); border:1.5px solid var(--border-strong);background:var(--surface-input);display:inline-flex; align-items:center;justify-content:center;color:#fff;margin-top:1px; transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)} .fom-check__box svg{width:14px;height:14px;opacity:0;transition:opacity var(--dur-fast)} .fom-check input:checked + .fom-check__box{background:var(--fom-red);border-color:var(--fom-red)} .fom-check input:checked + .fom-check__box svg{opacity:1} .fom-check input:focus-visible + .fom-check__box{box-shadow:var(--shadow-focus)} .fom-check input:disabled + .fom-check__box{background:var(--surface-disabled);border-color:var(--border-default)} .fom-check.is-disabled{opacity:.55;cursor:not-allowed} .fom-check__txt{line-height:1.3} .fom-check__txt small{display:block;color:var(--text-muted);font-size:var(--fs-caption);margin-top:2px} /* ===== CheckboxGroup (forms) ===== */ .fom-check{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--font-text); cursor:pointer;color:var(--text-body);font-size:var(--fs-body)} .fom-check input{position:absolute;opacity:0;width:0;height:0} .fom-check__box{flex:none;width:20px;height:20px;border-radius:var(--radius-xs); border:1.5px solid var(--border-strong);background:var(--surface-input);display:inline-flex; align-items:center;justify-content:center;color:#fff;margin-top:1px; transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)} .fom-check__box svg{width:14px;height:14px;opacity:0;transition:opacity var(--dur-fast)} .fom-check input:checked + .fom-check__box{background:var(--fom-red);border-color:var(--fom-red)} .fom-check input:checked + .fom-check__box svg{opacity:1} .fom-check input:focus-visible + .fom-check__box{box-shadow:var(--shadow-focus)} .fom-check input:disabled + .fom-check__box{background:var(--surface-disabled);border-color:var(--border-default)} .fom-check.is-disabled{opacity:.55;cursor:not-allowed} .fom-check__txt{line-height:1.3} .fom-check__txt small{display:block;color:var(--text-muted);font-size:var(--fs-caption);margin-top:2px} /* ===== Chip (forms) ===== */ .fom-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-text); font-size:var(--fs-body-sm);font-weight:var(--fw-medium);line-height:1; height:32px;padding:0 12px;border-radius:var(--radius-pill); border:1.5px solid var(--border-default);background:var(--surface-input);color:var(--text-strong); cursor:default;white-space:nowrap;-webkit-tap-highlight-color:transparent; transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)} .fom-chip--sm{height:26px;padding:0 10px;font-size:var(--fs-caption)} .fom-chip--clickable{cursor:pointer} .fom-chip--clickable:hover{background:var(--surface-hover);border-color:var(--border-strong)} .fom-chip--clickable:focus-visible{outline:none;box-shadow:var(--shadow-focus)} .fom-chip--selected{background:var(--fom-red);border-color:var(--fom-red);color:#fff} .fom-chip--selected.fom-chip--clickable:hover{background:var(--red-600);border-color:var(--red-600)} .fom-chip[aria-disabled="true"]{opacity:.5;pointer-events:none} .fom-chip__ico{display:inline-flex;flex:none} .fom-chip__ico svg{width:15px;height:15px} .fom-chip__x{display:inline-flex;align-items:center;justify-content:center;flex:none; width:18px;height:18px;margin-right:-4px;border:0;background:transparent;cursor:pointer; color:currentColor;opacity:.7;border-radius:50%;font-size:15px;line-height:1} .fom-chip__x:hover{opacity:1;background:rgba(0,0,0,.08)} .fom-chip--selected .fom-chip__x:hover{background:rgba(255,255,255,.25)} /* ===== DatePicker (forms) ===== */ .fom-dp{display:flex;flex-direction:column;gap:6px;font-family:var(--font-text);width:100%;position:relative} .fom-dp__label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)} .fom-dp__req{color:var(--fom-red);margin-left:2px} .fom-dp__control{display:flex;align-items:center;gap:8px;background:var(--surface-input);cursor:pointer; border:1.5px solid var(--border-default);border-radius:var(--radius-md);padding:0 12px;height:44px; transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)} .fom-dp__control:focus-visible{outline:none;border-color:var(--fom-red);box-shadow:var(--shadow-focus)} .fom-dp__control.is-open{border-color:var(--fom-red);box-shadow:var(--shadow-focus)} .fom-dp__control.is-error{border-color:var(--status-error)} .fom-dp__control[aria-disabled="true"]{background:var(--surface-disabled);opacity:.7;cursor:not-allowed} .fom-dp__ico{flex:none;display:inline-flex;color:var(--text-muted)} .fom-dp__ico svg{width:18px;height:18px} .fom-dp__text{flex:1;font-size:var(--fs-body);color:var(--text-strong);text-align:left} .fom-dp__text.is-placeholder{color:var(--text-subtle);font-size:var(--fs-body-sm)} .fom-dp__hint{font-size:var(--fs-caption);color:var(--text-muted)} .fom-dp__hint.is-error{color:var(--status-error)} .fom-dp__pop{position:fixed;z-index:1100;width:280px; background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md); box-shadow:var(--shadow-lg);padding:var(--space-3);animation:fom-dp-in var(--dur-fast) var(--ease-out)} .fom-dp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)} .fom-dp__nav{width:30px;height:30px;border:0;background:transparent;border-radius:var(--radius-sm);cursor:pointer; color:var(--text-strong);display:inline-flex;align-items:center;justify-content:center} .fom-dp__nav:hover{background:var(--surface-hover)} .fom-dp__nav svg{width:18px;height:18px} .fom-dp__title{font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);color:var(--text-strong);text-transform:capitalize} .fom-dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .fom-dp__wd{text-align:center;font-size:var(--fs-micro);color:var(--text-subtle);font-weight:var(--fw-semibold); text-transform:uppercase;padding:4px 0} .fom-dp__day{height:34px;border:0;background:transparent;border-radius:var(--radius-sm);cursor:pointer; font:inherit;font-size:var(--fs-body-sm);color:var(--text-strong); transition:background var(--dur-fast) var(--ease-standard)} .fom-dp__day:hover:not(:disabled){background:var(--surface-hover)} .fom-dp__day:focus-visible{outline:none;box-shadow:var(--shadow-focus)} .fom-dp__day--out{color:var(--text-subtle);opacity:.55} .fom-dp__day--today{font-weight:var(--fw-bold);color:var(--fom-red)} .fom-dp__day--sel{background:var(--fom-red);color:#fff} .fom-dp__day--sel:hover{background:var(--red-600)!important} .fom-dp__day:disabled{opacity:.3;cursor:not-allowed} @keyframes fom-dp-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.fom-dp__pop{animation:none}} /* ===== FormField (forms) ===== */ .fom-formfield{display:flex;flex-direction:column;gap:6px;font-family:var(--font-text);width:100%} .fom-formfield__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)} .fom-formfield__label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)} .fom-formfield__req{color:var(--fom-red);margin-left:2px} .fom-formfield__opt{font-size:var(--fs-caption);color:var(--text-subtle);font-weight:var(--fw-regular)} .fom-formfield__hint{font-size:var(--fs-caption);color:var(--text-muted);line-height:var(--lh-normal)} .fom-formfield__hint.is-error{color:var(--status-error)} /* ===== Input (forms) ===== */ .fom-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-text);width:100%} .fom-field__label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)} .fom-field__req{color:var(--fom-red);margin-left:2px} .fom-field__wrap{display:flex;align-items:center;gap:8px;background:var(--surface-input); border:1.5px solid var(--border-default);border-radius:var(--radius-md); padding:0 12px;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)} .fom-field__wrap:focus-within{border-color:var(--fom-red);box-shadow:var(--shadow-focus)} .fom-field__wrap.is-error{border-color:var(--status-error)} .fom-field__wrap.is-error:focus-within{box-shadow:var(--shadow-focus)} .fom-field__wrap.is-disabled{background:var(--surface-disabled);border-color:var(--border-subtle);opacity:.7;pointer-events:none} .fom-field__input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-feature-settings:"ss01"; color:var(--text-strong);height:42px;font-size:var(--fs-body);min-width:0} .fom-field__input::placeholder{color:var(--text-subtle);font-size:var(--fs-body-sm)} .fom-field--sm .fom-field__input{height:34px;font-size:var(--fs-body-sm)} .fom-field--lg .fom-field__input{height:50px;font-size:var(--fs-body-lg)} .fom-field__icon{display:inline-flex;color:var(--text-muted);flex:none} .fom-field__icon svg{width:18px;height:18px} .fom-field__hint{font-size:var(--fs-caption);color:var(--text-muted)} .fom-field__hint.is-error{color:var(--status-error)} /* ===== Radio (forms) ===== */ .fom-radio{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--font-text); cursor:pointer;color:var(--text-body);font-size:var(--fs-body)} .fom-radio input{position:absolute;opacity:0;width:0;height:0} .fom-radio__dot{flex:none;width:20px;height:20px;border-radius:50%; border:1.5px solid var(--border-strong);background:var(--surface-input);display:inline-flex; align-items:center;justify-content:center;margin-top:1px; transition:border-color var(--dur-fast) var(--ease-standard)} .fom-radio__dot::after{content:"";width:10px;height:10px;border-radius:50%; background:var(--fom-red);transform:scale(0);transition:transform var(--dur-fast) var(--ease-standard)} .fom-radio input:checked + .fom-radio__dot{border-color:var(--fom-red)} .fom-radio input:checked + .fom-radio__dot::after{transform:scale(1)} .fom-radio input:focus-visible + .fom-radio__dot{box-shadow:var(--shadow-focus)} .fom-radio.is-disabled{opacity:.55;cursor:not-allowed} .fom-radio__txt{line-height:1.3} .fom-radio__txt small{display:block;color:var(--text-muted);font-size:var(--fs-caption);margin-top:2px} /* ===== RadioGroup (forms) ===== */ .fom-radio{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--font-text); cursor:pointer;color:var(--text-body);font-size:var(--fs-body)} .fom-radio input{position:absolute;opacity:0;width:0;height:0} .fom-radio__dot{flex:none;width:20px;height:20px;border-radius:50%; border:1.5px solid var(--border-strong);background:var(--surface-input);display:inline-flex; align-items:center;justify-content:center;margin-top:1px; transition:border-color var(--dur-fast) var(--ease-standard)} .fom-radio__dot::after{content:"";width:10px;height:10px;border-radius:50%; background:var(--fom-red);transform:scale(0);transition:transform var(--dur-fast) var(--ease-standard)} .fom-radio input:checked + .fom-radio__dot{border-color:var(--fom-red)} .fom-radio input:checked + .fom-radio__dot::after{transform:scale(1)} .fom-radio input:focus-visible + .fom-radio__dot{box-shadow:var(--shadow-focus)} .fom-radio.is-disabled{opacity:.55;cursor:not-allowed} .fom-radio__txt{line-height:1.3} .fom-radio__txt small{display:block;color:var(--text-muted);font-size:var(--fs-caption);margin-top:2px} /* ===== SearchField (forms) ===== */ .fom-search{display:inline-flex;align-items:center;gap:8px;background:var(--surface-input);width:100%; border:1.5px solid var(--border-default);border-radius:var(--radius-md);padding:0 12px; font-family:var(--font-text); transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)} .fom-search:focus-within{border-color:var(--fom-red);box-shadow:var(--shadow-focus)} .fom-search--pill{border-radius:var(--radius-pill)} .fom-search--sm{padding:0 10px} .fom-search__ico{flex:none;display:flex;align-items:center;justify-content:center;color:var(--text-muted)} .fom-search__ico svg{width:18px;height:18px;display:block} .fom-search__el{flex:1;border:0;outline:0;background:transparent;font:inherit;font-feature-settings:"ss01"; color:var(--text-strong);height:42px;font-size:var(--fs-body);min-width:0;line-height:1} .fom-search--sm .fom-search__el{height:34px;font-size:var(--fs-body-sm)} .fom-search__el::placeholder{color:var(--text-subtle);font-size:var(--fs-body-sm)} .fom-search__el::-webkit-search-cancel-button,.fom-search__el::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none} .fom-search__clear{flex:none;border:0;background:transparent;cursor:pointer;color:var(--text-subtle); width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1} .fom-search__clear:hover{background:var(--surface-hover);color:var(--text-strong)} /* ===== Select (forms) ===== */ .fom-select{display:flex;flex-direction:column;gap:6px;font-family:var(--font-text);width:100%} .fom-select__label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)} .fom-select__wrap{position:relative;display:flex;align-items:center} .fom-select__el{appearance:none;-webkit-appearance:none;width:100%;height:44px; border:1.5px solid var(--border-default);border-radius:var(--radius-md); background:var(--surface-input);color:var(--text-strong);font:inherit;font-feature-settings:"ss01";font-size:var(--fs-body); padding:0 40px 0 12px;cursor:pointer; transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)} .fom-select__el:focus{outline:0;border-color:var(--fom-red);box-shadow:var(--shadow-focus)} .fom-select__el:disabled{background:var(--surface-disabled);opacity:.7;cursor:not-allowed} .fom-select__el.is-error{border-color:var(--status-error)} .fom-select__chev{position:absolute;right:12px;pointer-events:none;color:var(--text-muted);display:inline-flex} .fom-select__hint{font-size:var(--fs-caption);color:var(--text-muted)} .fom-select__hint.is-error{color:var(--status-error)} /* ===== Slider (forms) ===== */ .fom-slider{display:flex;flex-direction:column;gap:8px;font-family:var(--font-text);width:100%} .fom-slider__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)} .fom-slider__label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)} .fom-slider__val{font-size:var(--fs-body-sm);color:var(--text-muted);font-variant-numeric:tabular-nums} .fom-slider__range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-pill); background:linear-gradient(var(--fom-red),var(--fom-red)) no-repeat,var(--neutral-150); background-size:var(--_pct,0%) 100%;cursor:pointer;outline:none} .fom-slider__range:focus-visible{box-shadow:var(--shadow-focus)} .fom-slider__range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%; background:var(--control-knob);border:2px solid var(--fom-red);box-shadow:var(--shadow-sm);cursor:grab;margin-top:0} .fom-slider__range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--control-knob); border:2px solid var(--fom-red);box-shadow:var(--shadow-sm);cursor:grab} .fom-slider__range:disabled{opacity:.5;cursor:not-allowed} .fom-slider__range:disabled::-webkit-slider-thumb{border-color:var(--neutral-400);cursor:not-allowed} /* ===== Switch (forms) ===== */ .fom-switch{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-text); cursor:pointer;color:var(--text-body);font-size:var(--fs-body)} .fom-switch input{position:absolute;opacity:0;width:0;height:0} .fom-switch__track{flex:none;width:42px;height:24px;border-radius:var(--radius-pill); background:var(--neutral-300);position:relative;transition:background var(--dur-base) var(--ease-standard)} .fom-switch__track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px; border-radius:50%;background:var(--control-knob);box-shadow:var(--shadow-xs); transition:transform var(--dur-base) var(--ease-standard)} .fom-switch input:checked + .fom-switch__track{background:var(--fom-red)} .fom-switch input:checked + .fom-switch__track::after{transform:translateX(18px)} .fom-switch input:focus-visible + .fom-switch__track{box-shadow:var(--shadow-focus)} .fom-switch.is-disabled{opacity:.55;cursor:not-allowed} /* ===== Textarea (forms) ===== */ .fom-ta{display:flex;flex-direction:column;gap:6px;font-family:var(--font-text);width:100%} .fom-ta__label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)} .fom-ta__req{color:var(--fom-red);margin-left:2px} .fom-ta__el{width:100%;border:1.5px solid var(--border-default);border-radius:var(--radius-md); background:var(--surface-input);color:var(--text-strong);font:inherit;font-feature-settings:"ss01";font-size:var(--fs-body); padding:10px 12px;resize:vertical;min-height:88px;line-height:var(--lh-normal); transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)} .fom-ta__el::placeholder{color:var(--text-subtle);font-size:var(--fs-body-sm)} .fom-ta__el:focus{outline:0;border-color:var(--fom-red);box-shadow:var(--shadow-focus)} .fom-ta__el:disabled{background:var(--surface-disabled);opacity:.7;cursor:not-allowed} .fom-ta__el.is-error{border-color:var(--status-error)} .fom-ta__foot{display:flex;justify-content:space-between;gap:var(--space-3)} .fom-ta__hint{font-size:var(--fs-caption);color:var(--text-muted)} .fom-ta__hint.is-error{color:var(--status-error)} .fom-ta__count{font-size:var(--fs-caption);color:var(--text-subtle);font-variant-numeric:tabular-nums;flex:none} .fom-ta__count.is-over{color:var(--status-error)} /* ===== Container (layout) ===== */ .fom-container{width:100%;margin-inline:auto;padding-inline:var(--gutter);box-sizing:border-box} .fom-container--sm{max-width:var(--container-sm)} .fom-container--md{max-width:var(--container-md)} .fom-container--lg{max-width:var(--container-lg)} .fom-container--xl{max-width:var(--container-xl)} .fom-container--full{max-width:none} .fom-container--flush{padding-inline:0} /* ===== Divider (layout) ===== */ .fom-divider{border:0;background:transparent;color:var(--text-muted);font-family:var(--font-text)} .fom-divider--h{width:100%;height:var(--border-hairline);background:var(--border-subtle);margin-block:var(--space-4)} .fom-divider--v{align-self:stretch;width:var(--border-hairline);min-height:1em;background:var(--border-subtle);margin-inline:var(--space-3)} .fom-divider--strong.fom-divider--h{background:var(--border-default)} .fom-divider--strong.fom-divider--v{background:var(--border-default)} .fom-divider--label{display:flex;align-items:center;gap:var(--space-3);text-align:center} .fom-divider--label::before,.fom-divider--label::after{content:"";flex:1;height:var(--border-hairline);background:var(--border-subtle)} .fom-divider__txt{font-size:var(--fs-caption);font-weight:var(--fw-semibold); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);white-space:nowrap} /* ===== Stack (layout) ===== */ .fom-stack{display:flex;min-width:0} .fom-stack--row{flex-direction:row} .fom-stack--col{flex-direction:column} .fom-stack--wrap{flex-wrap:wrap} /* ===== Breadcrumbs (navigation) ===== */ .fom-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-family:var(--font-text);font-size:var(--fs-body-sm)} .fom-crumbs__link{color:var(--text-muted);text-decoration:none;border-radius:var(--radius-xs); transition:color var(--dur-fast) var(--ease-standard)} .fom-crumbs__link:hover{color:var(--text-strong)} .fom-crumbs__link:focus-visible{outline:none;box-shadow:var(--shadow-focus)} .fom-crumbs__cur{color:var(--text-strong);font-weight:var(--fw-semibold)} .fom-crumbs__sep{color:var(--text-subtle);display:inline-flex;user-select:none} .fom-crumbs__sep svg{width:15px;height:15px} /* ===== NavMenu (navigation) ===== */ .fom-nav{display:flex;flex-direction:column;gap:2px;font-family:var(--font-text);width:100%} .fom-nav__heading{padding:var(--space-4) var(--space-3) var(--space-1);font-size:var(--fs-micro); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-subtle);font-weight:var(--fw-semibold)} .fom-nav__heading:first-child{padding-top:var(--space-1)} .fom-nav__item{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left; border:0;background:transparent;cursor:pointer;border-radius:var(--radius-md);text-decoration:none; padding:9px var(--space-3);font:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-body); transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)} .fom-nav__item:hover{background:var(--surface-hover);color:var(--text-strong)} .fom-nav__item:focus-visible{outline:none;box-shadow:var(--shadow-focus)} .fom-nav__item--active{background:var(--surface-brand-tint);color:var(--fom-red);font-weight:var(--fw-semibold)} .fom-nav__item--active:hover{background:var(--surface-brand-tint-strong);color:var(--fom-red)} .fom-nav__ico{flex:none;display:inline-flex;width:20px;height:20px;color:currentColor;align-self:flex-start;margin-top:1px} .fom-nav__ico svg{width:100%;height:100%} .fom-nav__label{flex:1;min-width:0;line-height:1.3;overflow-wrap:break-word} .fom-nav__badge{flex:none;align-self:flex-start;margin-top:1px} .fom-nav__chev{flex:none;display:inline-flex;width:16px;height:16px;color:var(--text-subtle);align-self:flex-start;margin-top:3px; transition:transform var(--dur-fast) var(--ease-standard)} .fom-nav__chev svg{width:100%;height:100%} .fom-nav__chev.is-open{transform:rotate(90deg)} /* nested level: a guide rail + dimmer child rows */ .fom-nav__sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 2px calc(var(--space-3) + 10px); padding-left:var(--space-3);border-left:1px solid var(--border-subtle)} .fom-nav__sub .fom-nav__item{font-weight:var(--fw-regular);color:var(--text-muted)} .fom-nav__sub .fom-nav__item:hover{color:var(--text-strong)} .fom-nav__sub .fom-nav__item--active{color:var(--fom-red);font-weight:var(--fw-medium)} /* ===== Sidebar (navigation) ===== */ .fom-sidebar{display:flex;flex-direction:column;height:100%;background:var(--surface-card); border-right:1px solid var(--border-subtle);font-family:var(--font-text); width:var(--_w,260px);transition:width var(--dur-base) var(--ease-standard)} .fom-sidebar--collapsed{--_w:72px} .fom-sidebar__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-4); min-height:64px;border-bottom:1px solid var(--border-subtle)} .fom-sidebar__body{flex:1;overflow-y:auto;padding:var(--space-3)} .fom-sidebar__foot{padding:var(--space-3);border-top:1px solid var(--border-subtle)} .fom-sidebar--collapsed .fom-nav__label,.fom-sidebar--collapsed .fom-nav__badge, .fom-sidebar--collapsed .fom-nav__heading{display:none} .fom-sidebar--collapsed .fom-nav__item{justify-content:center;padding:9px 0} /* ===== Stepper (navigation) ===== */ .fom-step{display:flex;font-family:var(--font-text)} .fom-step--h{align-items:flex-start} .fom-step--v{flex-direction:column} .fom-step__dot{flex:none;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:var(--fs-body-sm);font-weight:var(--fw-bold);border:2px solid var(--border-strong); background:var(--surface-card);color:var(--text-muted);transition:all var(--dur-base) var(--ease-standard);position:relative;z-index:1} .fom-step__dot svg{width:16px;height:16px} .fom-step__item--active .fom-step__dot{border-color:var(--fom-red);color:var(--fom-red)} .fom-step__item--done .fom-step__dot{border-color:var(--fom-red);background:var(--fom-red);color:#fff} .fom-step__title{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-muted)} .fom-step__item--active .fom-step__title,.fom-step__item--done .fom-step__title{color:var(--text-strong)} .fom-step__sub{display:block;font-size:var(--fs-caption);color:var(--text-subtle);margin-top:2px} /* ---- horizontal: dots in a row, label centered below, connector links dot centers ---- */ .fom-step--h .fom-step__item{flex:1;position:relative;display:flex;flex-direction:column;align-items:center; text-align:center;padding:0 var(--space-2)} .fom-step--h .fom-step__txt{margin-top:var(--space-2);max-width:14ch} .fom-step--h .fom-step__item:not(:last-child)::after{content:"";position:absolute;top:14px; left:calc(50% + 19px);width:calc(100% - 38px);height:2px;background:var(--border-default);z-index:0} .fom-step--h .fom-step__item--done:not(:last-child)::after{background:var(--fom-red)} /* ---- vertical: dots in a column, label to the right, connector runs between dots ---- */ .fom-step--v .fom-step__item{position:relative;display:flex;align-items:flex-start;gap:var(--space-3);padding-bottom:var(--space-6)} .fom-step--v .fom-step__item:last-child{padding-bottom:0} .fom-step--v .fom-step__txt{padding-top:5px} .fom-step--v .fom-step__item:not(:last-child)::after{content:"";position:absolute;left:14px;top:32px;bottom:0; width:2px;background:var(--border-default);z-index:0} .fom-step--v .fom-step__item--done:not(:last-child)::after{background:var(--fom-red)} /* ===== Tabs (navigation) ===== */ .fom-tabs{display:flex;gap:var(--space-1);font-family:var(--font-text); border-bottom:1px solid var(--border-subtle)} .fom-tabs--pill{border-bottom:0;gap:6px;background:var(--surface-muted); padding:4px;border-radius:var(--radius-md);display:inline-flex} .fom-tab{appearance:none;border:0;background:transparent;cursor:pointer; font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-semibold); font-feature-settings:"ss01"; color:var(--text-muted);padding:12px 16px;position:relative;white-space:nowrap; transition:color var(--dur-fast) var(--ease-standard)} .fom-tab:hover{color:var(--text-strong)} .fom-tab[aria-selected="true"]{color:var(--fom-red)} .fom-tab[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px; height:3px;border-radius:3px 3px 0 0;background:var(--fom-red)} .fom-tabs--pill .fom-tab{border-radius:var(--radius-sm);padding:8px 16px} .fom-tabs--pill .fom-tab::after{display:none} .fom-tabs--pill .fom-tab[aria-selected="true"]{background:var(--surface-card);color:var(--text-strong);box-shadow:var(--shadow-xs)} .fom-tab__count{margin-left:6px;font-size:var(--fs-caption);color:var(--text-subtle)} .fom-tab[aria-selected="true"] .fom-tab__count{color:inherit} /* ===== Drawer (overlay) ===== */ .fom-drawer__backdrop{position:fixed;inset:0;z-index:1000;background:rgba(16,24,32,0.55); animation:fom-drawer-fade var(--dur-base) var(--ease-standard)} .fom-drawer{position:fixed;z-index:1001;top:0;bottom:0;background:var(--surface-card); box-shadow:var(--shadow-xl);display:flex;flex-direction:column;font-family:var(--font-text);color:var(--text-body); width:min(420px,calc(100vw - var(--space-12)))} .fom-drawer--right{right:0;animation:fom-drawer-in-r var(--dur-base) var(--ease-out)} .fom-drawer--left{left:0;animation:fom-drawer-in-l var(--dur-base) var(--ease-out)} .fom-drawer__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-4); border-bottom:1px solid var(--border-subtle)} .fom-drawer__title{flex:1;font-weight:var(--fw-bold);font-size:var(--fs-h3);color:var(--text-strong)} .fom-drawer__x{flex:none;width:32px;height:32px;border:0;background:transparent;border-radius:var(--radius-sm); cursor:pointer;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1; transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)} .fom-drawer__x:hover{background:var(--surface-hover);color:var(--text-strong)} .fom-drawer__x:focus-visible{outline:none;box-shadow:var(--shadow-focus)} .fom-drawer__body{padding:var(--space-5);overflow:auto;flex:1} .fom-drawer__foot{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-subtle)} @keyframes fom-drawer-fade{from{opacity:0}to{opacity:1}} @keyframes fom-drawer-in-r{from{transform:translateX(100%)}to{transform:none}} @keyframes fom-drawer-in-l{from{transform:translateX(-100%)}to{transform:none}} @media (prefers-reduced-motion:reduce){.fom-drawer,.fom-drawer__backdrop{animation:none}} /* ===== DropdownMenu (overlay) ===== */ .fom-menu__anchor{display:inline-flex} .fom-menu{position:fixed;z-index:1100;background:var(--surface-card);border:1px solid var(--border-subtle); border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:200px;max-width:300px;padding:var(--space-2); font-family:var(--font-text);color:var(--text-body);animation:fom-menu-in var(--dur-fast) var(--ease-out)} .fom-menu__item{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left; border:0;background:transparent;cursor:pointer;border-radius:var(--radius-sm); padding:8px 10px;font:inherit;font-size:var(--fs-body-sm);color:var(--text-strong); transition:background var(--dur-fast) var(--ease-standard)} .fom-menu__item:hover,.fom-menu__item:focus-visible{outline:none;background:var(--surface-hover)} .fom-menu__item[disabled]{opacity:.45;pointer-events:none} .fom-menu__item--danger{color:var(--fom-red)} .fom-menu__item--danger:hover,.fom-menu__item--danger:focus-visible{background:var(--status-error-bg)} .fom-menu__ico{flex:none;display:inline-flex;width:18px;height:18px;color:var(--text-muted)} .fom-menu__item--danger .fom-menu__ico{color:var(--fom-red)} .fom-menu__ico svg{width:100%;height:100%} .fom-menu__sep{height:1px;background:var(--border-subtle);margin:var(--space-2) 0} .fom-menu__label{padding:6px 10px 4px;font-size:var(--fs-micro);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-semibold)} @keyframes fom-menu-in{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.fom-menu{animation:none}} /* ===== Modal (overlay) ===== */ .fom-modal__backdrop{position:fixed;inset:0;z-index:1000;background:rgba(16,24,32,0.55); display:flex;align-items:center;justify-content:center;padding:var(--space-5); animation:fom-modal-fade var(--dur-base) var(--ease-standard)} .fom-modal{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl); width:100%;max-height:calc(100vh - var(--space-10));display:flex;flex-direction:column; font-family:var(--font-text);color:var(--text-body);overflow:hidden; animation:fom-modal-rise var(--dur-base) var(--ease-out)} .fom-modal--sm{max-width:400px}.fom-modal--md{max-width:520px} .fom-modal--lg{max-width:720px}.fom-modal--xl{max-width:960px} .fom-modal__head{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-5) var(--space-6) var(--space-4)} .fom-modal__titles{flex:1;min-width:0} .fom-modal__title{font-weight:var(--fw-bold);font-size:var(--fs-h2);color:var(--text-strong);line-height:var(--lh-snug)} .fom-modal__desc{margin-top:var(--space-1);font-size:var(--fs-body-sm);color:var(--text-muted)} .fom-modal__x{flex:none;width:32px;height:32px;border:0;background:transparent;border-radius:var(--radius-sm); cursor:pointer;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1; transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)} .fom-modal__x:hover{background:var(--surface-hover);color:var(--text-strong)} .fom-modal__x:focus-visible{outline:none;box-shadow:var(--shadow-focus)} .fom-modal__body{padding:0 var(--space-6);overflow:auto;flex:1} .fom-modal__body--pad{padding-block:var(--space-1) var(--space-2)} .fom-modal__foot{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-5) var(--space-6); border-top:1px solid var(--border-subtle);margin-top:var(--space-5)} @keyframes fom-modal-fade{from{opacity:0}to{opacity:1}} @keyframes fom-modal-rise{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.fom-modal__backdrop,.fom-modal{animation:none}} /* ===== Popover (overlay) ===== */ .fom-pop__anchor{display:inline-flex} .fom-pop{position:fixed;z-index:1100;background:var(--surface-card);border:1px solid var(--border-subtle); border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:180px;max-width:320px; font-family:var(--font-text);color:var(--text-body);padding:var(--space-3); animation:fom-pop-in var(--dur-fast) var(--ease-out)} @keyframes fom-pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.fom-pop{animation:none}} /* ===== ToastProvider (overlay) ===== */ .fom-toaster{position:fixed;z-index:1200;display:flex;flex-direction:column;gap:var(--space-3); padding:var(--space-5);pointer-events:none;max-width:min(420px,100vw)} .fom-toaster--br{right:0;bottom:0}.fom-toaster--tr{right:0;top:0} .fom-toaster--bl{left:0;bottom:0}.fom-toaster--tc{left:50%;top:0;translate:-50% 0} .fom-toast{pointer-events:auto;display:flex;gap:var(--space-3);align-items:flex-start; background:var(--surface-card);border:1px solid var(--border-subtle);border-left:3px solid var(--neutral-400); border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-3) var(--space-4); font-family:var(--font-text);color:var(--text-body);animation:fom-toast-in var(--dur-base) var(--ease-out)} .fom-toast--success{border-left-color:var(--status-success)} .fom-toast--warning{border-left-color:var(--status-warning)} .fom-toast--error{border-left-color:var(--status-error)} .fom-toast--info{border-left-color:var(--neutral-500)} .fom-toast__body{flex:1;min-width:0} .fom-toast__title{font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);color:var(--text-strong)} .fom-toast__desc{margin-top:2px;font-size:var(--fs-caption);color:var(--text-muted);line-height:var(--lh-normal)} .fom-toast__action{margin-top:var(--space-2);background:transparent;border:0;cursor:pointer;padding:0; font:inherit;font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--text-brand)} .fom-toast__x{flex:none;border:0;background:transparent;cursor:pointer;color:var(--text-subtle); font-size:18px;line-height:1;padding:2px;border-radius:var(--radius-xs)} .fom-toast__x:hover{color:var(--text-strong)} @keyframes fom-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.fom-toast{animation:none}} /* ===== Tooltip (overlay) ===== */ .fom-tip__anchor{display:inline-flex} .fom-tip{position:fixed;z-index:1300;background:var(--tooltip-bg);color:#fff; font-family:var(--font-text);font-size:var(--fs-caption);font-weight:var(--fw-medium);line-height:1.35; padding:6px 10px;border-radius:var(--radius-sm);max-width:240px;width:max-content; box-shadow:var(--shadow-md);pointer-events:none; animation:fom-tip-in var(--dur-fast) var(--ease-standard)} .fom-tip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-bg);transform:rotate(45deg)} .fom-tip--top .fom-tip__arrow{bottom:-4px} .fom-tip--bottom .fom-tip__arrow{top:-4px} .fom-tip--left .fom-tip__arrow{right:-4px} .fom-tip--right .fom-tip__arrow{left:-4px} @keyframes fom-tip-in{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.fom-tip{animation:none}}