/* ============================================================
   Galaxi — design system v3 tokens
   Generated from the v3 handoff. Single source of truth for the
   child theme. Mirror these names exactly in Elementor
   Site Settings → Variables so editor and theme agree.

   Dark mode is a remap only. No component may define a colour
   locally. The accessibility widget flips data-galaxi-theme.
   ============================================================ */

:root {
  /* ---- Colour: ink ramp -------------------------------------- */
  --gx-ink:            #0E1319;  /* 19.4 on white  · headings, prices */
  --gx-ink-2:          #3C4450;  /*  9.8           · body copy, default */
  --gx-ink-3:          #5B6472;  /*  5.9 / 5.3 tint · THE FLOOR FOR TEXT */
  --gx-ink-4:          #8A93A1;  /*  3.2 — NEVER TEXT. Decorative only. */
  --gx-rule:           #B9BFC9;  /*  3.1 · control boundaries */

  /* ---- Colour: the one action colour -------------------------- */
  --gx-act:            #0A6E52;
  --gx-act-h:          #085A43;
  --gx-act-p:          #064534;
  --gx-act-tint:       #EAF3EF;
  --gx-act-ink:        #075640;

  /* ---- Colour: status ----------------------------------------- */
  --gx-warn:           #8A5300;  /* also the focus ring — hence this dark */
  --gx-warn-tint:      #FBF2E4;
  --gx-stop:           #A81F1F;
  --gx-stop-tint:      #FBECEC;

  /* ---- Colour: surfaces --------------------------------------- */
  --gx-paper:          #FFFFFF;  /* band fill A */
  --gx-band:           #F2F3F5;  /* band fill B */
  --gx-band-2:         #E7E9ED;  /* table headers, inset wells only */
  --gx-hair:           rgba(14, 19, 25, .10);
  --gx-disabled:       #EEF0F3;
  --gx-disabled-ink:   #6E7787;
  --gx-skeleton:       #EDEFF2;
  --gx-scrim:          rgba(14, 19, 25, .55);

  /* ---- Type --------------------------------------------------- */
  /* Sohne is licensed for neither this project nor Google Fonts. Inter is
     the standard substitute: same neo-grotesque lineage, and the best
     tabular figures on Google Fonts, which this catalogue needs badly.
     Self-hosted, not CDN, for LCP and privacy. Swap here and nowhere else. */
  --gx-font:           "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gx-font-mono:      "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --gx-w-light:        300;  /* wordmark only, never body */
  --gx-w-regular:      400;  /* body, table cells */
  --gx-w-medium:       500;  /* every heading, every price */
  --gx-w-semi:         600;  /* labels, active states, sparingly */
  /* No bold, no black, no italics anywhere in the interface. */

  --gx-display:        500 74px/1.02 var(--gx-font);
  --gx-display-track:  -.038em;
  --gx-band-head:      500 38px/1.06 var(--gx-font);
  --gx-band-head-track: -.032em;
  --gx-head:           500 26px/1.1 var(--gx-font);
  --gx-head-track:     -.028em;
  --gx-sub:            500 19px/1.25 var(--gx-font);
  --gx-sub-track:      -.02em;
  --gx-lede:           400 20px/1.55 var(--gx-font);
  --gx-body:           400 16px/1.62 var(--gx-font);
  --gx-dense:          400 13.5px/1.45 var(--gx-font);  /* smallest in system */
  --gx-label:          600 12.5px/1.4 var(--gx-font);
  --gx-mono:           500 12.5px/1.4 var(--gx-font-mono);

  --gx-price-hero:     500 44px/1 var(--gx-font);
  --gx-price:          500 26px/1 var(--gx-font);
  --gx-price-inline:   600 16px/1 var(--gx-font);

  --gx-measure-lede:   58ch;
  --gx-measure-body:   70ch;

  /* ---- Space -------------------------------------------------- */
  --gx-s-1:   2px;  --gx-s-2:   4px;  --gx-s-3:   8px;
  --gx-s-4:  12px;  --gx-s-5:  20px;  --gx-s-6:  32px;
  --gx-s-7:  48px;  --gx-s-8:  72px;  --gx-s-9:  88px;

  --gx-band-pad:       72px;   /* retail */
  --gx-band-pad-trade: 40px;
  --gx-band-pad-mob:   32px;
  --gx-measure-max:    1120px;
  --gx-gutter:         40px;

  /* ---- Radius ------------------------------------------------- */
  --gx-r-inline:   4px;
  --gx-r-control:  8px;
  --gx-r-panel:   12px;
  --gx-r-pill:   999px;

  /* ---- Elevation — reserved for things that float ------------- */
  --gx-e-1: 0 1px 1px rgba(14, 19, 25, .04);
  --gx-e-2: 0 1px 1px rgba(14, 19, 25, .04), 0 10px 24px -14px rgba(14, 19, 25, .16);

  /* ---- Motion ------------------------------------------------- */
  --gx-t-hover:      120ms;
  --gx-t-disclose:   240ms;
  --gx-t-panel-in:   240ms;
  --gx-t-panel-out:  180ms;
  --gx-t-reveal:     400ms;
  --gx-ease-in:      cubic-bezier(.2, 0, .2, 1);
  --gx-ease-out:     cubic-bezier(.4, 0, 1, 1);

  /* ---- Density mode — overridden by .is-compact --------------- */
  --gx-row-pad:   22px;
  --gx-row-text:  16px;

  /* ---- Layers ------------------------------------------------- */
  --gx-z-bar:    50;
  --gx-z-a11y:   60;
  --gx-z-scrim:  70;
  --gx-z-panel:  75;

  /* ---- Fixed-bar heights, feed scroll-padding (SC 2.4.11) ----- */
  --gx-bar:      64px;   /* retail action bar; 96px trade */
  --gx-footer:    0px;
}

/* Inter's optical size axis. Without this, large headings use the text cut
   scaled up, which looks soft and loose next to the design's intent. */
.gx-display, h1, .gx-band-head, h2 { font-optical-sizing: auto; font-variation-settings: "opsz" 32; }
body { font-optical-sizing: auto; }

/* Dark: a remap, nothing more. Set by the accessibility widget. */
[data-galaxi-theme="dark"] {
  --gx-ink:          #F2F4F7;
  --gx-ink-2:        #C6CCD6;
  --gx-ink-3:        #9BA4B2;
  --gx-ink-4:        #6E7787;
  --gx-rule:         #4A5260;
  --gx-act:          #3FBF93;
  --gx-act-h:        #5CCFA6;
  --gx-act-p:        #2FA57C;
  --gx-act-tint:     #0C2620;
  --gx-act-ink:      #66D3AB;
  --gx-warn:         #E0A94A;
  --gx-warn-tint:    #2A1D06;
  --gx-stop:         #F08A8A;
  --gx-stop-tint:    #2B1214;
  --gx-paper:        #0B0E12;
  --gx-band:         #141922;
  --gx-band-2:       #1C222C;
  --gx-hair:         rgba(242, 244, 247, .12);
  --gx-disabled:     #1A202A;
  --gx-disabled-ink: #737C8C;
  --gx-skeleton:     #171D26;
}

/* Compact density — one class, two properties. Padding shrinks,
   target size does not: the hit area exceeds the visible row. */
.is-compact {
  --gx-row-pad:  11px;
  --gx-row-text: 13.5px;
}

/* Focus. 2px warn at 3px offset, never removed. */
.u-focus-ring:focus-visible,
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gx-warn);
  outline-offset: 3px;
}

/* Fixed bars must never obscure a focused element. */
html { scroll-padding-bottom: calc(var(--gx-bar) + var(--gx-footer) + 32px); }

/* Clip, never hidden — hidden creates a scroll container and kills sticky. */
.u-clip { overflow: clip; }

/* Sticky rails must be bounded or they can never pin. */
.u-sticky-rail {
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
}

/* Numbers that could sit above numbers. */
.u-tabular,
.price, .price__figure, .price__was, .table-dense td, .table-dense th {
  font-variant-numeric: tabular-nums lining-nums;
}

/* One global reduced-motion block, not one per component. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .u-frosted { backdrop-filter: none !important; background: var(--gx-paper) !important; }
}