/*
 * RACHI — Design Tokens (Canonical)
 * v3.0 · «Ábaco + Brasa» · Dark-first · Both themes
 * Drop into: packages/ui/tokens.css
 *
 * Usage:
 *   <html data-theme="dark">  → Brasa, the dark theme (default / preferred)
 *   <html data-theme="light"> → Ábaco, the light theme
 *   No attribute              → follows OS preference
 *
 * Every --rachi-* name from v2 is kept; v3 changes values and adds the
 * «NUEVO» tokens (ember, progress gradient, abacus bead, Archivo widths,
 * icon sizes, the black weight).
 *
 * NEVER hardcode hex values in components. Always: var(--rachi-*)
 */

/* ═══════════════════════════════════════════════════
   1. RAW PALETTE (reference — use aliases below)
   ═══════════════════════════════════════════════════ */
:root {
  /* Brand Red — unchanged from v2 */
  --_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;
  /* Rojo vivo: strokes and beads on dark, never a fill under white text (3.9:1) */
  --_brand-live: #E5484D;
  /* Brasa (ember). 800 is the light theme's ember TEXT: the draft's #A84A0A
     read 4.8:1 on the muted ground; the final review (R.16) darkened it to
     #8F3E08 so it holds AA on every light surface with room to spare. */
  --_ember-300: #FFB38A; --_ember-500: #FF8A3D; --_ember-600: #E8701F; --_ember-800: #8F3E08;
  /* Warm neutrals: hueso */
  --_h-0: #FFFFFF; --_h-50: #F6F1E9; --_h-100: #F1EBE2; --_h-200: #EFE9DF;
  --_h-300: #C8BEB2; --_h-400: #978C80; --_h-500: #6B6259; --_h-600: #3E3833;
  /* Warm darks: carbón */
  --_c-base: #0A0807; --_c-page: #0D0B0A; --_c-surface: #161311;
  --_c-elevat: #1E1917; --_c-overlay: #27211E; --_c-input: #110E0D; --_c-hero: #3A1A12;
  /* Semantic, one pair per theme: the dark value is text weight on carbón,
     the light value is text weight on hueso. */
  --_success-dark: #6EE7A0; --_success-light: #11673A;
  --_warning-dark: #FFB86B; --_warning-light: #9A4D00;
  --_danger-dark:  #FF8A8A; --_danger-light:  #B81F27;
  /* The fills (solid dots, donut segments, the danger button's border) */
  --_success: #16A34A; --_warning: #D97706; --_danger: #E11D48;
}

/* ═══════════════════════════════════════════════════
   2. DARK THEME — BRASA (default)
   ═══════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
  /* Brand */
  --rachi-brand-50: var(--_brand-50);   --rachi-brand-100: var(--_brand-100);
  --rachi-brand-200: var(--_brand-200); --rachi-brand-300: var(--_brand-300);
  --rachi-brand-400: var(--_brand-400); --rachi-brand-500: var(--_brand-500);
  --rachi-brand-600: var(--_brand-600); --rachi-brand-700: var(--_brand-700);
  --rachi-brand-800: var(--_brand-800); --rachi-brand-900: var(--_brand-900);

  /* Backgrounds */
  --rachi-bg-base:     var(--_c-base);
  --rachi-bg-page:     var(--_c-page);
  --rachi-bg-surface:  var(--_c-surface);
  --rachi-bg-elevated: var(--_c-elevat);
  --rachi-bg-overlay:  var(--_c-overlay);
  --rachi-bg-input:    var(--_c-input);
  --rachi-bg-hero:     var(--_c-hero);
  --rachi-bg-muted:    rgba(255,236,226,0.05);

  /* Text. --rachi-text-muted carries INFORMATION (SKUs, per-branch stock,
     timestamps, table labels), so it must clear 4.5:1 on every surface AND on
     a --rachi-bg-muted chip stacked on them — token-contrast.test.ts measures
     all six. Inside a sheet or a raised row, prefer text-secondary (R.16). */
  --rachi-text-primary:   #F6F0E8;
  --rachi-text-secondary: #C8BEB2;
  --rachi-text-muted:     #978C80;
  --rachi-text-disabled:  #4A433E;
  --rachi-text-inverse:   var(--_c-page);
  --rachi-text-brand:     #FF7A6E;
  --rachi-text-positive:  var(--_success-dark);
  --rachi-text-negative:  var(--_danger-dark);

  /* Borders. --rachi-border-input outlines every control (inputs, selects,
     an OFF switch), so it is a non-text boundary and needs 3:1 against the
     input ground (WCAG 1.4.11) — the draft's .14 measured ~1.4:1 (R.16). */
  --rachi-border-subtle:  rgba(255,214,196,0.07);
  --rachi-border-default: rgba(255,214,196,0.12);
  --rachi-border-strong:  rgba(255,214,196,0.22);
  --rachi-border-brand:   rgba(229,72,77,0.45);
  --rachi-border-input:   rgba(255,214,196,0.40);

  /* Brand-tinted fills (selected chips, active nav, stat icons) */
  --rachi-brand-bg:       rgba(229,72,77,0.16);

  /* Semantic. Info is a warm neutral note now, not a blue alert. */
  --rachi-success-bg: rgba(110,231,160,0.12); --rachi-success-text: var(--_success-dark); --rachi-success-500: var(--_success);
  --rachi-warning-bg: rgba(255,184,107,0.14); --rachi-warning-text: var(--_warning-dark); --rachi-warning-500: var(--_warning);
  --rachi-danger-bg:  rgba(255,138,138,0.14); --rachi-danger-text:  var(--_danger-dark);  --rachi-danger-500:  var(--_danger);
  --rachi-info-bg:    rgba(255,236,226,0.10); --rachi-info-text:    var(--_h-300);        --rachi-info-500:    var(--_h-400);

  /* Actions. Hover DARKENS — the ramp is monotone (5.57 → 7.30 → 9.27 against
     white); lightening to brand-400 once dropped the label to 3.82:1. */
  --rachi-action-primary:        var(--_brand-500);
  --rachi-action-primary-hover:  var(--_brand-600);
  --rachi-action-primary-active: var(--_brand-700);
  --rachi-action-primary-text:   #FFFFFF;

  /* NUEVO — brasa, progress and the abacus bead */
  --rachi-ember:             var(--_ember-500);
  --rachi-ember-text:        var(--_ember-300);
  --rachi-ember-bg:          rgba(255,138,61,0.14);
  --rachi-gradient-progress: linear-gradient(90deg, var(--_brand-500), var(--_ember-500));
  --rachi-bead-filled:       var(--_brand-live);
  --rachi-bead-hollow:       rgba(246,240,232,0.45);

  /* Shadows */
  --rachi-shadow-sm:    0 1px 2px rgba(0,0,0,0.40);
  --rachi-shadow-md:    0 6px 16px rgba(0,0,0,0.45);
  --rachi-shadow-lg:    0 24px 48px rgba(0,0,0,0.55);
  --rachi-shadow-brand: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 28px rgba(200,38,45,0.40);
  /* The keyboard focus ring: brasa, not red. The dark brand red cannot reach
     3:1 on carbón at any alpha; ember-300 at .75 does on every surface. */
  --rachi-shadow-focus: 0 0 0 3px rgba(255,179,138,0.75);
  --rachi-focus-ring:   var(--_ember-300);
  --rachi-shadow-glow:  0 0 40px rgba(255,138,61,0.18);

  /* Glass: the sticky header once the page scrolls under it, the bottom nav,
     the scroll-to-top button, a chart tooltip. It is --rachi-bg-elevated at
     .85, not a 6% tint: at .06 the header and the button vanished into the
     content they float over, and text on them read as text on whatever
     scrolled by. token-contrast.test.ts holds the text on it to AA. */
  --rachi-glass-bg:     rgba(30,25,23,0.85);
  --rachi-glass-border: rgba(255,214,196,0.12);
  --rachi-glass-blur:   blur(16px);
  /* The loading sheen that runs across a Skeleton — a faint highlight, which
     is what glass used to be in this theme before it had to carry chrome. */
  --rachi-sheen:        rgba(255,236,226,0.06);

  /* Chart */
  --rachi-chart-bar-dim:    var(--_c-elevat);
  /* A de-emphasized DATA mark: ≥3:1 on the card in BOTH themes. */
  --rachi-chart-fill-muted: #8A8076;
  --rachi-chart-bar-active: var(--_brand-live);
  --rachi-chart-bar-rest:   var(--_brand-500);
  --rachi-chart-bar-hot:    var(--_ember-500);
  --rachi-chart-bar-glow:   0 -4px 16px rgba(229,72,77,0.35);
  /* Aliased to the text token: the axis labels are 10px and need 4.5:1. */
  --rachi-chart-label:      var(--rachi-text-muted);
  --rachi-chart-label-act:  #FF7A6E;
  --rachi-chart-area:       rgba(200,38,45,0.22);
  --rachi-chart-grid:       rgba(255,214,196,0.07);
  --rachi-chart-guide:      rgba(255,214,196,0.18);
  --rachi-chart-segment-neutral: var(--_h-400);
  --rachi-chart-segment-warning: var(--_warning-dark);
  --rachi-chart-segment-danger:  var(--_danger-dark);
}

/* ═══════════════════════════════════════════════════
   3. LIGHT THEME — ÁBACO
   ═══════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Brand (unchanged) */
  --rachi-brand-50: var(--_brand-50);   --rachi-brand-100: var(--_brand-100);
  --rachi-brand-200: var(--_brand-200); --rachi-brand-300: var(--_brand-300);
  --rachi-brand-400: var(--_brand-400); --rachi-brand-500: var(--_brand-500);
  --rachi-brand-600: var(--_brand-600); --rachi-brand-700: var(--_brand-700);
  --rachi-brand-800: var(--_brand-800); --rachi-brand-900: var(--_brand-900);

  /* Backgrounds */
  --rachi-bg-base:     var(--_h-100);
  --rachi-bg-page:     var(--_h-50);
  --rachi-bg-surface:  var(--_h-0);
  --rachi-bg-elevated: var(--_h-0);
  --rachi-bg-overlay:  var(--_h-0);
  --rachi-bg-input:    var(--_h-0);
  --rachi-bg-hero:     #FFE1D9;
  --rachi-bg-muted:    var(--_h-200);

  /* Text */
  --rachi-text-primary:   var(--_c-page);
  --rachi-text-secondary: var(--_h-600);
  --rachi-text-muted:     var(--_h-500);
  --rachi-text-disabled:  #B5ACA2;
  --rachi-text-inverse:   var(--_h-50);
  --rachi-text-brand:     #B0202A;
  /* Text weight, never the fill green/red: money at rest is READ. */
  --rachi-text-positive:  var(--_success-light);
  --rachi-text-negative:  var(--_danger-light);

  /* Borders — --rachi-border-input at .44 is 3:1 on white (R.16). */
  --rachi-border-subtle:  rgba(13,11,10,0.08);
  --rachi-border-default: rgba(13,11,10,0.14);
  --rachi-border-strong:  rgba(13,11,10,0.30);
  --rachi-border-brand:   rgba(200,38,45,0.40);
  --rachi-border-input:   rgba(13,11,10,0.44);

  /* Brand-tinted fills (selected chips, active nav, stat icons) */
  --rachi-brand-bg:       rgba(200,38,45,0.10);

  /* Semantic */
  --rachi-success-bg: #E3F1E8; --rachi-success-text: var(--_success-light); --rachi-success-500: var(--_success);
  --rachi-warning-bg: #FBEAD2; --rachi-warning-text: var(--_warning-light); --rachi-warning-500: var(--_warning);
  --rachi-danger-bg:  #FBE3E5; --rachi-danger-text:  var(--_danger-light);  --rachi-danger-500:  var(--_danger);
  --rachi-info-bg:    var(--_h-200); --rachi-info-text: var(--_h-600);       --rachi-info-500:    var(--_h-500);

  /* Actions — same monotone ramp as dark */
  --rachi-action-primary:        var(--_brand-500);
  --rachi-action-primary-hover:  var(--_brand-600);
  --rachi-action-primary-active: var(--_brand-700);
  --rachi-action-primary-text:   #FFFFFF;

  /* NUEVO — brasa is decorative in light (ember-600 reads 2.8:1); its text
     is the darkened ember-800. */
  --rachi-ember:             var(--_ember-600);
  --rachi-ember-text:        var(--_ember-800);
  --rachi-ember-bg:          rgba(232,112,31,0.12);
  --rachi-gradient-progress: linear-gradient(90deg, var(--_brand-500), var(--_ember-500));
  --rachi-bead-filled:       var(--_brand-500);
  --rachi-bead-hollow:       rgba(13,11,10,0.40);

  /* Shadows */
  --rachi-shadow-sm:    0 1px 2px rgba(120,40,30,0.06);
  --rachi-shadow-md:    0 6px 16px rgba(120,40,30,0.08);
  --rachi-shadow-lg:    0 20px 40px rgba(120,40,30,0.12);
  --rachi-shadow-brand: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 20px rgba(200,38,45,0.25);
  --rachi-shadow-focus: 0 0 0 3px rgba(200,38,45,0.85);
  --rachi-focus-ring:   var(--_brand-500);  /* 5.57:1 on white */
  --rachi-shadow-glow:  0 0 40px rgba(255,138,61,0.20);

  /* Glass */
  --rachi-glass-bg:     rgba(255,255,255,0.78);
  --rachi-glass-border: rgba(120,40,30,0.12);
  --rachi-glass-blur:   blur(16px);
  --rachi-sheen:        rgba(255,255,255,0.78);

  /* Chart */
  --rachi-chart-bar-dim:    var(--_h-200);
  --rachi-chart-fill-muted: #8A8076;
  --rachi-chart-bar-active: var(--_brand-500);
  --rachi-chart-bar-rest:   var(--_brand-500);
  --rachi-chart-bar-hot:    var(--_ember-600);
  --rachi-chart-bar-glow:   0 -4px 12px rgba(200,38,45,0.20);
  --rachi-chart-label:      var(--_h-500);
  --rachi-chart-label-act:  #B0202A;
  --rachi-chart-area:       rgba(200,38,45,0.12);
  --rachi-chart-grid:       rgba(13,11,10,0.06);
  --rachi-chart-guide:      rgba(13,11,10,0.16);
  --rachi-chart-segment-neutral: var(--_h-500);
  --rachi-chart-segment-warning: var(--_warning);
  --rachi-chart-segment-danger:  var(--_brand-500);
}

/* ═══════════════════════════════════════════════════
   4. OS PREFERENCE FALLBACK — the light values, flattened
   ═══════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --rachi-bg-base: #F1EBE2; --rachi-bg-page: #F6F1E9;
    --rachi-bg-surface: #FFFFFF; --rachi-bg-elevated: #FFFFFF;
    --rachi-bg-input: #FFFFFF; --rachi-bg-muted: #EFE9DF;
    --rachi-text-primary: #0D0B0A; --rachi-text-secondary: #3E3833;
    --rachi-text-muted: #6B6259; --rachi-text-brand: #B0202A;
    --rachi-text-positive: #11673A; --rachi-text-negative: #B81F27;
    --rachi-border-subtle: rgba(13,11,10,0.08); --rachi-border-default: rgba(13,11,10,0.14);
    --rachi-border-input: rgba(13,11,10,0.44);
    --rachi-shadow-sm: 0 1px 2px rgba(120,40,30,0.06);
    --rachi-shadow-md: 0 6px 16px rgba(120,40,30,0.08);
    --rachi-shadow-brand: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 20px rgba(200,38,45,0.25);
    --rachi-shadow-focus: 0 0 0 3px rgba(200,38,45,0.85);
    --rachi-focus-ring:   #C8262D;
    --rachi-success-bg: #E3F1E8; --rachi-success-text: #11673A;
    --rachi-warning-bg: #FBEAD2; --rachi-warning-text: #9A4D00;
    --rachi-danger-bg: #FBE3E5;  --rachi-danger-text: #B81F27;
    --rachi-info-bg: #EFE9DF;    --rachi-info-text: #3E3833;
    --rachi-ember: #E8701F; --rachi-ember-text: #8F3E08; --rachi-ember-bg: rgba(232,112,31,0.12);
    --rachi-bead-filled: #C8262D; --rachi-bead-hollow: rgba(13,11,10,0.40);
    --rachi-glass-bg: rgba(255,255,255,0.78); --rachi-glass-border: rgba(120,40,30,0.12);
    --rachi-sheen: rgba(255,255,255,0.78);
    --rachi-chart-bar-dim: #EFE9DF; --rachi-chart-label: #6B6259;
    --rachi-chart-label-act: #B0202A;
    --rachi-chart-area: rgba(200,38,45,0.12); --rachi-chart-grid: rgba(13,11,10,0.06);
    --rachi-chart-guide: rgba(13,11,10,0.16);
    --rachi-chart-bar-rest: #C8262D; --rachi-chart-bar-hot: #E8701F;
    --rachi-chart-segment-neutral: #6B6259; --rachi-chart-segment-warning: #D97706; --rachi-chart-segment-danger: #C8262D;
  }
}

/* ═══════════════════════════════════════════════════
   5. TYPOGRAPHY & SPACING (theme-independent)
   ═══════════════════════════════════════════════════ */
:root {
  /* Archivo for display AND text (one family, its width axis does the work);
     Geist Mono for money, codes and labels. Loaded by apps/web's
     lib/font-sets.ts (FONT_SETS.app). */
  --rachi-font-display: "Archivo", system-ui, sans-serif;
  --rachi-font-body:    "Archivo", system-ui, -apple-system, sans-serif;
  --rachi-font-mono:    "Geist Mono", ui-monospace, monospace;
  /* NUEVO — Archivo's width axis (font-stretch): expanded for display, semi
     for titles, normal for text, condensed for dense tables. */
  --rachi-width-display:   125%;
  --rachi-width-heading:   112%;
  --rachi-width-body:      100%;
  --rachi-width-condensed: 85%;

  --rachi-text-xs: .75rem; --rachi-text-sm: .875rem; --rachi-text-base: 1rem;
  --rachi-text-lg: 1.125rem; --rachi-text-xl: 1.25rem; --rachi-text-2xl: 1.5rem;
  --rachi-text-3xl: 1.875rem; --rachi-text-4xl: 2.25rem; --rachi-text-5xl: 3rem;
  --rachi-weight-regular: 400; --rachi-weight-medium: 500;
  --rachi-weight-semibold: 600; --rachi-weight-bold: 700;
  --rachi-weight-black: 800;   /* NUEVO — display and titles */
  /* Spacing — canonical 4pt scale (--rachi-space-N = N × 4px) for padding/margin/
     gap. Prefer a step over ad-hoc px; see docs/frontend/styling.md. */
  --rachi-space-1: .25rem; --rachi-space-2: .5rem; --rachi-space-3: .75rem;
  --rachi-space-4: 1rem; --rachi-space-5: 1.25rem; --rachi-space-6: 1.5rem;
  --rachi-space-8: 2rem; --rachi-space-10: 2.5rem; --rachi-space-12: 3rem;
  --rachi-space-16: 4rem; --rachi-space-20: 5rem;
  /* sm 6, md 12, lg 16, xl 20, 2xl 24 */
  --rachi-radius-sm: .375rem; --rachi-radius-md: .75rem; --rachi-radius-lg: 1rem;
  --rachi-radius-xl: 1.25rem; --rachi-radius-2xl: 1.5rem; --rachi-radius-full: 9999px;

  /* NUEVO — icon sizes and stroke (Lucide) */
  --rachi-icon-sm: 16px; --rachi-icon-md: 20px; --rachi-icon-lg: 24px;
  --rachi-icon-stroke: 1.8;

  /* Chart glows (theme-independent): the line in red, the point in brasa */
  --rachi-chart-line-shadow:  drop-shadow(0 2px 6px rgba(200,38,45,0.35));
  --rachi-chart-point-shadow: drop-shadow(0 0 6px rgba(255,138,61,0.60));

  /* Layout */
  --rachi-sidebar-w:   232px;
  --rachi-header-h:    60px;
  --rachi-content-max: 1200px;
}

/* ═══════════════════════════════════════════════════
   6. UTILITY CLASSES
   ═══════════════════════════════════════════════════ */
.rachi-hero-gradient {
  background: linear-gradient(135deg, var(--rachi-bg-hero) 0%, var(--rachi-bg-page) 100%);
  position: relative; overflow: hidden;
}
.rachi-hero-gradient::before {
  content: ''; position: absolute; top: -40%; right: -20%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,138,61,0.16) 0%, transparent 70%);
  pointer-events: none;
}
.rachi-glass {
  background: var(--rachi-glass-bg);
  backdrop-filter: var(--rachi-glass-blur);
  -webkit-backdrop-filter: var(--rachi-glass-blur);
  border: 1px solid var(--rachi-glass-border);
}

/* ═══════════════════════════════════════════════════
   7. BRANCH CONTEXT UTILITIES  (BR-008)
   ═══════════════════════════════════════════════════ */
:root {
  --rachi-branch-ctx-bg:     rgba(255,236,226,0.05);
  --rachi-branch-ctx-border: rgba(255,214,196,0.12);
  --rachi-branch-ctx-text:   var(--rachi-text-muted);
  --rachi-branch-ctx-dot:    var(--rachi-text-muted);
  --rachi-branch-active-bg:     rgba(200,38,45,0.10);
  --rachi-branch-active-border: rgba(200,38,45,0.25);
  --rachi-branch-active-text:   var(--rachi-brand-300);
  --rachi-branch-active-dot:    var(--rachi-brand-500);
}

[data-theme="light"] {
  --rachi-branch-ctx-bg:        var(--_h-200);
  --rachi-branch-ctx-border:    var(--_h-300);
  --rachi-branch-ctx-text:      var(--_h-600);
  --rachi-branch-ctx-dot:       var(--_h-500);
  --rachi-branch-active-bg:     var(--_brand-50);
  --rachi-branch-active-border: var(--_brand-200);
  --rachi-branch-active-text:   var(--_brand-700);
  --rachi-branch-active-dot:    var(--_brand-500);
}

[data-branch-context="global"] .rachi-ctx-tag {
  background:    var(--rachi-branch-ctx-bg);
  border:        1px solid var(--rachi-branch-ctx-border);
  color:         var(--rachi-branch-ctx-text);
}
[data-branch-context="global"] .rachi-ctx-tag::before {
  content: "Global · Todas las sucursales";
}
[data-branch-context="global"] .rachi-ctx-dot {
  background: var(--rachi-branch-ctx-dot);
  box-shadow: none;
}

[data-branch-context]:not([data-branch-context="global"]) .rachi-ctx-tag {
  background:    var(--rachi-branch-active-bg);
  border:        1px solid var(--rachi-branch-active-border);
  color:         var(--rachi-branch-active-text);
}
[data-branch-context]:not([data-branch-context="global"]) .rachi-ctx-dot {
  background:  var(--rachi-branch-active-dot);
  box-shadow:  0 0 8px rgba(200,38,45,0.30);
}

.rachi-ctx-tag {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         4px 12px;
  border-radius:   var(--rachi-radius-full);
  font-family:     var(--rachi-font-body);
  font-size:       var(--rachi-text-xs);
  font-weight:     600;
  letter-spacing:  0.3px;
  white-space:     nowrap;
  transition:      background 200ms, color 200ms, border-color 200ms;
}

.rachi-ctx-dot {
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: var(--rachi-radius-full);
  flex-shrink:   0;
  transition:    background 200ms, box-shadow 200ms;
}

.rachi-branch-banner {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 24px;
  font-size:       var(--rachi-text-sm);
  font-weight:     500;
  border-bottom:   1px solid var(--rachi-border-subtle);
  position:        sticky;
  top:             64px;
  z-index:         100;
  transition:      background 300ms, color 300ms;
}

[data-branch-context="global"] .rachi-branch-banner {
  background: var(--rachi-branch-ctx-bg);
  color:      var(--rachi-branch-ctx-text);
  display:    none;
}

[data-branch-context]:not([data-branch-context="global"]) .rachi-branch-banner {
  background: var(--rachi-branch-active-bg);
  color:      var(--rachi-branch-active-text);
  display:    flex;
}

/* ═══════════════════════════════════════════════════
   8. LANDING  («Ábaco», the public page at / and /en/)
   ═══════════════════════════════════════════════════
   The landing's own palette, type and rhythm. Only the landing reads these
   (apps/web/src/components/public/landing/), and the landing reads nothing
   else: the app's tokens are dark-first and tuned for dense screens, the
   landing is light-first and follows the reader's colour scheme.
   Light in :root; dark twice — the OS preference, and [data-theme="dark"] so
   a test can force it. The two dark blocks are identical
   (landing-token-contrast.test.ts holds them to it, and every pair below to
   WCAG AA). Every fill under white text is #C8262D in both themes. */
:root {
  --rachi-landing-bg:             #F6F1E9;
  --rachi-landing-surface:        #FFFFFF;
  --rachi-landing-soft:           #EFE8DD;
  --rachi-landing-text:           #0D0B0A;
  --rachi-landing-text-2:         #3E3833;
  --rachi-landing-muted:          #6B6259;
  --rachi-landing-rule:           rgba(13,11,10,0.12);
  --rachi-landing-rule-strong:    rgba(13,11,10,0.28);
  --rachi-landing-control-border: rgba(13,11,10,0.50);
  --rachi-landing-accent:         #C8262D;
  --rachi-landing-accent-hover:   #A91C24;
  --rachi-landing-accent-active:  #8B1A1F;
  --rachi-landing-accent-live:    #C8262D;
  --rachi-landing-accent-text:    #B0202A;
  --rachi-landing-chip-bg:        rgba(200,38,45,0.10);
  --rachi-landing-chip-text:      #A11F27;
  --rachi-landing-plan-3:         rgba(200,38,45,0.20);
  --rachi-landing-red:            #C8262D;
  --rachi-landing-on-red:         #FFFFFF;
  --rachi-landing-on-red-2:       rgba(255,255,255,0.92);
  --rachi-landing-on-red-rule:    rgba(255,255,255,0.30);
  --rachi-landing-on-red-tile:    rgba(0,0,0,0.16);
  --rachi-landing-red-dots:       rgba(255,255,255,0.13);
  --rachi-landing-red-dots-hero:  rgba(255,255,255,0.16);
  --rachi-landing-panel:          linear-gradient(150deg, #D63A3F, #A81D24);
  --rachi-landing-ink:            #1B1A17;
  --rachi-landing-ink-hover:      #0D0B0A;
  --rachi-landing-field-on-red:   #FFFFFF;
  --rachi-landing-tag-bg:         #FFFFFF;
  --rachi-landing-tag-text:       #8E1A20;
  --rachi-landing-focus:          #C8262D;
  --rachi-landing-focus-on-red:   #FFFFFF;
  --rachi-landing-bead:           #C8262D;
  --rachi-landing-bead-hollow:    rgba(13,11,10,0.50);
  --rachi-landing-ok:             #11673A;
  --rachi-landing-error:          #B81F27;
  --rachi-landing-shot-shadow:    0 20px 50px rgba(90,40,20,0.14);
  --rachi-landing-device-shadow:  0 0 0 1px rgba(255,255,255,0.12), 0 30px 70px rgba(40,0,0,0.55);
  /* The phones are transparent-cornered images: a filter shadow follows the
     frame's own curve, where a box-shadow needs a border-radius that clips it. */
  --rachi-landing-device-drop:    drop-shadow(0 18px 28px rgba(40,0,0,0.45));
  --rachi-landing-browser-shadow: 0 40px 90px rgba(60,0,0,0.5);
  --rachi-landing-browser-shadow-hero: 0 30px 60px rgba(60,0,0,0.45);
  --rachi-landing-pop-shadow:     0 8px 20px rgba(60,0,0,0.3);

  /* Type: Archivo (display, controls), Onest (prose), Geist Mono (labels,
     money). The «Fallback» faces are metric-adjusted locals in landing.css. */
  --rachi-landing-font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --rachi-landing-font-body:    "Onest", "Onest Fallback", system-ui, sans-serif;
  --rachi-landing-font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* The shared scales, re-exported so landing files name one family only. */
  --rachi-landing-space-1: var(--rachi-space-1);  --rachi-landing-space-2: var(--rachi-space-2);
  --rachi-landing-space-3: var(--rachi-space-3);  --rachi-landing-space-4: var(--rachi-space-4);
  --rachi-landing-space-5: var(--rachi-space-5);  --rachi-landing-space-6: var(--rachi-space-6);
  --rachi-landing-space-8: var(--rachi-space-8);  --rachi-landing-space-10: var(--rachi-space-10);
  --rachi-landing-space-12: var(--rachi-space-12);
  --rachi-landing-radius-sm: var(--rachi-radius-sm);
  --rachi-landing-radius-md: var(--rachi-radius-md);
  --rachi-landing-radius-2xl: var(--rachi-radius-2xl);
  --rachi-landing-radius-full: var(--rachi-radius-full);

  /* Rhythm, phone first (320–767). md 768, lg 1200, xl 1400 below. */
  --rachi-landing-gutter:       16px;
  --rachi-landing-section-top:  64px;
  --rachi-landing-band-y:       56px;
  --rachi-landing-h1:           40px;
  --rachi-landing-h2:           32px;
  --rachi-landing-band-h2:      38px;
  --rachi-landing-lead:         18px;
  --rachi-landing-time:         50px;
  --rachi-landing-plan-big:     28px;
}
@media (min-width: 768px) {
  :root {
    --rachi-landing-gutter: 32px; --rachi-landing-section-top: 88px; --rachi-landing-band-y: 72px;
    --rachi-landing-h1: 60px; --rachi-landing-h2: 40px; --rachi-landing-band-h2: 50px;
    --rachi-landing-lead: 19px; --rachi-landing-time: 56px; --rachi-landing-plan-big: 21px;
  }
}
@media (min-width: 1200px) {
  :root {
    --rachi-landing-gutter: 32px; --rachi-landing-section-top: 96px; --rachi-landing-band-y: 88px;
    --rachi-landing-h1: 60px; --rachi-landing-h2: 42px; --rachi-landing-band-h2: 52px;
    --rachi-landing-lead: 19px; --rachi-landing-time: 58px; --rachi-landing-plan-big: 27px;
  }
}
@media (min-width: 1400px) {
  :root {
    --rachi-landing-gutter: 40px; --rachi-landing-section-top: 112px; --rachi-landing-band-y: 100px;
    --rachi-landing-h1: 68px; --rachi-landing-h2: 46px; --rachi-landing-band-h2: 58px;
    --rachi-landing-lead: 20px; --rachi-landing-time: 64px; --rachi-landing-plan-big: 30px;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rachi-landing-bg:             #0D0B0A;
    --rachi-landing-surface:        #161311;
    --rachi-landing-soft:           #15110F;
    --rachi-landing-text:           #F6F0E8;
    --rachi-landing-text-2:         #C8BEB2;
    --rachi-landing-muted:          #978C80;
    --rachi-landing-rule:           rgba(246,240,232,0.14);
    --rachi-landing-rule-strong:    rgba(246,240,232,0.30);
    --rachi-landing-control-border: rgba(246,240,232,0.40);
    --rachi-landing-accent-live:    #E5484D;
    --rachi-landing-accent-text:    #FF7A6E;
    --rachi-landing-chip-bg:        rgba(229,72,77,0.16);
    --rachi-landing-chip-text:      #FF9A9A;
    --rachi-landing-plan-3:         rgba(229,72,77,0.30);
    --rachi-landing-focus:          #FFB38A;
    --rachi-landing-bead:           #E5484D;
    --rachi-landing-bead-hollow:    rgba(246,240,232,0.45);
    --rachi-landing-ok:             #6EE7A0;
    --rachi-landing-error:          #FF8A8A;
    --rachi-landing-shot-shadow:    0 24px 60px rgba(0,0,0,0.5);
  }
}
[data-theme="dark"] {
  --rachi-landing-bg:             #0D0B0A;
  --rachi-landing-surface:        #161311;
  --rachi-landing-soft:           #15110F;
  --rachi-landing-text:           #F6F0E8;
  --rachi-landing-text-2:         #C8BEB2;
  --rachi-landing-muted:          #978C80;
  --rachi-landing-rule:           rgba(246,240,232,0.14);
  --rachi-landing-rule-strong:    rgba(246,240,232,0.30);
  --rachi-landing-control-border: rgba(246,240,232,0.40);
  --rachi-landing-accent-live:    #E5484D;
  --rachi-landing-accent-text:    #FF7A6E;
  --rachi-landing-chip-bg:        rgba(229,72,77,0.16);
  --rachi-landing-chip-text:      #FF9A9A;
  --rachi-landing-plan-3:         rgba(229,72,77,0.30);
  --rachi-landing-focus:          #FFB38A;
  --rachi-landing-bead:           #E5484D;
  --rachi-landing-bead-hollow:    rgba(246,240,232,0.45);
  --rachi-landing-ok:             #6EE7A0;
  --rachi-landing-error:          #FF8A8A;
  --rachi-landing-shot-shadow:    0 24px 60px rgba(0,0,0,0.5);
}

  * { 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(--rachi-brand-500);
    --store-accent-strong: var(--rachi-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(--rachi-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(--rachi-bg-page);
    color: var(--rachi-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; }
  }
  .rachi-footer {
    margin-top: auto;
    padding: 28px 24px 32px;
    text-align: center;
    font-size: 12px;
    color: var(--rachi-text-muted);
  }
  .rachi-footer strong { color: var(--rachi-text-secondary); }
  /* Its own line: on a phone the two would wrap into one run of grey text. */
  .rachi-footer a { display: block; margin-bottom: 6px; color: var(--rachi-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(--rachi-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(--rachi-shadow-lg);
    /* The shadow carries the lift on a light page, but --rachi-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:#DB2777;--store-accent-strong:#BE185D;--store-accent-text:#BE185D;--store-accent-contrast:#ffffff;--store-ring:#DB2777}[data-theme="dark"]{--store-accent-text:#F9A8D4;--store-ring:#DB2777}@font-face{font-family:"Cinzel";font-style:normal;font-weight:500 900;font-display:swap;src:url(/_fonts/cinzel-latin-500-normal-v5.3.0.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(/_fonts/jost-latin-400-normal-v5.3.0.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url(/_fonts/jost-latin-600-normal-v5.3.0.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--rachi-font-display:"Cinzel", ui-serif, "New York", "Iowan Old Style", Georgia, Cambria, "Times New Roman", "Noto Serif", serif}body{font-family:"Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
  .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(--rachi-radius-full);
    background: var(--rachi-bg-surface);
    color: var(--rachi-text-secondary);
    border: 1px solid var(--rachi-border-subtle);
    box-shadow: var(--rachi-shadow-md);
    cursor: pointer;
    padding: 0;
  }
  .theme-toggle:hover { color: var(--rachi-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; }