/* Design tokens: the single source of truth for colour, space and type.
   Bootstrap's utility scales (m-3, p-5, display-6) are gone, so the spacing
   and type steps below have to carry that weight. */
:root {
    color-scheme: dark;

    /* Surfaces and ink.

       Warm, not slate: the front page is the Linktree's ember gradient, and a
       blue-grey imprint behind it reads as a different site. These are the same
       hue family dropped to a brightness a long legal text can be read on --
       matching the gradient itself would be identity at the cost of legibility. */
    --app-bg: #1c110d;
    --app-bg-soft: #241612;
    --app-surface: rgba(28, 17, 13, 0.78);
    --app-surface-solid: #2a1913;
    --app-surface-raised: rgba(66, 38, 28, 0.62);
    --app-border: rgba(233, 176, 150, 0.20);
    --app-border-strong: rgba(233, 176, 150, 0.40);
    --app-text: #f2e7e1;
    --app-text-strong: #fff8f4;
    --app-muted: #c4a89b;

    /* Accent: links, kickers, focus. Light enough to clear AA on the dark
       ground, which the deep ember below is not. */
    --app-primary: #f97316;
    --app-primary-soft: #fdba74;
    --app-primary-contrast: #ffffff;
    --app-focus: #fdba74;

    /* The filled button, and the one place the Linktree's own ember pair is
       reused verbatim (see linktree.css). It is a separate pair from --app-primary
       on purpose: a colour dark enough to carry white text is too dark to be a
       link on --app-bg, and one value cannot be both. */
    --app-accent-from: #c2410c;
    --app-accent-to: #7f1d1d;
    --app-accent-hover: #9a3412;
    --app-accent-ink: #ffffff;

    /* Status */
    --app-success: #4ade80;
    --app-warning: #fbbf24;
    --app-error: #f87171;
    --app-info: var(--app-primary-soft);

    /* Space scale */
    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.5rem;
    --app-space-6: 2rem;
    --app-space-7: 3rem;
    --app-space-8: 4rem;

    /* Type scale */
    --app-text-xs: 0.75rem;
    --app-text-sm: 0.875rem;
    --app-text-base: 1rem;
    --app-text-lg: 1.125rem;
    --app-text-xl: 1.5rem;
    --app-text-2xl: 2rem;
    --app-text-3xl: 2.75rem;

    /* Shape */
    --app-radius-sm: 0.6rem;
    --app-radius: 1.25rem;
    --app-radius-pill: 999px;
    --app-shadow: 0 24px 80px rgba(12, 7, 5, 0.46);
    --app-shadow-sm: 0 12px 34px rgba(12, 7, 5, 0.28);

    --app-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --app-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}