/* Tokeny systemu designu Trybikownia. */
:root {
  color-scheme: light dark;

  --tb-bg: #f7fcfc;
  --tb-surface: #ffffff;
  --tb-surface-2: #eaf8f7;
  --tb-border: #6b9292;
  --tb-border-soft: #c6e2e0;

  --tb-text: #102f33;
  --tb-text-soft: #365a5e;
  --tb-text-mute: #4f6c70;

  --tb-primary: #00747a;
  --tb-primary-hover: #005d63;
  --tb-primary-soft: #d9f3f1;
  --tb-primary-ink: #ffffff;

  --tb-accent: #c9341f;
  --tb-accent-hover: #a92516;
  --tb-accent-text: #00676d;
  --tb-accent-ink: #ffffff;

  --tb-ok: #146c43;
  --tb-ok-soft: #e4f6ec;
  --tb-warn: #7a4c00;
  --tb-warn-soft: #fff3d4;
  --tb-err: #a9271b;
  --tb-err-soft: #fce8e5;

  --tb-hero-overlay: #062e32;
  --tb-hero-ink: #ffffff;

  --tb-font-display: "Arial Narrow", "Aptos Display", "Segoe UI", sans-serif;
  --tb-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tb-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --tb-step--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.88rem);
  --tb-step-0: clamp(0.94rem, 0.9rem + 0.2vw, 1.06rem);
  --tb-step-1: clamp(1.13rem, 1.04rem + 0.42vw, 1.35rem);
  --tb-step-2: clamp(1.35rem, 1.18rem + 0.78vw, 1.72rem);
  --tb-step-3: clamp(1.62rem, 1.31rem + 1.3vw, 2.2rem);
  --tb-step-4: clamp(1.94rem, 1.43rem + 2.12vw, 2.82rem);
  --tb-step-5: clamp(2.5rem, 1.58rem + 3.8vw, 4.35rem);

  --tb-space-1: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
  --tb-space-2: clamp(0.5rem, 0.46rem + 0.18vw, 0.63rem);
  --tb-space-3: clamp(0.75rem, 0.68rem + 0.3vw, 0.94rem);
  --tb-space-4: clamp(1rem, 0.9rem + 0.42vw, 1.25rem);
  --tb-space-5: clamp(1.5rem, 1.34rem + 0.68vw, 1.88rem);
  --tb-space-6: clamp(2rem, 1.78rem + 0.92vw, 2.5rem);
  --tb-space-7: clamp(3rem, 2.66rem + 1.42vw, 3.75rem);
  --tb-space-8: clamp(4rem, 3.55rem + 1.88vw, 5rem);

  --tb-section-space: clamp(4rem, 3.2rem + 3.4vw, 6.5rem);
  --tb-radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tb-bg: #071e21;
    --tb-surface: #0d2b2f;
    --tb-surface-2: #123a3e;
    --tb-border: #6f9da0;
    --tb-border-soft: #2c565a;

    --tb-text: #f4fffe;
    --tb-text-soft: #c8e7e5;
    --tb-text-mute: #a5c5c3;

    --tb-primary: #26bfc3;
    --tb-primary-hover: #44d6d8;
    --tb-primary-soft: #103f43;
    --tb-primary-ink: #06282b;

    --tb-accent: #ff735c;
    --tb-accent-hover: #ff927f;
    --tb-accent-text: #ff9a87;
    --tb-accent-ink: #27100c;

    --tb-ok: #73dca8;
    --tb-ok-soft: #123d2d;
    --tb-warn: #ffd27a;
    --tb-warn-soft: #493515;
    --tb-err: #ff9b91;
    --tb-err-soft: #4c211f;

    --tb-hero-overlay: #041e21;
    --tb-hero-ink: #ffffff;
  }
}