/* Palopay brand tokens — shared across all three directions */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand palette (from the supplied HEX card) */
  --claret:    #5C051A;
  --off-black: #1F0E0E;
  --bone:      #EDEAD6;

  /* Derived tints (mixed against the bases, never invented hues) */
  --claret-700: #4A0414;
  --claret-300: color-mix(in srgb, var(--claret) 70%, var(--bone));
  --bone-dim:   color-mix(in srgb, var(--bone) 62%, var(--claret));
  --bone-faint: color-mix(in srgb, var(--bone) 30%, var(--claret));
  --bone-card:  #F4F1E4;
  --line-on-claret: color-mix(in srgb, var(--bone) 22%, transparent);
  --line-on-bone:   color-mix(in srgb, var(--off-black) 16%, transparent);

  --font: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --maxw: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: 'ss01';
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tnum { font-variant-numeric: tabular-nums; }

/* the dot after the wordmark */
.wm-dot { color: inherit; }