/* Doctor Brusov — global CSS. Webfonts load via <link> in the page head. */
:root{
  --font-ui:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-display:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

:root{
  /* Base — Porcelain (cool light neutrals) */
  --porcelain-000:#FFFFFF;
  --porcelain-050:#F7F8F8;
  --porcelain-100:#EEF1F2;
  --porcelain-200:#E1E6E8;
  --porcelain-300:#CCD4D7;

  /* Base — Graphite (ink + dark surfaces) */
  --graphite-900:#14191C;
  --graphite-800:#1B2226;
  --graphite-700:#262F34;
  --graphite-600:#3A464C;
  --graphite-500:#5B686E;
  --graphite-400:#7E8A90;
  --graphite-300:#A7B1B6;
  --graphite-200:#C9D0D3;

  /* Base — Steel (the single accent) */
  --steel-700:#23485E;
  --steel-600:#2E5872;
  --steel-500:#3A6480;
  --steel-400:#5A8099;
  --steel-200:#B9CBD8;
  --steel-100:#DFEAF1;

  /* Base — Sand (warm secondary surface, used sparingly) */
  --sand-100:#F1EBE1;
  --sand-200:#E4DACB;
  --sand-300:#D3C6B2;

  /* Base — Sage (accent on dark surfaces only) */
  --sage-300:#A9C0A6;
  --sage-500:#6E8A6B;

  /* Base — Semantic hues */
  --green-600:#2F7A55;
  --green-100:#E0F0E7;
  --amber-600:#A8802A;
  --amber-100:#F7EED6;
  --red-600:#A8443C;
  --red-100:#F6E3E0;

  /* Semantic — text */
  --text-strong:var(--graphite-900);
  --text-body:var(--graphite-700);
  --text-muted:var(--graphite-500);
  --text-faint:#606C72; /* graphite-400 was 3.5:1 on white — below WCAG AA for small text */
  --text-on-dark:#EDEFF0;
  --text-on-dark-muted:#A7B1B6;
  --text-on-accent:#FFFFFF;
  --text-accent:var(--steel-600);
  --text-link:var(--steel-600);
  --text-link-hover:var(--graphite-900);

  /* Semantic — surfaces */
  --surface-page:var(--porcelain-050);
  --surface-card:var(--porcelain-000);
  --surface-sunken:var(--porcelain-100);
  --surface-tint:var(--steel-100);
  --surface-warm:var(--sand-100);
  --surface-inverse:var(--graphite-900);
  --surface-inverse-soft:var(--graphite-800);
  --surface-media:var(--porcelain-200);
  --surface-overlay:rgba(20,25,28,.58);

  /* Semantic — lines (the system draws with lines, not shadows) */
  --border-hairline:#E1E6E8;
  --border-soft:var(--porcelain-300);
  --border-strong:var(--graphite-300);
  --border-ink:var(--graphite-900);
  --border-accent:var(--steel-500);
  --border-inverse:rgba(237,239,240,.16);
  --border-focus:var(--steel-500);

  /* Semantic — action */
  --action-primary:var(--graphite-900);
  --action-primary-hover:var(--steel-700);
  --action-primary-active:var(--graphite-800);
  --action-accent:var(--steel-500);
  --action-accent-hover:var(--steel-600);
  --action-accent-active:var(--steel-700);
  --action-quiet-hover:var(--porcelain-100);
  --action-disabled-bg:var(--porcelain-200);
  --action-disabled-text:var(--graphite-400);

  /* Semantic — status */
  --status-success-fg:var(--green-600);
  --status-success-bg:var(--green-100);
  --status-warning-fg:var(--amber-600);
  --status-warning-bg:var(--amber-100);
  --status-danger-fg:var(--red-600);
  --status-danger-bg:var(--red-100);
  --status-info-fg:var(--steel-600);
  --status-info-bg:var(--steel-100);
}

/* Dark theme — "Grafit". Apply to a section or the page: <div data-theme="graphite"> */
[data-theme="graphite"]{
  --text-strong:#EDEFF0;
  --text-body:#D3D8DA;
  --text-muted:var(--graphite-300);
  --text-faint:var(--graphite-400);
  --text-accent:var(--sage-300);
  --text-link:var(--sage-300);
  --text-link-hover:#EDEFF0;
  --text-on-accent:var(--graphite-900);
  --surface-page:var(--graphite-900);
  --surface-card:var(--graphite-800);
  --surface-sunken:#101417;
  --surface-tint:var(--graphite-700);
  --surface-warm:var(--graphite-700);
  --surface-inverse:var(--porcelain-050);
  --surface-inverse-soft:var(--porcelain-100);
  --surface-media:var(--graphite-700);
  --border-hairline:rgba(237,239,240,.13);
  --border-soft:rgba(237,239,240,.20);
  --border-strong:var(--graphite-500);
  --border-ink:#EDEFF0;
  --border-accent:var(--sage-300);
  --action-primary:var(--sage-300);
  --action-primary-hover:#BFD3BC;
  --action-primary-active:var(--sage-500);
  --action-accent:var(--sage-300);
  --action-accent-hover:#BFD3BC;
  --action-accent-active:var(--sage-500);
  --action-quiet-hover:var(--graphite-700);
  --action-disabled-bg:var(--graphite-700);
  --action-disabled-text:var(--graphite-400);
}

/* Warm theme — "Ľan". For editorial / long-read sections: <section data-theme="linen"> */
[data-theme="linen"]{
  --surface-page:var(--sand-100);
  --surface-card:#FBF8F3;
  --surface-sunken:var(--sand-200);
  --surface-media:var(--sand-200);
  --surface-tint:var(--sand-200);
  --border-hairline:var(--sand-200);
  --border-soft:var(--sand-300);
}

:root{
  /* Sizes. Display roles use IBM Plex Serif; UI and body use IBM Plex Sans. */
  --text-display-1:60px;
  --text-display-2:44px;
  --text-display-3:34px;
  --text-title-1:27px;
  --text-title-2:22px;
  --text-title-3:19px;
  --text-body-lg:18px;
  --text-body:16px;
  --text-body-sm:14px;
  --text-caption:13px;
  --text-micro:11px;

  --leading-tight:1.1;
  --leading-snug:1.24;
  --leading-normal:1.45;
  --leading-relaxed:1.62;

  --tracking-display:-0.01em;
  --tracking-title:-0.005em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-label:0.08em;
  --tracking-eyebrow:0.18em;
  --tracking-wordmark:0.14em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Semantic roles */
  --type-hero-family:var(--font-display);
  --type-hero-size:var(--text-display-1);
  --type-hero-weight:var(--weight-400,400);
  --type-eyebrow-size:var(--text-micro);
  --type-eyebrow-tracking:var(--tracking-eyebrow);
  --type-label-size:var(--text-caption);
  --type-label-tracking:var(--tracking-label);
  --type-numeric-family:var(--font-mono);
}

:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Layout */
  --page-max:1200px;
  --page-narrow:720px;
  --gutter-desktop:var(--space-10);
  --gutter-mobile:var(--space-5);
  --section-y-desktop:var(--space-24);
  --section-y-mobile:var(--space-16);
  --header-h:76px;
  --field-h:48px;
  --tap-min:44px;
}

:root{
  /* The brand is square. 2px is the maximum on interactive surfaces;
     --radius-pill exists only for status dots and pagination bullets. */
  --radius-none:0px;
  --radius-xs:2px;
  --radius-pill:999px;
  --radius-card:var(--radius-none);
  --radius-field:var(--radius-none);
  --radius-button:var(--radius-none);
  --radius-media:var(--radius-none);
  --radius-chip:var(--radius-xs);
}

:root{
  /* Elevation is a last resort: the system separates with 1px lines.
     Shadows appear only on layers that float above the page (dialog, dropdown, sticky bar). */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(20,25,28,.06);
  --shadow-sm:0 2px 8px -2px rgba(20,25,28,.10);
  --shadow-float:0 12px 32px -12px rgba(20,25,28,.26);
  --shadow-inset-field:inset 0 1px 0 rgba(20,25,28,.04);
  --ring-focus:0 0 0 2px var(--surface-card),0 0 0 4px var(--steel-500);
  --ring-danger:0 0 0 2px var(--surface-card),0 0 0 4px var(--red-600);
  --border-width-hairline:1px;
  --border-width-strong:2px;
}

:root{
  --dur-instant:90ms; /* @kind other */
  --dur-fast:160ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:360ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.7,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.5,0,.9,.3); /* @kind other */
  --lift-hover:-2px;
  --press-scale:.985; /* @kind other */
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);color:var(--text-strong);font-weight:var(--weight-regular);letter-spacing:var(--tracking-title);margin:0;text-wrap:pretty}
h1{font-size:var(--text-display-2);line-height:var(--leading-tight);letter-spacing:var(--tracking-display)}
h2{font-size:var(--text-display-3);line-height:var(--leading-snug)}
h3{font-size:var(--text-title-2);line-height:var(--leading-snug)}
h4{font-family:var(--font-ui);font-size:var(--text-title-3);font-weight:var(--weight-semibold);color:var(--text-strong);line-height:var(--leading-snug);margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--steel-200);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);border-color:var(--border-ink)}
button{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.db-eyebrow{font-family:var(--font-ui);font-size:var(--text-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--text-accent)}
.db-label{font-size:var(--text-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--text-muted)}
.db-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.db-wordmark{font-family:var(--font-display);font-weight:var(--weight-medium);letter-spacing:.01em;color:var(--text-strong)}
.db-wordmark::after{content:".";color:var(--text-accent)}
.db-wordmark-sub{font-family:var(--font-ui);font-size:var(--text-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}