/* * RACHI — Design Tokens (Canonical) * v2.0 · Dark-first · Both themes * Drop into: packages/ui/tokens.css * * Usage: * → dark theme (default / preferred) * → light theme * No attribute → follows OS preference * * NEVER hardcode hex values in components. Always: var(--fichi-*) */ /* ═══════════════════════════════════════════════════ 1. RAW PALETTE (reference — use aliases below) ═══════════════════════════════════════════════════ */ :root { /* Brand Red — warm, NOT stop-sign */ --_brand-50: #FDF2F1; --_brand-100: #F9DAD7; --_brand-200: #F2B0A9; --_brand-300: #E78379; --_brand-400: #D85A4E; --_brand-500: #C8262D; --_brand-600: #A91C24; --_brand-700: #8B1A1F; --_brand-800: #6B1418; --_brand-900: #4A0E11; /* Warm Neutrals — NOT cold blue-gray */ --_n-0: #FFFFFF; --_n-50: #FAF8F5; --_n-100: #F2EFE9; --_n-200: #E5E1D8; --_n-300: #C9C4B8; --_n-400: #9C9789; --_n-500: #6E6A5F; --_n-600: #4D4A42; --_n-700: #2E2C27; --_n-800: #1A1916; --_n-900: #0D0D0B; /* Warm Darks */ --_dk-base: #0C0B09; --_dk-page: #111009; --_dk-surface: #1A1916; --_dk-elevat: #221F1C; --_dk-overlay: #2A2724; --_dk-hero: #2A1214; /* Semantic */ --_success: #16A34A; --_warning: #D97706; --_danger: #E11D48; --_info: #2563EB; /* The same hues at text weight. The fill values cannot carry copy on a light ground: --_success measures 3.30:1 on white, and --_danger clears white at 4.71:1 but only 4.43:1 on --fichi-bg-page's cream — which is the ground it is actually read on. */ --_success-text: #15803D; --_danger-text: #C81E43; } /* ═══════════════════════════════════════════════════ 2. DARK THEME (default) ═══════════════════════════════════════════════════ */ :root, [data-theme="dark"] { /* Brand */ --fichi-brand-50: var(--_brand-50); --fichi-brand-100: var(--_brand-100); --fichi-brand-200: var(--_brand-200); --fichi-brand-300: var(--_brand-300); --fichi-brand-400: var(--_brand-400); --fichi-brand-500: var(--_brand-500); --fichi-brand-600: var(--_brand-600); --fichi-brand-700: var(--_brand-700); --fichi-brand-800: var(--_brand-800); --fichi-brand-900: var(--_brand-900); /* Backgrounds */ --fichi-bg-base: var(--_dk-base); --fichi-bg-page: var(--_dk-page); --fichi-bg-surface: var(--_dk-surface); --fichi-bg-elevated: var(--_dk-elevat); --fichi-bg-overlay: var(--_dk-overlay); --fichi-bg-input: #1E1C19; --fichi-bg-hero: var(--_dk-hero); --fichi-bg-muted: rgba(255,255,255,0.04); /* Text */ --fichi-text-primary: #FAF8F5; --fichi-text-secondary: #C9C4B8; /* Was #6E6A5F, which measured 3.04:1 on --fichi-bg-elevated — below the 4.5:1 WCAG AA needs for normal text, and this token carries INFORMATION (SKUs, per-branch stock, timestamps, table labels), not decoration. #8B8678 cleared the three flat surfaces (4.51 / 4.84 / 5.24) but not the one this token actually lands on most: a --fichi-bg-muted chip (white at 4%) stacked on an elevated card, where it fell back to 4.03 — that is the status tag on every sales row. #969081 clears all six combinations, worst case 4.61 on chip-over-elevated, and still sits far below secondary's 9.43 so the hierarchy the three text tokens encode survives intact. Light theme is untouched: #6E6A5F measures 5.09-5.40 there. */ --fichi-text-muted: #969081; --fichi-text-disabled: #3D3B37; --fichi-text-inverse: var(--_dk-base); --fichi-text-brand: var(--_brand-300); --fichi-text-positive: #4ADE80; --fichi-text-negative: #F87171; /* Borders */ --fichi-border-subtle: rgba(255,255,255,0.05); --fichi-border-default: rgba(255,255,255,0.08); --fichi-border-strong: rgba(255,255,255,0.14); --fichi-border-brand: rgba(200,38,45,0.40); --fichi-border-input: rgba(255,255,255,0.09); /* Brand-tinted fills (selected chips, active nav, stat icons) */ --fichi-brand-bg: rgba(200,38,45,0.12); /* Semantic */ --fichi-success-bg: rgba(74,222,128,0.10); --fichi-success-text: #4ADE80; --fichi-success-500: var(--_success); --fichi-warning-bg: rgba(252,211,77,0.10); --fichi-warning-text: #FCD34D; --fichi-warning-500: var(--_warning); --fichi-danger-bg: rgba(248,113,113,0.10); --fichi-danger-text: #F87171; --fichi-danger-500: var(--_danger); --fichi-info-bg: rgba(147,197,253,0.10); --fichi-info-text: #93C5FD; --fichi-info-500: var(--_info); /* Actions */ --fichi-action-primary: var(--_brand-500); /* Hover DARKENS. It used to lighten to brand-400, which drops white text to 3.82:1 — below AA, at the exact moment the pointer is on the button and someone is reading it to decide. The ramp is now monotone: 5.57 → 7.30 → 9.27 against white, which is also the conventional affordance for a solid button. (#D85A4E was already retired from Avatar for the same 3.82:1.) */ --fichi-action-primary-hover: var(--_brand-600); --fichi-action-primary-active: var(--_brand-700); --fichi-action-primary-text: #FFFFFF; /* Shadows */ --fichi-shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --fichi-shadow-md: 0 4px 12px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.30); --fichi-shadow-lg: 0 12px 32px rgba(0,0,0,0.60), 0 4px 8px rgba(0,0,0,0.40); --fichi-shadow-brand: 0 6px 24px rgba(200,38,45,0.35); /* The keyboard focus ring. WCAG 2.2 asks a focus indicator for 3:1 against what surrounds it; the old rgba(200,38,45,.28) composited to 1.25:1 on this theme's page — a ring nobody navigating by keyboard could find. The DARK brand red cannot pass here at any alpha (solid #C8262D peaks at 2.94 on --fichi-bg-elevated), so the ring switches to the LIGHT brand tint at .75: 4.08-4.49 across every surface it lands on. */ --fichi-shadow-focus: 0 0 0 3px rgba(231,131,121,0.75); /* Solid companion for the global `:focus-visible` outline. Same reason the shadow above switched tints: --fichi-brand-500 (#C8262D) measures 2.94:1 on --fichi-bg-elevated, so an outline drawn in it disappears on exactly the cards a keyboard user tabs through. This clears 6.18-7.19. */ --fichi-focus-ring: #E78379; --fichi-shadow-glow: 0 0 32px rgba(200,38,45,0.22); /* Glass */ --fichi-glass-bg: rgba(26,25,22,0.72); --fichi-glass-border: rgba(255,255,255,0.06); --fichi-glass-blur: blur(16px); /* Chart */ --fichi-chart-bar-dim: var(--_dk-elevat); /* A de-emphasized DATA mark (the "context" series): must stay ≥3:1 on the card in BOTH themes, which chart-bar-dim — a surface-level dim for bars inside a plot — deliberately is not. */ --fichi-chart-fill-muted: #8A8580; --fichi-chart-bar-active: var(--_brand-500); /* Resting bars match the line stroke (solid brand red, 3.15:1 on dark); the hovered bar pops brighter via --fichi-chart-bar-hot. */ --fichi-chart-bar-rest: var(--_brand-500); --fichi-chart-bar-hot: var(--_brand-300); --fichi-chart-bar-glow: 0 -4px 16px rgba(200,38,45,0.30); /* Points at the text token instead of repeating --_n-500: the axis labels are 10px, so they need the full 4.5:1, and the raw ramp value measured 3.26:1 on a card. Aliasing means the next contrast fix to the text token reaches the charts too, instead of leaving them a theme behind. */ --fichi-chart-label: var(--fichi-text-muted); --fichi-chart-label-act: var(--_brand-300); --fichi-chart-area: rgba(200,38,45,0.22); --fichi-chart-grid: rgba(255,255,255,0.06); --fichi-chart-guide: rgba(255,255,255,0.16); /* Donut segment fills — n-400 gives enough contrast on dark surfaces */ --fichi-chart-segment-neutral: var(--_n-400); --fichi-chart-segment-warning: #FCD34D; --fichi-chart-segment-danger: #F87171; } /* ═══════════════════════════════════════════════════ 3. LIGHT THEME ═══════════════════════════════════════════════════ */ [data-theme="light"] { /* Brand (unchanged) */ --fichi-brand-50: var(--_brand-50); --fichi-brand-100: var(--_brand-100); --fichi-brand-200: var(--_brand-200); --fichi-brand-300: var(--_brand-300); --fichi-brand-400: var(--_brand-400); --fichi-brand-500: var(--_brand-500); --fichi-brand-600: var(--_brand-600); --fichi-brand-700: var(--_brand-700); --fichi-brand-800: var(--_brand-800); --fichi-brand-900: var(--_brand-900); /* Backgrounds */ --fichi-bg-base: var(--_n-50); --fichi-bg-page: var(--_n-50); --fichi-bg-surface: var(--_n-0); --fichi-bg-elevated: var(--_n-0); --fichi-bg-overlay: var(--_n-0); --fichi-bg-input: var(--_n-0); --fichi-bg-hero: var(--_brand-500); --fichi-bg-muted: var(--_n-100); /* Text */ --fichi-text-primary: var(--_n-800); --fichi-text-secondary: var(--_n-600); --fichi-text-muted: var(--_n-500); --fichi-text-disabled: var(--_n-300); --fichi-text-inverse: var(--_n-0); --fichi-text-brand: var(--_brand-700); /* NOT --_success: that is the FILL green (#16A34A), which measures 3.30:1 on white. Money at rest — every settled "$0.00" in the debtors list — is text, and text needs the darker pair. Dark keeps its own values, which pass. */ --fichi-text-positive: var(--_success-text); --fichi-text-negative: var(--_danger-text); /* Borders */ --fichi-border-subtle: var(--_n-200); --fichi-border-default: var(--_n-300); --fichi-border-strong: var(--_n-400); --fichi-border-brand: rgba(200,38,45,0.40); --fichi-border-input: var(--_n-300); /* Brand-tinted fills (selected chips, active nav, stat icons) */ --fichi-brand-bg: rgba(200,38,45,0.12); /* Semantic */ --fichi-success-bg: #EDFAF1; --fichi-success-text: #15803D; --fichi-success-500: var(--_success); --fichi-warning-bg: #FFFBEB; --fichi-warning-text: #92400E; --fichi-warning-500: var(--_warning); --fichi-danger-bg: #FEF2F2; --fichi-danger-text: #9F1239; --fichi-danger-500: var(--_danger); --fichi-info-bg: #EFF6FF; --fichi-info-text: #1D4ED8; --fichi-info-500: var(--_info); /* Actions */ --fichi-action-primary: var(--_brand-500); /* Hover DARKENS. It used to lighten to brand-400, which drops white text to 3.82:1 — below AA, at the exact moment the pointer is on the button and someone is reading it to decide. The ramp is now monotone: 5.57 → 7.30 → 9.27 against white, which is also the conventional affordance for a solid button. (#D85A4E was already retired from Avatar for the same 3.82:1.) */ --fichi-action-primary-hover: var(--_brand-600); --fichi-action-primary-active: var(--_brand-700); --fichi-action-primary-text: #FFFFFF; /* Shadows */ --fichi-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --fichi-shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --fichi-shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05); --fichi-shadow-brand: 0 4px 16px rgba(200,38,45,0.25); --fichi-shadow-focus: 0 0 0 3px rgba(200,38,45,0.85); /* 1.43:1 -> 4.28-4.48; see the dark note */ --fichi-focus-ring: #C8262D; /* 5.57:1 on white — passes as-is */ --fichi-shadow-glow: 0 4px 20px rgba(200,38,45,0.15); /* Glass */ --fichi-glass-bg: rgba(255,255,255,0.80); --fichi-glass-border: rgba(0,0,0,0.06); --fichi-glass-blur: blur(16px); /* Chart */ --fichi-chart-bar-dim: var(--_n-200); --fichi-chart-fill-muted: #8A8580; --fichi-chart-bar-active: var(--_brand-500); /* Resting bars match the line stroke (solid brand red, 5.6:1 on white). */ --fichi-chart-bar-rest: var(--_brand-500); --fichi-chart-bar-hot: var(--_brand-500); --fichi-chart-bar-glow: 0 -4px 12px rgba(200,38,45,0.20); --fichi-chart-label: var(--_n-500); --fichi-chart-label-act: var(--_brand-700); --fichi-chart-area: rgba(200,38,45,0.12); --fichi-chart-grid: rgba(0,0,0,0.05); --fichi-chart-guide: rgba(0,0,0,0.14); /* Donut segment fills — _warning/_danger give vibrant fills on light surfaces */ --fichi-chart-segment-neutral: var(--_n-500); --fichi-chart-segment-warning: var(--_warning); --fichi-chart-segment-danger: var(--_danger); } /* ═══════════════════════════════════════════════════ 4. OS PREFERENCE FALLBACK ═══════════════════════════════════════════════════ */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --fichi-bg-base: #FAF8F5; --fichi-bg-page: #FAF8F5; --fichi-bg-surface: #FFFFFF; --fichi-bg-elevated: #FFFFFF; --fichi-bg-input: #FFFFFF; --fichi-bg-muted: #F2EFE9; --fichi-text-primary: #1A1916; --fichi-text-secondary: #4D4A42; --fichi-text-muted: #6E6A5F; --fichi-text-brand: #8B1A1F; --fichi-text-positive: #15803D; --fichi-text-negative: #C81E43; --fichi-border-subtle: #E5E1D8; --fichi-border-default: #C9C4B8; --fichi-border-input: #C9C4B8; --fichi-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --fichi-shadow-md: 0 4px 6px rgba(0,0,0,0.06); --fichi-shadow-brand: 0 4px 16px rgba(200,38,45,0.25); --fichi-shadow-focus: 0 0 0 3px rgba(200,38,45,0.85); /* 1.43:1 -> 4.28-4.48; see the dark note */ --fichi-focus-ring: #C8262D; /* 5.57:1 on white — passes as-is */ --fichi-success-bg: #EDFAF1; --fichi-success-text: #15803D; --fichi-warning-bg: #FFFBEB; --fichi-warning-text: #92400E; --fichi-danger-bg: #FEF2F2; --fichi-danger-text: #9F1239; --fichi-info-bg: #EFF6FF; --fichi-info-text: #1D4ED8; --fichi-glass-bg: rgba(255,255,255,0.80); --fichi-glass-border: rgba(0,0,0,0.06); --fichi-chart-bar-dim: #E5E1D8; --fichi-chart-label: #6E6A5F; --fichi-chart-label-act: #8B1A1F; --fichi-chart-area: rgba(200,38,45,0.12); --fichi-chart-grid: rgba(0,0,0,0.05); --fichi-chart-guide: rgba(0,0,0,0.14); --fichi-chart-bar-rest: #C8262D; --fichi-chart-bar-hot: #C8262D; --fichi-chart-segment-neutral: #6E6A5F; --fichi-chart-segment-warning: #D97706; --fichi-chart-segment-danger: #E11D48; } } /* ═══════════════════════════════════════════════════ 5. TYPOGRAPHY & SPACING (theme-independent) ═══════════════════════════════════════════════════ */ :root { --fichi-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif; --fichi-font-body: "Inter", system-ui, -apple-system, sans-serif; --fichi-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --fichi-text-xs: .75rem; --fichi-text-sm: .875rem; --fichi-text-base: 1rem; --fichi-text-lg: 1.125rem; --fichi-text-xl: 1.25rem; --fichi-text-2xl: 1.5rem; --fichi-text-3xl: 1.875rem; --fichi-text-4xl: 2.25rem; --fichi-text-5xl: 3rem; --fichi-weight-regular: 400; --fichi-weight-medium: 500; --fichi-weight-semibold: 600; --fichi-weight-bold: 700; /* Spacing — canonical 4pt scale (--fichi-space-N = N × 4px) for padding/margin/ gap. Prefer a step over ad-hoc px; see docs/frontend/styling.md. */ --fichi-space-1: .25rem; --fichi-space-2: .5rem; --fichi-space-3: .75rem; --fichi-space-4: 1rem; --fichi-space-5: 1.25rem; --fichi-space-6: 1.5rem; --fichi-space-8: 2rem; --fichi-space-10: 2.5rem; --fichi-space-12: 3rem; --fichi-space-16: 4rem; --fichi-space-20: 5rem; --fichi-radius-sm: .375rem; --fichi-radius-md: .75rem; --fichi-radius-lg: 1rem; --fichi-radius-xl: 1.25rem; --fichi-radius-2xl: 1.5rem; --fichi-radius-full: 9999px; /* Chart glows (brand-tinted, theme-independent) */ --fichi-chart-line-shadow: drop-shadow(0 2px 6px rgba(200,38,45,0.35)); --fichi-chart-point-shadow: drop-shadow(0 0 6px rgba(200,38,45,0.60)); /* Layout */ --fichi-sidebar-w: 240px; --fichi-header-h: 64px; --fichi-content-max: 1200px; } /* ═══════════════════════════════════════════════════ 6. UTILITY CLASSES ═══════════════════════════════════════════════════ */ .fichi-hero-gradient { background: linear-gradient(135deg, var(--fichi-bg-hero) 0%, var(--fichi-bg-page) 100%); position: relative; overflow: hidden; } .fichi-hero-gradient::before { content: ''; position: absolute; top: -40%; right: -20%; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgba(200,38,45,0.18) 0%, transparent 70%); pointer-events: none; } .fichi-glass { background: var(--fichi-glass-bg); backdrop-filter: var(--fichi-glass-blur); -webkit-backdrop-filter: var(--fichi-glass-blur); border: 1px solid var(--fichi-glass-border); } /* ═══════════════════════════════════════════════════ 7. BRANCH CONTEXT UTILITIES (BR-008) ═══════════════════════════════════════════════════ */ :root { --fichi-branch-ctx-bg: rgba(255,255,255,0.05); --fichi-branch-ctx-border: rgba(255,255,255,0.10); --fichi-branch-ctx-text: var(--fichi-text-muted); --fichi-branch-ctx-dot: var(--fichi-text-muted); --fichi-branch-active-bg: rgba(200,38,45,0.10); --fichi-branch-active-border: rgba(200,38,45,0.25); --fichi-branch-active-text: var(--fichi-brand-300); --fichi-branch-active-dot: var(--fichi-brand-500); } [data-theme="light"] { --fichi-branch-ctx-bg: var(--_n-100); --fichi-branch-ctx-border: var(--_n-300); --fichi-branch-ctx-text: var(--_n-600); --fichi-branch-ctx-dot: var(--_n-500); --fichi-branch-active-bg: var(--_brand-50); --fichi-branch-active-border: var(--_brand-200); --fichi-branch-active-text: var(--_brand-700); --fichi-branch-active-dot: var(--_brand-500); } [data-branch-context="global"] .fichi-ctx-tag { background: var(--fichi-branch-ctx-bg); border: 1px solid var(--fichi-branch-ctx-border); color: var(--fichi-branch-ctx-text); } [data-branch-context="global"] .fichi-ctx-tag::before { content: "Global · Todas las sucursales"; } [data-branch-context="global"] .fichi-ctx-dot { background: var(--fichi-branch-ctx-dot); box-shadow: none; } [data-branch-context]:not([data-branch-context="global"]) .fichi-ctx-tag { background: var(--fichi-branch-active-bg); border: 1px solid var(--fichi-branch-active-border); color: var(--fichi-branch-active-text); } [data-branch-context]:not([data-branch-context="global"]) .fichi-ctx-dot { background: var(--fichi-branch-active-dot); box-shadow: 0 0 8px rgba(200,38,45,0.30); } .fichi-ctx-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--fichi-radius-full); font-family: var(--fichi-font-body); font-size: var(--fichi-text-xs); font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; transition: background 200ms, color 200ms, border-color 200ms; } .fichi-ctx-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--fichi-radius-full); flex-shrink: 0; transition: background 200ms, box-shadow 200ms; } .fichi-branch-banner { display: flex; align-items: center; gap: 10px; padding: 10px 24px; font-size: var(--fichi-text-sm); font-weight: 500; border-bottom: 1px solid var(--fichi-border-subtle); position: sticky; top: 64px; z-index: 100; transition: background 300ms, color 300ms; } [data-branch-context="global"] .fichi-branch-banner { background: var(--fichi-branch-ctx-bg); color: var(--fichi-branch-ctx-text); display: none; } [data-branch-context]:not([data-branch-context="global"]) .fichi-branch-banner { background: var(--fichi-branch-active-bg); color: var(--fichi-branch-active-text); display: flex; } * { box-sizing: border-box; } /* A same-origin navigation cross-fades instead of blanking the page. The colour swatches on a product page are LINKS by design — each colour is a product with its own URL, so a customer can send "the black one" to somebody — which means switching colour is a real navigation, and without this it reads as a reload. Both documents have to opt in, and every page of the storefront carries this stylesheet, so they all do. */ @view-transition { navigation: auto; } :root { --store-accent: var(--fichi-brand-500); --store-accent-strong: var(--fichi-brand-600); /* Text ON a page surface. --store-accent-strong is a FILL stop (the darker end of an accent gradient); the two want opposite things under the dark theme, which is how every storefront price ended up at 2.42:1. */ --store-accent-text: var(--fichi-brand-600); --store-accent-contrast: #ffffff; /* ── Layout, shared so sections cannot drift apart ────────────────────── * * Sections are authored independently and reordered freely, so the page * only reads as one design if they agree on two numbers: the column they * sit in and the air between them. Retyping those per section is what let * them drift — measured on a page with all sixteen enabled, the content * column was 960px in eleven sections but 760 in faq and 640 in contact, * so the left edge jumped 160 → 260 → 320 as you scrolled; and the * section-to-section gap had six different values (20/28/32/36/40/48) for * one relationship. * * A full-bleed band (testimonials) deliberately spans the viewport and * re-applies --store-content to its INNER wrapper — the band is the * exception, the column is not. */ --store-content: 960px; --store-inset: 32px; /* Between sections. --store-gap-inner is the smaller step INSIDE one section (its heading to its body), so the two relationships stay visibly different — that hierarchy is what tells a reader where one section ends and the next begins. */ --store-gap: 40px; --store-gap-inner: 14px; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fichi-bg-page); color: var(--fichi-text-primary); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } /* Touch screens: iOS Safari zooms the whole page when a field under 16px takes focus, and leaves the visitor zoomed in after. Measured on this storefront, every field did it — the navbar search (13px), the catalogue filters (13.5–14px), the encargo form (15px), the cart's fields (14px). One rule over all of them, above each section's own size; a pointer screen keeps the sizes the design chose. */ @media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em) !important; } } .fichi-footer { margin-top: auto; padding: 28px 24px 32px; text-align: center; font-size: 12px; color: var(--fichi-text-muted); } .fichi-footer strong { color: var(--fichi-text-secondary); } /* Its own line: on a phone the two would wrap into one run of grey text. */ .fichi-footer a { display: block; margin-bottom: 6px; color: var(--fichi-text-secondary); } /* ── Interaction, once, for every section ──────────────────────────────── * * Measured across the sixteen sections before this existed: three had a * hover state, and NONE had a focus style. A storefront where the cards do * not answer the pointer reads as a picture of a shop rather than a shop — * and with no focus ring, a visitor navigating by keyboard cannot see where * they are at all. Both belong here rather than in each section: they are * the same promise everywhere, and fifteen copies is how they drifted. */ /* One ring, on real keyboard focus only (:focus-visible keeps it off mouse clicks). Uses the store's own accent so it reads as part of the design. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, /* textarea was missing from this list, so the two the storefront has — the encargo form's «Detalles» and the cart's address — fell back to the browser's own blue ring, the one thing on the page that never follows the shop's colours. */ textarea:focus-visible, summary:focus-visible { /* The accent while it can be SEEN on the page (FIC-194 section 2): an owner who picks white, cream or a pale pastel would otherwise get a ring that disappears into the surface, and a keyboard visitor would have no idea where they are. --store-ring is decided at render time, per theme, because CSS cannot compare two colours; it IS the accent whenever the accent clears 3:1 there. */ outline: 2px solid var(--store-ring, var(--store-accent)); outline-offset: 2px; border-radius: var(--fichi-radius-sm); } /* Cards lift under the pointer — but ONLY the ones that actually go somewhere. 'a.card' / 'a.post-card' are links; '.cat' is a link only when the owner gave the tile an href (it renders as a plain div otherwise), and lifting a div would promise a click that does nothing. The shadow does the lifting, not a layout change, so neighbouring cards never shift. */ a.card, a.cat, a.post-card { transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease; } a.card:hover, a.cat:hover, a.post-card:hover { transform: translateY(-2px); box-shadow: var(--fichi-shadow-lg); /* The shadow carries the lift on a light page, but --fichi-shadow-lg is black at 60% — over a dark surface it lands on a dark ground and reads as almost nothing. The border tint is what makes the same hover legible in both themes, so it is not a dark-mode-only rule. */ border-color: color-mix(in srgb, var(--store-accent) 55%, transparent); } /* Motion is decoration here — every hover above still works without it, so a visitor who asked their system for less motion simply gets the colour and shadow, instantly. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } a.card:hover, a.cat:hover, a.post-card:hover { transform: none; } /* The universal selector above cannot reach these: the view transition's pseudo-elements hang off the root in a tree of their own, so a page that silenced every other animation would still cross-fade. With no animation the new snapshot simply paints over the old one — the navigation still happens, instantly. */ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } :root{--store-accent:#7C3AED;--store-accent-strong:#6D28D9;--store-accent-text:#6D28D9;--store-accent-contrast:#ffffff;--store-ring:#7C3AED}.shop-footer, .fichi-footer{--store-ring:#7C3AED}[data-theme="dark"]{--store-accent-text:#C4B5FD;--store-ring:#7C3AED}[data-theme="dark"] .shop-footer,[data-theme="dark"] .fichi-footer{--store-ring:#ffffff}[data-theme="dark"]{--store-accent:#DB2777;--store-accent-strong:#BE185D;--store-accent-text:#F9A8D4;--store-accent-contrast:#ffffff;--store-ring:#DB2777} .theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 50; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--fichi-radius-full); background: var(--fichi-bg-surface); color: var(--fichi-text-secondary); border: 1px solid var(--fichi-border-subtle); box-shadow: var(--fichi-shadow-md); cursor: pointer; padding: 0; } .theme-toggle:hover { color: var(--fichi-text-primary); } .theme-toggle .tt-sun { display: none; } [data-theme="dark"] .theme-toggle .tt-sun { display: block; } [data-theme="dark"] .theme-toggle .tt-moon { display: none; }