@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ubuntu/Ubuntu-L.ttf") format("truetype");
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ubuntu/Ubuntu-M.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --font-sans:
    "Ubuntu",
    "Ubuntu Light",
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --font-display:
    "Ubuntu",
    "Ubuntu Medium",
    var(--font-sans);
  --font-logo:
    "NovitoNova",
    "NovitoNova Regular",
    var(--font-display);
  --color-ink: #663300;
  --color-ink-soft: #825629;
  --color-paper: #ede4da;
  --color-paper-warm: #f7f1ea;
  --color-paper-muted: #e4dbd1;
  --color-paper-pressed: #d9cec1;
  --color-line: #d1c3b4;
  --color-line-strong: #b89f86;
  --color-brand-blue: #336699;
  --color-brand-blue-strong: #244f78;
  --color-brand-blue-soft: #d8e5f2;
  --color-brand-brown: #663300;
  --color-brand-brown-strong: #4d2600;
  --color-brand-brown-soft: #ead8c7;
  --color-amber: #94611b;
  --color-amber-strong: #663300;
  --color-amber-soft: #f2dfbf;
  --color-red: #9c3b2f;
  --color-red-strong: #6e281f;
  --color-red-soft: #f8dfdc;
  --color-bg: var(--color-paper);
  --color-bg-accent: var(--color-paper-muted);
  --color-surface: var(--color-paper-warm);
  --color-surface-muted: var(--color-paper-muted);
  --color-surface-strong: #ffffff;
  --color-nav-surface: rgb(237 228 218 / 94%);
  --color-modal-backdrop: rgb(102 51 0 / 52%);
  --color-border: var(--color-line);
  --color-border-strong: var(--color-line-strong);
  --color-text: var(--color-ink);
  --color-muted: var(--color-ink-soft);
  --color-primary: var(--color-brand-blue);
  --color-primary-strong: var(--color-brand-blue-strong);
  --color-primary-soft: var(--color-brand-blue-soft);
  --color-accent: var(--color-brand-brown);
  --color-accent-strong: var(--color-brand-brown-strong);
  --color-accent-soft: var(--color-brand-brown-soft);
  --color-blue: var(--color-brand-blue);
  --color-blue-strong: var(--color-brand-blue-strong);
  --color-blue-soft: var(--color-brand-blue-soft);
  --color-success: var(--color-brand-blue);
  --color-success-strong: var(--color-brand-blue-strong);
  --color-success-soft: var(--color-brand-blue-soft);
  --shadow-hairline: 0 1px 0 rgb(255 255 255 / 72%);
  --shadow-soft: 0 12px 30px rgb(102 51 0 / 10%);
  --shadow-raised: 0 18px 42px rgb(102 51 0 / 16%);
  --radius-sm: 4px;
  --radius-md: 8px;
  --page-max: 1180px;
  --nav-height: 76px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --focus-ring: 0 0 0 3px rgb(51 102 153 / 30%);
}