@font-face { font-family: "Yeseva One"; src: url("../fonts/yeseva-one-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/be-vietnam-pro-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/be-vietnam-pro-semibold-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ln-milk: #f7f1ec;
  --ln-milk-deep: #efe4da;
  --ln-ballet: #f3ddd6;
  --ln-paper: #fffcf9;
  --ln-rule: #dccabd;
  --ln-ink: #241a17;
  --ln-ink-muted: #6a5650;
  --ln-ultramarine: #23308f;
  --ln-ultramarine-deep: #18216a;
  --ln-on-ultramarine: #f7f1ec;
  --ln-on-ultramarine-muted: #cdd1f2;
  --ln-espresso: #241a17;
  --ln-espresso-soft: #352925;
  --ln-on-espresso: #f7f1ec;
  --ln-on-espresso-muted: #c9b9af;
  --ln-error: #a3262a;
  --ln-shade-milk: #f4ece4;
  --ln-shade-ballet: #efcfc7;
  --ln-shade-nude: #dcb7a3;
  --ln-shade-rose: #c78f87;
  --ln-shade-mauve: #9a6a76;
  --ln-shade-smoke: #7b7d92;
  --ln-shade-ultramarine: #23308f;
  --ln-shade-ink: #1c1b3c;
  --ln-shade-chrome: #c8ccd4;
  --ln-gloss: #ffffff8c;
  --ln-display: "Yeseva One", "Didot", Georgia, serif;
  --ln-text: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --ln-inset: clamp(1rem, 4vw, 3.5rem);
  --ln-wide: 84rem;
  --ln-gutter: max(var(--ln-inset), calc((100% - var(--ln-wide)) / 2 + var(--ln-inset)));
  --ln-ease: cubic-bezier(.22, .68, .18, 1);
  --ln-arch: 50% 50% 1.25rem 1.25rem / 34% 34% 1.25rem 1.25rem;

  --ui-color-background: var(--ln-milk);
  --ui-color-surface: var(--ln-paper);
  --ui-color-text: var(--ln-ink);
  --ui-color-muted: var(--ln-ink-muted);
  --ui-color-border: var(--ln-rule);
  --ui-color-accent: var(--ln-ultramarine);
  --ui-color-accent-text: var(--ln-on-ultramarine);
  --ui-color-error: var(--ln-error);
  --ui-font-body: var(--ln-text);
  --ui-font-heading: var(--ln-display);
  --ui-size-body: 1rem;
  --ui-size-icon: 1.25rem;
  --ui-space-sm: .5rem;
  --ui-space-md: 1rem;
  --ui-space-lg: 2rem;
  --ui-radius-control: .75rem;
  --ui-radius-surface: 1.25rem;
  --ui-border-width: 1px;
}

.ln-shade--milk { color: var(--ln-shade-milk); }
.ln-shade--ballet { color: var(--ln-shade-ballet); }
.ln-shade--nude { color: var(--ln-shade-nude); }
.ln-shade--rose { color: var(--ln-shade-rose); }
.ln-shade--mauve { color: var(--ln-shade-mauve); }
.ln-shade--smoke { color: var(--ln-shade-smoke); }
.ln-shade--ultramarine { color: var(--ln-shade-ultramarine); }
.ln-shade--ink { color: var(--ln-shade-ink); }
.ln-shade--chrome { color: var(--ln-shade-chrome); }