/*
 * Agerta design tokens: a plain-CSS copy of Agerta-Web
 * src/scss/wiro-design-system/_tokens.scss plus the public layout tokens from
 * _all.scss. Keep the values in step with Agerta-Web when it changes them.
 */
:root {

  --wiro-sans: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, helvetica, arial, sans-serif;
  --wiro-mono: 'JetBrains Mono', monospace;
  --wiro-font-mono: var(--wiro-mono);

  --wiro-type-title-size: 15px;
  --wiro-type-title-weight: 650;
  --wiro-type-title-letter: -0.02em;
  --wiro-type-title-line: 1.25;
  --wiro-type-metric-lg-size: 30px;
  --wiro-type-metric-md-size: 22px;
  --wiro-type-metric-sm-size: 18px;
  --wiro-type-metric-weight: 650;
  --wiro-type-metric-letter: -0.035em;
  --wiro-type-metric-line: 1.1;
  --wiro-type-row-size: 13px;
  --wiro-type-row-weight: 550;
  --wiro-type-row-line: 1.45;
  --wiro-type-meta-size: 12.5px;
  --wiro-type-meta-line: 1.5;
  --wiro-type-caption-size: 12px;
  --wiro-type-micro-size: 11px;
  --wiro-type-eyebrow-size: 10.5px;
  --wiro-type-eyebrow-weight: 500;
  --wiro-type-eyebrow-letter: 0.06em;
  --wiro-type-eyebrow-line: 1.2;
  --wiro-type-table-head-letter: 0.04em;
  --wiro-type-button-sm-size: 12.5px;
  --wiro-type-button-weight: 500;
  --wiro-type-empty-title-size: 15px;
  --wiro-type-empty-compact-title-size: 14px;
  --wiro-type-empty-description-size: 13px;

  --wiro-type-page-title-size: 25px;
  --wiro-type-page-subtitle-size: 13.5px;

  --wiro-bg: #f9f8f5;
  --wiro-bg-warm: #f2efe8;
  --wiro-bg-stone: #edeae2;

  --wiro-bg-hover: #f4f1ea;
  --wiro-surface: #fff;

  --wiro-header-bg: var(--wiro-bg);

  --wiro-scrim: rgb(22 20 15 / 44%);

  --wiro-announce-bg: linear-gradient(90deg, #eef5ee 0%, #f4f0f7 100%);

  --wiro-surface-frost: rgb(255 255 255 / 86%);
  --wiro-ink: #16140f;
  --wiro-ink2: #3d3a33;
  --wiro-ink3: #706c62;
  --wiro-ink4: #a8a49a;
  --wiro-ink-hover: #2a2820;
  --wiro-border: rgb(22 20 15 / 7%);
  --wiro-border-med: rgb(22 20 15 / 11%);
  --wiro-border-strong: rgb(22 20 15 / 20%);
  --wiro-dark: #16140f;
  --wiro-dark-surface: #1e1c16;
  --wiro-dark-border: rgb(255 255 255 / 7%);
  --wiro-dark-border-med: rgb(255 255 255 / 11%);
  --wiro-green: #2e7d52;
  --wiro-green-mid: #3a9463;
  --wiro-green-strong: #3f9e68;
  --wiro-danger-text: #b3471e;
  --wiro-danger: #c05050;
  --wiro-amber: #c99a40;
  --wiro-blue: #3b64b4;
  --wiro-green-bg: rgb(46 125 82 / 8%);
  --wiro-green-text: #1e5c38;
  --wiro-green-bright: #4caf76;
  --wiro-green-border: rgb(46 125 82 / 24%);

  --wiro-danger-bg: rgb(179 71 30 / 8%);
  --wiro-danger-border: rgb(179 71 30 / 24%);
  --wiro-amber-text: #7a5010;
  --wiro-amber-bg: rgb(201 154 64 / 10%);
  --wiro-blue-bg: rgb(74 109 140 / 12%);

  --wiro-on-dark: #f9f8f5;

  --wiro-radius: 0.25rem;
  --wiro-radius-sm: calc(var(--wiro-radius) - 2px);
  --wiro-radius-md: var(--wiro-radius);
  --wiro-radius-lg: calc(var(--wiro-radius) + 2px);
  --wiro-radius-xl: calc(var(--wiro-radius) + 4px);
  --wiro-radius-2xl: calc(var(--wiro-radius) + 6px);
  --wiro-radius-3xl: calc(var(--wiro-radius) + 8px);
  --wiro-radius-4xl: calc(var(--wiro-radius) + 10px);

  --wiro-radius-control: 0.5rem;
  --wiro-radius-chip: 0.375rem;

  --wiro-hover-bg: rgb(22 20 15 / 4%);
  --wiro-hover-border: rgb(22 20 15 / 12%);
  --wiro-focus-ring: 0 0 0 2px rgb(42 41 35 / 8%);
  --wiro-transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
  --wiro-scroll-thumb: rgb(22 20 15 / 14%);
  --wiro-scroll-thumb-hover: rgb(22 20 15 / 24%);
  --wiro-scroll-size: 6px;

  --wiro-media-action-size: 24px;
  --wiro-media-action-radius: var(--wiro-radius-md);
  --wiro-media-action-bg: rgb(249 248 245 / 88%);
  --wiro-media-action-bg-hover: rgb(249 248 245 / 96%);
  --wiro-media-action-fg: rgb(22 20 15 / 82%);
  --wiro-media-action-fg-hover: #16140f;
  --wiro-media-action-border: rgb(249 248 245 / 50%);

  --wiro-z-modal: 7000;
  --wiro-z-popover: 7050;
  --wiro-z-lightbox: 7100;
  --wiro-z-toast: 7200;

  --wiro-shadow-sm: 0 1px 2px rgb(22 20 15 / 5%);
  --wiro-shadow-soft: 0 14px 34px rgb(22 20 15 / 8%);

  --wiro-skeleton-base: #edeae2;
  --wiro-skeleton-mid: #f2efe8;
  --wiro-skeleton-glint: #fbfaf7;
  --wiro-skeleton-border: var(--wiro-border);
  --wiro-skeleton-speed: 1.35s;

  --wiro-code-bg: var(--wiro-bg-warm);
  --wiro-code-surface: var(--wiro-surface);
  --wiro-code-border: var(--wiro-border);
  --wiro-code-inline-bg: var(--wiro-bg-stone);
  --wiro-code-fg: var(--wiro-ink);
  --wiro-code-punct: var(--wiro-ink3);
  --wiro-code-name: var(--wiro-ink2);
  --wiro-code-comment: #8b877d;
  --wiro-code-keyword: #5f594a;
  --wiro-code-string: #2e7d52;
  --wiro-code-number: #9a6a32;

  --wiro-code-ondark-bg: #131210;
  --wiro-code-ondark-inset: #0e0d0b;
  --wiro-code-ondark-surface: var(--wiro-dark-surface);
  --wiro-code-ondark-border: var(--wiro-dark-border);
  --wiro-code-ondark-fg: #e8e5df;
  --wiro-code-ondark-punct: #8b877d;
  --wiro-code-ondark-name: #e8e5df;
  --wiro-code-ondark-comment: #5c5a52;
  --wiro-code-ondark-keyword: #7ba8d4;
  --wiro-code-ondark-string: #8fbf7a;
  --wiro-code-ondark-number: #cf9060;
  --wiro-code-ondark-method: #6baae0;

  --wiro-code-ondark-link: #a5d6ff;

  --wiro-tag-image-bg: rgb(80 60 160 / 8%);
  --wiro-tag-image-fg: #4a3490;
  --wiro-tag-image-bd: rgb(80 60 160 / 14%);
  --wiro-tag-video-bg: rgb(40 110 180 / 8%);
  --wiro-tag-video-fg: #1a5490;
  --wiro-tag-video-bd: rgb(40 110 180 / 14%);
  --wiro-tag-audio-bg: rgb(180 90 40 / 8%);
  --wiro-tag-audio-fg: #8a4010;
  --wiro-tag-audio-bd: rgb(180 90 40 / 14%);
}

.dark,
.wiro-dark {
  --wiro-bg: #12100d;
  --wiro-bg-warm: #1e1c17;
  --wiro-bg-stone: #211f19;
  --wiro-bg-hover: #201e18;
  --wiro-surface: #171510;
  --wiro-header-bg: var(--wiro-bg);
  --wiro-scrim: rgb(0 0 0 / 60%);
  --wiro-announce-bg: linear-gradient(90deg, #14201a 0%, #1b1626 100%);
  --wiro-surface-frost: rgb(33 31 25 / 86%);
  --wiro-ink: #f7f3ea;
  --wiro-ink2: #d8d1c5;
  --wiro-ink3: #aaa297;
  --wiro-ink4: #89837a;
  --wiro-ink-hover: #e9e3d7;
  --wiro-border: rgb(247 243 234 / 9%);
  --wiro-border-med: rgb(247 243 234 / 14%);
  --wiro-border-strong: rgb(247 243 234 / 24%);
  --wiro-dark: #0e0d0a;
  --wiro-dark-surface: #171510;
  --wiro-dark-border: rgb(247 243 234 / 9%);
  --wiro-dark-border-med: rgb(247 243 234 / 14%);
  --wiro-green: #4caf76;
  --wiro-green-mid: #63c58c;
  --wiro-green-strong: #63c58c;
  --wiro-danger-text: #e08960;
  --wiro-danger: #d9776b;
  --wiro-amber: #dcae55;
  --wiro-blue: #6f97e0;
  --wiro-green-bg: rgb(76 175 118 / 13%);
  --wiro-green-text: #80d8a2;
  --wiro-green-bright: #79e0a0;
  --wiro-green-border: rgb(76 175 118 / 32%);
  --wiro-danger-bg: rgb(224 137 96 / 15%);
  --wiro-danger-border: rgb(224 137 96 / 30%);
  --wiro-amber-text: #dcae55;
  --wiro-amber-bg: rgb(220 174 85 / 16%);
  --wiro-blue-bg: rgb(111 151 224 / 18%);

  --wiro-hover-bg: rgb(247 243 234 / 8%);
  --wiro-hover-border: rgb(247 243 234 / 16%);
  --wiro-focus-ring: 0 0 0 2px rgb(247 243 234 / 12%);
  --wiro-scroll-thumb: rgb(247 243 234 / 14%);
  --wiro-scroll-thumb-hover: rgb(247 243 234 / 24%);
  --wiro-media-action-bg: #0e0d0a;
  --wiro-media-action-bg-hover: #171510;
  --wiro-media-action-fg: #f9f8f5;
  --wiro-media-action-fg-hover: #fff;
  --wiro-media-action-border: rgb(247 243 234 / 12%);
  --wiro-skeleton-base: #211f19;
  --wiro-skeleton-mid: #2a271f;
  --wiro-skeleton-glint: #363229;
  --wiro-skeleton-border: var(--wiro-border);

  --wiro-code-bg: var(--wiro-bg-warm);
  --wiro-code-surface: var(--wiro-surface);
  --wiro-code-border: var(--wiro-border);
  --wiro-code-inline-bg: var(--wiro-bg-stone);
  --wiro-code-fg: var(--wiro-ink);
  --wiro-code-punct: var(--wiro-ink3);
  --wiro-code-name: var(--wiro-ink2);
  --wiro-code-comment: #5c5a52;
  --wiro-code-keyword: #7ba8d4;
  --wiro-code-string: #8fbf7a;
  --wiro-code-number: #cf9060;

  --wiro-tag-image-bg: rgb(150 130 220 / 16%);
  --wiro-tag-image-fg: #c3b0f0;
  --wiro-tag-image-bd: rgb(150 130 220 / 26%);
  --wiro-tag-video-bg: rgb(90 160 220 / 16%);
  --wiro-tag-video-fg: #9fc8ec;
  --wiro-tag-video-bd: rgb(90 160 220 / 26%);
  --wiro-tag-audio-bg: rgb(220 140 80 / 16%);
  --wiro-tag-audio-fg: #e6b088;
  --wiro-tag-audio-bd: rgb(220 140 80 / 26%);
}

:root {
  --wiro-public-max-width: 1280px;
  --wiro-public-page-x: 40px;
  --wiro-public-page-x-mobile: 18px;
  --wiro-public-page-top: 125px;
  --wiro-public-page-top-mobile: 100px;
}

@media screen and (max-width: 767.98px) {
  :root {
    --wiro-public-page-x: 24px;
    --wiro-public-page-top: 100px;
  }
}