/* BAF Design System - token foundation. This file is the single source of truth for every raw design value used by the application (color, type, spacing, radius, shadow, z-index, animation timing, breakpoints). Component stylesheets should consume these custom properties instead of hardcoding literals, so a value only ever has to change in one place. Nothing in this file renders anything by itself - it only declares variables. Loaded once, globally, before app.css. */ /* ========================================================================= THEME / COLORS `data-theme` on is the contract future Light / Dark / System theme switching will use. Only "light" (the current, only implemented theme) is defined below - see the reserved block at the end of this section for how Dark and System will plug into the same token names later without any component CSS needing to change. ========================================================================= */ :root, [data-theme="light"] { /* --- BAF brand palette (the actual visual identity) --- */ --baf-bg: #ffffff; --baf-surface: #fafafa; --baf-border: #ececec; --baf-text: #1b1f24; --baf-text-muted: #6c757d; --baf-text-subtle: #9aa0a6; --baf-accent: #6a3ea1; --baf-success: #2fb344; /* Accent derived overlays - translucent washes of --baf-accent / --baf-text used for hover/active/surface states instead of new named colors. */ --baf-color-accent-surface: rgba(106, 62, 161, 0.12); /* avatar background */ --baf-color-accent-selected: rgba(106, 62, 161, 0.1); /* active nav item */ --baf-color-overlay-hover: rgba(27, 31, 36, 0.04); /* neutral hover wash */ --baf-color-icon-muted: rgba(27, 31, 36, 0.65); /* muted icon glyphs (see note in NavMenu.razor.css) */ /* --- Legacy / compatibility colors --- Inherited from the default ASP.NET Core Blazor project template (validation states, default link/button colors, the built-in error banner). Kept verbatim as tokens for exact parity; not part of the BAF brand ramp above. */ --baf-color-white: #ffffff; --baf-color-link: #006bb7; --baf-color-primary: #1b6ec2; --baf-color-primary-border: #1861ac; --baf-color-focus-ring: #258cfb; --baf-color-valid: #26b050; --baf-color-danger: #e50000; --baf-color-danger-strong: #b32121; --baf-color-border-strong: #929292; --baf-color-warning-surface: lightyellow; --baf-color-scrim: rgba(0, 0, 0, 0.4); --baf-color-reconnect-accent: #6b9ed2; --baf-color-reconnect-accent-hover: #3b6ea2; --baf-color-reconnect-spinner: #0087ff; /* BAF-PR-005: the Design System Control Gallery's own approved semantic-status set (CPR - copied from baf-design-system.zip's app/baf-system.css --info/--warn/--neutral/ --inherit/--override, adapted to sit alongside BAF's own already-established brand tokens rather than duplicating them). --baf-success and --baf-color-danger above are REUSED unchanged for the Ok/Danger semantic roles - only the roles BAF genuinely lacked are added here. "-bg"/"-border" (not "-surface", already used elsewhere in this file for elevation) is this group's own consistent suffix pattern. Reserved for Badge/StatusIndicator and similar semantic UI - never for Brain/Lungs/Energy atmosphere visualization (that remains the separate, exclusively-reserved LIVING BRAND ATMOSPHERE group below - docs/110 §9's own binding rule). */ --baf-color-info: #2563eb; --baf-color-info-bg: rgba(37, 99, 235, 0.1); --baf-color-info-border: rgba(37, 99, 235, 0.3); --baf-color-warning: #b45309; --baf-color-warning-bg: rgba(217, 119, 6, 0.12); --baf-color-warning-border: rgba(180, 83, 9, 0.32); --baf-color-neutral: #5a6788; --baf-color-neutral-bg: rgba(90, 103, 136, 0.1); --baf-color-neutral-border: rgba(90, 103, 136, 0.28); /* Settings inheritance vocabulary (docs-authorized future concept, BAF-PR-005 Step 9 - presentation only, no persistence/evaluator authorized by this task). */ --baf-color-inherit: #0e7490; --baf-color-inherit-bg: rgba(14, 116, 144, 0.1); --baf-color-inherit-border: rgba(14, 116, 144, 0.3); --baf-color-override: #7c3aed; --baf-color-override-bg: rgba(124, 58, 237, 0.1); --baf-color-override-border: rgba(124, 58, 237, 0.32); /* One reusable numeric primitive, replacing the ad hoc opacity values already scattered across TextField/Button's own :disabled rules (color-only today) - never a new value per component. */ --baf-opacity-disabled: 0.5; } /* Dark theme (BAF-600A): a presentation-level light/dark toggle now exists (see Components/Layout/ThemeToggle.razor), authorized explicitly by BAF-600A as the narrow exception to CLAUDE.md §5's "do not implement theme switching until authorized." Only the BAF brand palette and its accent-derived overlays are re-themed here - the "Legacy / compatibility colors" group above (inherited from the default Blazor template: validation states, the built-in error banner, the reconnect dialog) is deliberately left unchanged in both themes, exactly as tokens.css's own grouping already treats it as a separate, secondary concern from the BAF brand ramp. No component stylesheet needs to change - every one of them already only ever references the token names below, never a raw color. */ [data-theme="dark"] { /* BAF-UX-009: deepened from a neutral charcoal (#14161a/#1b1e23/#2b2f36) toward a deliberate near-black deep-navy base with a faint blue-violet undertone - real visual validation found the previous neutral values read as generic dark-mode gray rather than a considered part of the Living Brand identity (docs/110/112). --baf-accent is unchanged - it already anticipated this direction. Every component already references these token names only, never a raw value, so no other file needed to change for this enrichment to take effect everywhere. */ --baf-bg: #0b0e1a; --baf-surface: #121729; --baf-border: #262c47; --baf-text: #e8eaed; --baf-text-muted: #a2a9b0; --baf-text-subtle: #74797f; --baf-accent: #b593e8; --baf-success: #4ade80; --baf-color-accent-surface: rgba(181, 147, 232, 0.18); --baf-color-accent-selected: rgba(181, 147, 232, 0.16); --baf-color-overlay-hover: rgba(255, 255, 255, 0.06); --baf-color-icon-muted: rgba(232, 234, 237, 0.65); /* BAF-PR-005: dark-theme values for the semantic-status group above, CPR-copied from baf-design-system.zip's own --info/--warn/--neutral/--inherit/--override dark tokens. */ --baf-color-info: #60a5fa; --baf-color-info-bg: rgba(96, 165, 250, 0.14); --baf-color-info-border: rgba(96, 165, 250, 0.34); --baf-color-warning: #fbbf24; --baf-color-warning-bg: rgba(251, 191, 36, 0.14); --baf-color-warning-border: rgba(251, 191, 36, 0.34); --baf-color-neutral: #94a3c4; --baf-color-neutral-bg: rgba(148, 163, 196, 0.12); --baf-color-neutral-border: rgba(148, 163, 196, 0.26); --baf-color-inherit: #38bdf8; --baf-color-inherit-bg: rgba(56, 189, 248, 0.12); --baf-color-inherit-border: rgba(56, 189, 248, 0.3); --baf-color-override: #a855f7; --baf-color-override-bg: rgba(168, 85, 247, 0.14); --baf-color-override-border: rgba(168, 85, 247, 0.34); } /* ========================================================================= LIVING BRAND ATMOSPHERE (BAF-UX-009) Concept colors for docs/110's Brain substrate and ambient-light layer only (docs/112_Living_Brand_Atmosphere_Architecture.md) - deliberately kept in their own group, separate from the BAF brand palette above and from the semantic/status colors elsewhere in this file, per docs/110 §9's own binding rule ("concept colors are reserved exclusively for Brain/Lungs/ Energy visualization contexts... never a status chip, validation state, button, or any other UI element already governed by the semantic set"). Nothing here is ever a valid substitute for --baf-success/--baf-color-danger/ --baf-accent, and neither of those is ever a valid substitute for this group. ========================================================================= */ :root, [data-theme="light"] { /* Light theme keeps the same architecture but at a barely-perceptible strength - the "flat charcoal" complaint this task exists to resolve describes Dark theme's own prior appearance specifically (§ above); Light was never reported as disconnected and is intentionally left close to unchanged. */ --baf-atmosphere-glow: rgba(106, 62, 161, 0.05); --baf-atmosphere-depth: rgba(37, 99, 235, 0.035); } [data-theme="dark"] { /* BAF-PR-004A: strengthened from the BAF-UX-009 baseline (0.18/0.16) - live visual review against the canonical Dark reference found the substrate reading as too faint/washed out against the already-deepened --baf-bg (#0b0e1a). Still governed by the same --baf-atmosphere-intensity-5 dial (untouched); only these two layer colors' own strength changed, mirroring exactly how BAF-UX-009 itself once deepened --baf-bg/--baf-surface without touching the dial. */ --baf-atmosphere-glow: rgba(181, 147, 232, 0.28); --baf-atmosphere-depth: rgba(99, 102, 241, 0.24); } /* BAF-PR-004: a third concept-color hue (docs/110 §9 - Cyan/Results, already resolved and reserved exclusively for Brain/Lungs/Energy visualization, never a semantic/status color) for Level 5 (Identity/Login) specifically - the canonical Login reference's own "cyan/blue/violet" luminous accents realized as one additional, disciplined gradient hue layered into the same existing substrate formula (AuthenticationLayout.razor.css), never a new mechanism. Kept at the same barely-perceptible Light strength as --baf-atmosphere-glow/-depth above, for the identical reason (Light was never reported as disconnected). Deliberately not Green (docs/110 §9's own named collision risk with --baf-success) and not a fourth/fifth hue beyond this one addition - restraint per docs/110 §8.1 "calm before spectacle".*/ :root, [data-theme="light"] { --baf-atmosphere-accent-results: rgba(8, 145, 178, 0.04); } [data-theme="dark"] { /* BAF-PR-004A: strengthened alongside --baf-atmosphere-glow/-depth above, same reasoning. */ --baf-atmosphere-accent-results: rgba(34, 211, 238, 0.22); } /* BAF-PR-007E (Part G): docs/110 §9's own four-stage concept-color table (Blue/Conversations, Green/Knowledge, Purple/Action, Cyan/Results), realized here as SOLID, icon-foreground-legible variants - the "literal cycle diagram... connective coloring" use §9 itself authorizes, applied to the Lungs' own four pillar icons (AuthenticationLayout.razor's own pillars are already documented, in this codebase, as "the Lungs (docs/110 §6)"). Deliberately a SEPARATE, solid group from the translucent --baf-atmosphere-* wash above: those are calibrated for a barely-perceptible ambient background layer and would read as faded/washed-out if used directly as an icon's own foreground color. Three of the four hues already exist in this file and are reused verbatim, never reinvented: - Conversations reuses --baf-atmosphere-depth's own indigo/blue hue, solid. - Action reuses --baf-accent directly (docs/110 §9's own "discovered alignment" - Purple IS already the brand accent) - no new token; consumers reference --baf-accent, not a new alias. - Results reuses --baf-atmosphere-accent-results's own cyan hue, solid. Knowledge/Green is the one genuinely new value, since no green concept hue exists anywhere in this file (docs/110 §9's own named collision risk with --baf-success is why) - an emerald, deliberately distinct from --baf-success's own more yellow-leaning green (#2fb344/#4ade80), so the two are never confusable at a glance. */ :root, [data-theme="light"] { --baf-concept-conversations: #2563eb; --baf-concept-knowledge: #059669; --baf-concept-results: #0891b2; } [data-theme="dark"] { --baf-concept-conversations: #6366f1; --baf-concept-knowledge: #34d399; --baf-concept-results: #22d3ee; } /* BAF-PR-005C/005D (Section 15/Part B3): a dedicated, explicitly NEUTRAL network color - the exact ambient node/edge RGB triple read directly out of the approved gallery's own neural-background. tsx (dark: `{ r: 208, g: 228, b: 255 }`, a pale blue-white; light: `{ r: 74, g: 96, b: 128 }`, a blue-gray) - never the violet/indigo --baf-atmosphere-glow/-depth pair, whose own identity Walter's live screenshot correctly read as "purple bands"/"purple lattice". Deliberately its OWN token, not a reuse of glow/depth - those two remain completely unchanged for Login/ PageContainer's own existing substrate; this is scoped to NeuralSubstrate.razor's own quiet node/connection layer only. */ :root, [data-theme="light"] { --baf-atmosphere-network: rgba(74, 96, 128, 0.55); } [data-theme="dark"] { --baf-atmosphere-network: rgba(208, 228, 255, 0.6); } :root { /* Atmosphere Scale intensity multipliers (docs/112 §3-9) - scale the shared substrate layer's own opacity only, never page content, so legibility (docs/110 §4 point 1) is guaranteed architecturally regardless of level. Level 0 (Critical Focus) has no entry - a dialog surface renders no substrate at all, rather than one dialed to zero. */ --baf-atmosphere-intensity-1: 0.25; /* Level 1 - Focused Work */ --baf-atmosphere-intensity-2: 0.45; /* Level 2 - Operational Work */ --baf-atmosphere-intensity-3: 0.7; /* Level 3 - Operational Overview */ --baf-atmosphere-intensity-4: 0.85; /* Level 4 - Welcome */ --baf-atmosphere-intensity-5: 1; /* Level 5 - Identity */ } /* ========================================================================= AUTHENTICATION GLASS SURFACE (BAF-PR-004) Login-scoped usage today (AuthenticationCard.razor's optional CssClass modifier, opted into by Login.razor only) - defined here anyway, per this file's own "single source of truth for raw design values" rule (see file header): the token belongs here even though the component consuming it stays scoped to one caller, exactly as this task's own instruction distinguishes ("do not scatter raw magic colors if a semantic token belongs in tokens.css" vs. "keep the glass treatment Login-scoped" - two different questions). Translucent washes of the existing --baf-bg/ --baf-border pair, mirroring the "Accent derived overlays" pattern already established above, never a new hue. ========================================================================= */ :root, [data-theme="light"] { --baf-auth-glass-surface: rgba(255, 255, 255, 0.6); --baf-auth-glass-border: rgba(27, 31, 36, 0.08); } [data-theme="dark"] { /* BAF-PR-004A: darkened/denser (was rgba(18,23,41,0.55)) and a more visible luminous edge (was rgba(181,147,232,0.22)) - live visual review found the original values reading as a generic translucent-gray panel rather than a premium glass surface over a deep-navy field. */ --baf-auth-glass-surface: rgba(10, 13, 26, 0.72); --baf-auth-glass-border: rgba(181, 147, 232, 0.32); } :root { --baf-auth-glass-blur: 16px; } /* System theme resolves by leaving `data-theme` unset and following the OS preference instead. Not wired up yet - BAF-600A authorizes only an explicit, user-driven toggle (persisted via browser-local state), not automatic OS-preference detection. Reserved here for a future slice: @media (prefers-color-scheme: dark) { :root:not([data-theme]) { ...mirror the dark block above... } } */ /* ========================================================================= TYPOGRAPHY Raw primitives (font family / size / weight / letter-spacing) followed by the semantic type roles components should actually use: Display, Heading, Title, Body, Caption, Button. ========================================================================= */ :root { --baf-font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Font-size primitives, ordered smallest to largest. Named by rank rather than value so the scale can gain steps without renumbering. */ --baf-font-size-1: 0.7rem; --baf-font-size-2: 0.75rem; --baf-font-size-3: 0.8rem; --baf-font-size-4: 0.85rem; --baf-font-size-5: 0.9rem; --baf-font-size-6: 0.95rem; --baf-font-size-7: 1.05rem; --baf-font-size-8: 1.1rem; --baf-font-size-9: 1.6rem; --baf-font-size-10: 2.1rem; /* BAF-PR-004B: the platform's single largest text size, reserved for the Identity/Level-5 brand mark (docs/112 §4 - "the strongest, fullest Living Brand expression... no Shell chrome yet exists to share the frame with") - not used by anything ordinary-scale. */ --baf-font-size-11: 3.2rem; --baf-font-weight-regular: 400; --baf-font-weight-semibold: 600; --baf-font-weight-bold: 700; --baf-letter-spacing-wide: 0.08em; --baf-letter-spacing-wider: 0.2em; /* BAF-PR-005D (Part C2): Badge's own dedicated value, measured from the approved gallery's own .baf-badge (0.02em) - 4x tighter than --baf-letter-spacing-wide (0.08em, correct for the uppercase caption/table-header contexts that already share it, e.g. AuthenticationLayout.razor.css's own pillar labels - never repurposed for those). */ --baf-letter-spacing-tight: 0.02em; /* Line-height primitives are reserved for future use. No current element sets an explicit line-height (they rely on the browser default), so none are applied yet - doing so now would change the rendered layout. */ --baf-line-height-tight: 1.2; --baf-line-height-normal: 1.5; --baf-line-height-relaxed: 1.6; /* --- Semantic type roles --- */ /* Display: the largest hero headline (landing page main question). */ --baf-type-display-size: var(--baf-font-size-10); /* 2.1rem */ --baf-type-display-size-compact: var(--baf-font-size-9); /* 1.6rem, narrow viewports */ --baf-type-display-weight: var(--baf-font-weight-semibold); /* Hero: BAF-PR-004B - one step above Display, reserved exclusively for the Authentication Shell's own brand mark (docs/112 §4's Level 5/Identity, the platform's single strongest Living Brand expression) - never used for an ordinary page's own heading, which remains Display or Page Title. */ --baf-type-hero-size: var(--baf-font-size-11); /* 3.2rem */ --baf-type-hero-weight: var(--baf-font-weight-bold); /* Heading: secondary lead-in line above a Display headline. */ --baf-type-heading-size: var(--baf-font-size-8); /* 1.1rem */ /* Page Title: the h1 heading of an ordinary (non-hero) page - e.g. "Create Organization," "Register Member." Distinct from Display (reserved for Home's hero greeting) and from Heading (a lead-in line above a Display headline, not a standalone title). Reuses existing primitives - no new raw size or weight value is introduced. */ --baf-type-page-title-size: var(--baf-font-size-9); /* 1.6rem */ --baf-type-page-title-weight: var(--baf-font-weight-semibold); /* Title: short bold labels - card headers, user name, nav items. */ --baf-type-title-size: var(--baf-font-size-5); /* 0.9rem */ --baf-type-title-size-lg: var(--baf-font-size-6); /* 0.95rem */ --baf-type-title-weight: var(--baf-font-weight-semibold); /* Body: reading text - composer input, card descriptions. */ --baf-type-body-size: var(--baf-font-size-7); /* 1.05rem */ --baf-type-body-size-sm: var(--baf-font-size-4); /* 0.85rem */ /* Caption: muted meta text - roles, status, nav/section labels, footer. */ --baf-type-caption-size: var(--baf-font-size-2); /* 0.75rem */ --baf-type-caption-size-sm: var(--baf-font-size-1); /* 0.7rem */ --baf-type-caption-size-lg: var(--baf-font-size-3); /* 0.8rem */ --baf-type-caption-weight-strong: var(--baf-font-weight-semibold); --baf-type-caption-tracking: var(--baf-letter-spacing-wide); /* Button: reserved for future interactive control labels (no button in the current UI carries text yet). */ --baf-type-button-size: var(--baf-font-size-5); /* 0.9rem */ --baf-type-button-weight: var(--baf-font-weight-semibold); } /* ========================================================================= SPACING One numeric scale drives every margin/padding/gap in the app. Semantic aliases (xs/sm/md/lg/xl) cover the common round steps for new work; the fully-numbered scale exists so every exact value already in use maps to a token with zero visual change. ========================================================================= */ :root { --baf-space-1: 0.15rem; --baf-space-2: 0.25rem; --baf-space-3: 0.35rem; --baf-space-4: 0.5rem; --baf-space-5: 0.6rem; --baf-space-6: 0.7rem; --baf-space-7: 0.75rem; --baf-space-8: 1rem; --baf-space-9: 1.25rem; --baf-space-10: 1.5rem; --baf-space-11: 2rem; --baf-space-12: 2.5rem; --baf-space-13: 3rem; --baf-space-14: 3.5rem; --baf-space-15: 3.7rem; --baf-space-16: 4rem; --baf-space-17: 6rem; /* Semantic aliases - prefer these in new components. */ --baf-space-xs: var(--baf-space-4); /* 0.5rem */ --baf-space-sm: var(--baf-space-7); /* 0.75rem */ --baf-space-md: var(--baf-space-8); /* 1rem */ --baf-space-lg: var(--baf-space-10); /* 1.5rem */ --baf-space-xl: var(--baf-space-11); /* 2rem */ /* Viewport-relative offset used once, for the legacy reconnect dialog's vertical centering. Kept outside the rem scale since it isn't a fixed length and shouldn't be mixed with it. */ --baf-space-viewport-offset: 20vh; } /* ========================================================================= SIZING Fixed element dimensions (icons, controls, fixed-width panels) that aren't inter-element spacing, so they live in their own group rather than the spacing scale above. Where a dimension happens to equal an existing spacing step, the spacing token is reused instead of duplicating the value (see NavMenu.razor.css / Home.razor.css usage). ========================================================================= */ :root { --baf-size-control-sm: 2.25rem; /* avatar, icon buttons, nav-link row height */ --baf-size-icon-sm: 1.15rem; /* attach / voice icon glyphs */ --baf-size-icon-lg: 1.8rem; /* default error boundary icon artwork */ --baf-size-icon-xl: 2.25rem; /* BAF-PR-007E: Login's own four-pillar icons at their calibrated Desktop scale */ /* BAF-PR-007K: the Desktop Brand Mark's own size within the identity lockup - narrowly scoped (not reused elsewhere) rather than a bare rem literal in BafBrandMark.razor.css, per this file's own "single source of truth for raw design values" rule. Sized (Playwright-measured, not guessed) so the mark's own rendered height lands within ~0.85-1.15x the combined BAF-wordmark + BUSINESS/APPLICATION/FRAMEWORK text-block height beside it, matching the compositional relationship in Walter's own supplied reference image. The Mobile/Tablet compact instance is untouched - .baf-brand-mark-compact (BafBrandMark.razor.css) still overrides this back down to its own existing, much smaller size. */ --baf-size-brand-mark: 8rem; --baf-size-dot: 0.4rem; /* online status indicator */ --baf-size-sidebar: 264px; /* desktop sidebar column width */ --baf-size-composer-min-height: 8rem; /* composer textarea minimum height */ /* BAF-PR-004B: the Authentication Shell's own two content-column widths at Desktop - previously small, untokenized literals (22rem/24rem) that left most of a large viewport visually unused. Named here, per this file's own "single source of truth" rule, even though each is consumed by only one file today. BAF-PR-007A: --baf-size-auth-panel-max-width raised 32rem -> 36rem (superseded again below). BAF-PR-007B: Walter's live Desktop Dark Mode screenshot proved BAF-PR-007A's own result still insufficient - the root cause was architectural, not this token's value: the two Authentication columns were each "flex: 1" of the RAW, unbounded viewport, so at a wide desktop this token's own 36rem card sat inside a much larger, unconstrained column with huge unused space around it. AuthenticationLayout.razor.css now contains the whole foreground composition to --baf-size-auth-composition-max-width (90rem/1440px) and proportions the task column at 46% of that frame with --baf-space-9/1.25rem side padding - at the frame's own max width, that column's own useful interior is (90rem * 0.46) - (2 x 1.25rem) = 38.9rem/~622px. --baf-size-auth-panel-max-width raised 36rem -> 39rem/624px (the column becomes the practical binding constraint, rendering at ~622px - within this task's own ~600-660px outer-width target). With the card's own internal padding also reduced --baf-space-14 -> --baf-space-13/3rem per side (AuthenticationCard.razor.css), the new USEFUL interior width is ~38.9rem - (2 x 3rem) = ~32.9rem/~526px - within this task's own ~500-550px target. --baf-size-auth-brand-max-width raised 38rem -> 42rem for the same reason: the brand column's own 54% share of the 90rem frame, minus its matching --baf-space-9 side padding, comfortably exceeds 42rem, so the brand content itself (not the column) is now the binding constraint - full, deliberate width, not clipped. BAF-PR-007C: Walter's own live Desktop screenshot proved BAF-PR-007B's own ~622px card still read too narrow, and identified a full-height border-right on .baf-auth-shell-brand (removed in AuthenticationLayout.razor.css) as an unrelated second defect. For the width itself: raising --baf-size-auth-panel-max-width alone would have changed nothing, since the task column's own available width (~622px) was already the binding constraint, not this token. --baf-size-auth-composition-max-width raised 90rem -> 96rem and the task/brand split adjusted 46/54 -> 49/51 (AuthenticationLayout.razor.css) - together these give the task column ~712.64px of available width (96rem x 0.49, minus its own unchanged --baf-space-9/1.25rem side padding), landing this task's own ~700-740px outer-width target without proportionally growing any padding. --baf-size-auth-panel-max-width raised 39rem -> 45rem (this task's own "Recommended target") to document that ceiling; the column itself remains the practical binding constraint at ~712-713px, still within the target range. Useful interior width (card's own --baf-space-13/3rem padding per side, unchanged) is now ~617px - well past the 500-550px range BAF-PR-007B once targeted, a direct, substantial improvement Walter's own screenshot called for. */ --baf-size-auth-composition-max-width: 96rem; /* the contained foreground composition frame (Desktop) */ --baf-size-auth-panel-max-width: 45rem; /* the glass authentication card */ --baf-size-auth-brand-max-width: 42rem; /* the brand/Living Brand content column */ /* Legacy Blazor reconnect dialog (framework default UI, rarely touched). */ --baf-size-reconnect-modal: 20rem; --baf-size-reconnect-spinner: 80px; } /* ========================================================================= FORM CONTROL GEOMETRY (BAF-PR-005A) A dedicated token family, CPR-copied from the approved v0 gallery's own .baf-input/.baf-select__trigger/.baf-btn (46px fields, 42px buttons, 12px-radius "medium, not pill" corners) - deliberately NOT a change to the pre-existing --baf-size-control-sm (2.25rem/36px, shared by avatars, icon buttons, and nav-link row height per its own doc comment) or --baf-radius-sm (shared by the sidebar toggler/nav-link). Changing those shared, unrelated- purpose tokens to fit form controls would have silently resized every one of their other, already-shipped consumers - exactly the risk this task's own instruction ("inspect consumers before changing generic tokens... create a dedicated --baf-control-* family instead") warns against. ========================================================================= */ :root { --baf-control-height: 2.875rem; /* 46px - TextField/TextArea/SelectField */ --baf-control-height-button: 2.625rem; /* 42px - Button; v0 itself uses a deliberately shorter button than field */ /* BAF-PR-005B: corrected to v0's own exact --radius-md (12px) - the previous 10px "compromise" value undershot the measured source; the compromise reasoning no longer applies now that every consumer already uses this dedicated family, not a shared one. */ --baf-control-radius: 12px; --baf-control-padding-x: 0.9rem; /* ~14px, matching v0's own field/select horizontal padding */ } /* BAF-PR-005B (Sections 2/3): a translucent, restrained-border surface for form controls, CPR-measured from the approved gallery's own --field-bg/--field-border/--field-icon (v0's controls are NOT opaque flat rectangles - their surface subtly participates in the neural environment behind them). Deliberately its OWN dedicated tokens, not a reuse of --baf-bg/ --baf-border (which stay fully opaque - every other, non-control consumer of those tokens must not change). Enough opacity for text legibility, enough transparency for depth - never the "cloudy glass"/heavy blur the Surface/Dialog containment family already explicitly rejects. */ :root, [data-theme="light"] { --baf-control-surface: rgba(255, 255, 255, 0.85); --baf-control-surface-hover: rgba(255, 255, 255, 0.95); --baf-control-border: rgba(60, 105, 205, 0.26); --baf-control-border-hover: rgba(60, 105, 205, 0.42); --baf-control-icon: #4c5c86; --baf-control-placeholder: #8b96b5; } [data-theme="dark"] { --baf-control-surface: rgba(9, 15, 33, 0.62); --baf-control-surface-hover: rgba(14, 22, 44, 0.72); --baf-control-border: rgba(130, 165, 240, 0.18); --baf-control-border-hover: rgba(130, 165, 240, 0.32); --baf-control-icon: #7f8cb0; --baf-control-placeholder: #5f6b8c; } /* ========================================================================= BORDERS & RADIUS ========================================================================= */ :root { --baf-border-width: 1px; /* standard hairline border, used throughout */ --baf-border-width-thick: 3px; /* reconnect spinner ring stroke */ --baf-radius-xs: 4px; /* small controls (reconnect retry/resume buttons) */ --baf-radius-sm: 6px; /* toggler, nav-link */ --baf-radius-md: 0.5rem; /* reconnect dialog corners */ --baf-radius-lg: 14px; /* landing cards */ --baf-radius-xl: 20px; /* composer card */ --baf-radius-full: 50%; /* circular elements (avatar, dot, icon buttons, spinner rings) */ } /* ========================================================================= SHADOWS ========================================================================= */ :root { --baf-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06); --baf-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.04); --baf-shadow-elevated: var(--baf-shadow-xs), var(--baf-shadow-sm); /* composer card lift */ --baf-shadow-banner: 0 -1px 2px rgba(0, 0, 0, 0.2); /* bottom error banner */ --baf-shadow-modal: 0 3px 6px 2px rgba(0, 0, 0, 0.3); /* reconnect dialog */ /* Focus ring, expressed as a two-layer outline (inner white gap + colored ring). */ --baf-focus-ring-offset: 0.1rem; } /* ========================================================================= Z-INDEX A shared stacking scale so overlapping UI (banners, overlays, dialogs, tooltips) never has to guess at a number. Only "toast" is consumed today (the built-in error banner); the rest are reserved for when the app grows more layered surfaces. ========================================================================= */ :root { --baf-z-index-base: 0; --baf-z-index-dropdown: 100; --baf-z-index-sticky: 200; --baf-z-index-overlay: 400; --baf-z-index-modal: 800; --baf-z-index-toast: 1000; --baf-z-index-tooltip: 1100; } /* ========================================================================= ANIMATION TIMING ========================================================================= */ :root { --baf-duration-fast: 150ms; --baf-duration-normal: 300ms; --baf-duration-slow: 500ms; --baf-duration-slower: 1500ms; /* BAF-PR-004: the Heart's single restrained pulse (docs/110 §5) - deliberately its own, slower-than-anything-else token rather than a reuse of --baf-duration-slower, since docs/110 §5's own test ("if a user could point to the exact moment it pulsed, the pulse is too strong") requires a cycle long enough to be sensed over time, never watched for. */ --baf-duration-heartbeat: 4000ms; /* BAF-PR-006's own --baf-duration-breath/--baf-duration-neural-impulse tokens (a CSS- @keyframes-driven approximation of Lungs/Brain) were removed here in BAF-PR-006A - that whole CSS animation approach was superseded by a native Canvas 2D engine (wwwroot/js/baf-neural-engine.js), which ports the approved gallery's own actual timing constants directly rather than reading a CSS duration token; nothing references these two tokens anymore, so they were removed rather than left as dead weight. Heart's own --baf-duration-heartbeat above is unaffected - Heart was explicitly preserved this task. */ --baf-ease-standard: cubic-bezier(0.05, 0.89, 0.25, 1.02); --baf-ease-emphasized: cubic-bezier(0, 0.2, 0.8, 1); --baf-ease-in-out: ease-in-out; } /* ========================================================================= BREAKPOINTS Plain CSS cannot read custom properties inside an `@media` condition, so every @media rule in component files must keep repeating this literal number. This token is the documented single source of truth for that number (and for any future tooling - JS, tests, a preprocessor - that can read it), so component authors know changing the breakpoint means updating both this token and every @media rule below it. ========================================================================= */ :root { --baf-breakpoint-sm: 641px; /* app shell switches from stacked to sidebar + content */ --baf-breakpoint-md: 1024px; /* BAF-UX-002: Authentication Shell switches from single-column to its two-panel split (docs/107 Part VI reserves the split for Desktop only - Tablet and Mobile both stay single-column, so this boundary is deliberately wider than --baf-breakpoint-sm) */ }