/*
 * The design system, taken from alti-trading.fr.
 *
 * Every value here was read off the French site rather than invented, so the
 * two read as one brand: the same InterVariable 4.1 file, the same OKLCH
 * neutral ramp (a grey biased toward violet, hue 285.8, which is what keeps it
 * from looking like flat web grey), the same radius steps, the same near-black
 * call to action.
 *
 * Scope: this sheet defines tokens and the primitives built from them. It does
 * not restyle anything on its own — the redesigned surfaces opt in by using
 * these classes, so the pages still on the Divi layout are untouched.
 */

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2');
}

:root {
  /* Type ------------------------------------------------------------- */
  --ds-font: InterVariable, Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /*
   * The French site sets −1.92px at 60px, which is −0.032em. Expressed
   * relatively so it holds at every size instead of only at the one it was
   * measured from.
   */
  --ds-tracking-display: -0.032em;
  --ds-tracking-tight: -0.02em;

  /* Fluid, so a 60px headline does not arrive whole on a 375px screen. */
  --ds-text-display: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem); /* → 60px */
  --ds-text-h2: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); /* → 48px */
  --ds-text-h3: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); /* → 28px */
  --ds-text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* → 20px */
  --ds-text-body: 1rem;
  --ds-text-small: 0.875rem;
  --ds-text-label: 0.8125rem;

  /* Neutrals ---------------------------------------------------------- */
  --ds-ink: oklch(0.21 0.006 285.885);
  --ds-ink-strong: oklch(0.141 0.005 285.823);
  --ds-body: oklch(0.442 0.017 285.786);
  --ds-muted: oklch(0.552 0.016 285.938);
  /*
   * Zinc, exactly as the French site has it — its source names these
   * zinc-200 and zinc-100 on the Tailwind v4 ramp. The grey read as austere
   * here for a reason that was never the colour: it was painted in full-width
   * bands. Those are gone, so the neutral goes back to the shared one.
   */
  --ds-line: oklch(0.92 0.004 286.32);
  --ds-surface: oklch(1 0 0);
  --ds-surface-sunk: oklch(0.967 0.001 286.375);
  --ds-surface-tint: oklch(0.97 0.016 254.6); /* the pale blue behind product shots */
  --ds-surface-tint-violet: oklch(0.968 0.019 300);
  /*
   * The dark panel. Deep enough to be the page's one dark thing, but a slate
   * blue rather than a near-black — at 0.19 it read as aggressive next to
   * everything else here, which is pale.
   */
  --ds-surface-ink: oklch(0.31 0.045 264);
  --ds-surface-ink-2: oklch(0.27 0.055 285);

  /* Accent ------------------------------------------------------------ */
  --ds-accent-from: oklch(0.62 0.19 253);
  /*
   * The accent as *text*. The gradient's own blue is a 3.67:1 on white — fine
   * for a 24px icon, not for a 13px label. This is the same hue taken down the
   * ramp until it clears 4.5:1.
   */
  --ds-accent-text: oklch(0.488 0.243 264.376);
  --ds-accent-to: oklch(0.56 0.24 296);

  /* Shape and rhythm --------------------------------------------------- */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 24px;
  --ds-radius-pill: 999px;

  /*
   * Two shadows, cast in the ink colour rather than in black, so a card lifting
   * off a tinted ground does not drop a grey smudge on it.
   */
  --ds-shadow-sm: 0 1px 2px oklch(0.21 0.006 285.885 / 0.05), 0 6px 16px oklch(0.21 0.006 285.885 / 0.05);
  --ds-shadow-md: 0 2px 4px oklch(0.21 0.006 285.885 / 0.05), 0 14px 32px oklch(0.21 0.006 285.885 / 0.09);

  /*
   * Measured off the French source rather than off its rendered pages:
   * $size-root-padding-inline 20/16px, $bp-content-max-width 1080px,
   * $size-section-padding-block 128/96px.
   */
  --ds-gutter: 20px;
  --ds-measure: 62ch;
  --ds-page: 1080px;
  --ds-section-gap: 128px;
}

/* Primitives ---------------------------------------------------------- */

.ds {
  font-family: var(--ds-font);
  color: var(--ds-body);
  font-size: var(--ds-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ds-shell {
  width: 100%;
  max-width: var(--ds-page);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

.ds-display,
.ds-h2,
.ds-h3 {
  font-family: var(--ds-font);
  color: var(--ds-ink);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}

.ds-display {
  font-size: var(--ds-text-display);
  letter-spacing: var(--ds-tracking-display);
  line-height: 1.1;
}

.ds-h2 {
  font-size: var(--ds-text-h2);
  letter-spacing: var(--ds-tracking-display);
  line-height: 1.1;
}

.ds-h3 {
  font-size: var(--ds-text-h3);
  letter-spacing: var(--ds-tracking-tight);
  line-height: 1.25;
}

.ds-lead {
  font-size: var(--ds-text-lead);
  color: var(--ds-body);
  line-height: 1.55;
  max-width: var(--ds-measure);
  margin: 0;
}

/*
 * The one place colour is allowed to shout: a single word inside a heading.
 * Gradient text is normally a tell, but it is this brand's signature on the
 * French site, so it stays — used once per heading and never on body copy.
 */
.ds-accent {
  background: linear-gradient(100deg, var(--ds-accent-from), var(--ds-accent-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* A quiet chip above a section, in place of the old coloured eyebrows. */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-tint);
  color: var(--ds-ink);
  font-size: var(--ds-text-label);
  font-weight: 500;
  line-height: 1.3;
}

.ds-chip svg {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Buttons ------------------------------------------------------------- */

.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font);
  font-size: var(--ds-text-small);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ds-button--primary {
  background: oklch(0.21 0.006 285.885 / 0.9);
  color: oklch(0.985 0 0);
}

.ds-button--primary:hover,
.ds-button--primary:focus-visible {
  background: var(--ds-ink-strong);
  color: oklch(0.985 0 0);
}

.ds-button--quiet {
  background: transparent;
  border-color: var(--ds-line);
  color: var(--ds-ink);
}

.ds-button--quiet:hover,
.ds-button--quiet:focus-visible {
  background: var(--ds-surface-sunk);
}

/* The primary button, inverted, for the ink panel. */
.ds-button--invert {
  background: var(--ds-surface);
  color: var(--ds-ink-strong);
}

.ds-button--invert:hover,
.ds-button--invert:focus-visible {
  background: oklch(0.94 0.008 264);
  color: var(--ds-ink-strong);
}

.ds-button--lg {
  padding: 0.85rem 1.5rem;
  font-size: var(--ds-text-body);
}

.ds :focus-visible,
.ds-button:focus-visible {
  outline: 2px solid var(--ds-accent-to);
  outline-offset: 2px;
}

@media (max-width: 999px) {
  :root {
    --ds-gutter: 16px;
    --ds-section-gap: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-button {
    transition: none;
  }
}