/* Sistema visual de Lantix. Un solo juego de tokens para las cuatro paginas:
   cambia el tono del acento por producto, nunca su brillo ni su saturacion. */

:root {
  --surface: oklch(0.972 0.019 88);
  --surface-raised: oklch(0.992 0.008 88);
  --surface-sunken: oklch(0.945 0.028 86);
  --surface-inverse: oklch(0.23 0.035 265);

  --ink: oklch(0.23 0.035 265);
  --ink-muted: oklch(0.38 0.028 265);
  --ink-faint: oklch(0.50 0.022 265);
  --ink-inverse: oklch(0.97 0.012 88);
  --ink-inverse-muted: oklch(0.80 0.02 88);

  --line: oklch(0.87 0.022 88);
  --line-strong: oklch(0.78 0.03 88);
  --line-inverse: oklch(0.34 0.035 265);

  /* Los tres tonos de producto. El paraguas no tiene acento propio: los usa a
     los tres cuando presenta los productos. */
  --hue-tradeguard: 245;
  --hue-monia: 165;
  --hue-soma: 65;

  --accent-hue: 245;
  --accent: oklch(0.48 0.105 var(--accent-hue));
  --accent-deep: oklch(0.40 0.105 var(--accent-hue));
  --accent-vivid: oklch(0.66 0.155 var(--accent-hue));
  --accent-line: oklch(0.80 0.075 var(--accent-hue));
  --accent-wash: oklch(0.935 0.055 var(--accent-hue));
  --accent-tint: oklch(0.90 0.085 var(--accent-hue));

  --radius: 14px;
  --radius-sm: 8px;

  --ok: oklch(0.52 0.13 148);
  --warn: oklch(0.62 0.14 82);
  --bad: oklch(0.51 0.18 25);

  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-text: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0: clamp(1rem, 0.97rem + 0.14vw, 1.09rem);
  --step-1: clamp(1.09rem, 1.03rem + 0.3vw, 1.28rem);
  --step-2: clamp(1.22rem, 1.1rem + 0.6vw, 1.6rem);
  --step-3: clamp(1.5rem, 1.24rem + 1.3vw, 2.4rem);
  --step-4: clamp(1.9rem, 1.4rem + 2.5vw, 3.3rem);
  --step-5: clamp(2.3rem, 1.35rem + 4.8vw, 4.6rem);
  --step-mono: clamp(0.68rem, 0.66rem + 0.1vw, 0.73rem);

  --space-1: 0.35rem;
  --space-2: 0.6rem;
  --space-3: 0.9rem;
  --space-4: 1.35rem;
  --space-5: 2rem;
  --space-6: clamp(2rem, 4vw, 3rem);
  --space-7: clamp(2.5rem, 6vw, 5.5rem);
  --space-8: clamp(3rem, 8vw, 7rem);

  --gutter: clamp(1rem, 4vw, 2.75rem);
  --measure: 1140px;
}

[data-accent="tradeguard"] { --accent-hue: 245; }
[data-accent="monia"] { --accent-hue: 165; }
[data-accent="soma"] { --accent-hue: 65; }