@font-face {
    font-family: 'Lufga';
    src: url("../fonts/LufgaRegular-gvYIcVJ.woff2") format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url("../fonts/LufgaMedium-uco4Myw.woff2") format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Lufga';
    src: url("../fonts/LufgaBold--pnQGcU.woff2") format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url("../fonts/PlayfairDisplayVariableFont-9zGKZTb.woff2") format('woff2');
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src: url("../fonts/CharterRoman-hjETiyp.woff2") format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src: url("../fonts/CharterBold-vtITaS3.woff2") format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Primitive tokens mirrored from Flutter MyColor, MyDimen and MyConst. */
    --primitive-white: #fff;
    --primitive-black: #000;
    --primitive-ink: #333;
    --primitive-grey: #9a9a9a;
    --primitive-disabled: #a8a9a8;
    --primitive-orange: #f37022;
    --primitive-deep: #032119;
    --primitive-deep-rgb: 3, 33, 25;
    --primitive-aqua: #81d9d0;
    --primitive-danger: #b90b27;
    --primitive-surface: #dddedb;
    --primitive-field: #eaeaea;
    --primitive-line: #bbb;
    --primitive-stripe: #999;

    --primitive-space-quarter: 4.5px;
    --primitive-space-half: 9px;
    --primitive-space-three-quarter: 13.5px;
    --primitive-space-base: 18px;
    --primitive-space-double: 36px;
    --primitive-space-triple: 54px;
    --primitive-space-quadruple: 72px;

    --primitive-font-mini-minus: 9px;
    --primitive-font-mini: 11px;
    --primitive-font-average: 12px;
    --primitive-font-base: 15px;
    --primitive-font-plus: 17px;
    --primitive-font-plus-plus: 19px;
    --primitive-font-big: 23px;
    --primitive-font-very-big: 31px;

    --primitive-radius-button: 6px;
    --primitive-radius-default: 10px;
    --primitive-radius-pill: 30px;
    --primitive-content-width: 1080px;
    --primitive-side-rail: 220px;

    /* Semantic tokens. */
    --color-background: var(--primitive-surface);
    --color-foreground: var(--primitive-black);
    --color-text: var(--primitive-ink);
    --color-muted: var(--primitive-grey);
    --color-primary: var(--primitive-orange);
    --color-primary-foreground: var(--primitive-white);
    --color-inverse: var(--primitive-deep);
    --color-inverse-foreground: var(--primitive-white);
    --color-accent: var(--primitive-aqua);
    --color-focus: #006fc9;
    --color-danger: var(--primitive-danger);
    --color-success-strong: #087a3f;
    --color-border: var(--primitive-black);
    --color-separator: var(--primitive-line);
    --color-field: var(--primitive-field);
    --color-copy: rgb(var(--primitive-deep-rgb) / 72%);
    --color-copy-muted: rgb(var(--primitive-deep-rgb) / 58%);
    --color-border-subtle: rgb(var(--primitive-deep-rgb) / 16%);
    --color-border-strong: rgb(var(--primitive-deep-rgb) / 24%);
    --color-control-border: #404040;

    --space-1: var(--primitive-space-quarter);
    --space-2: var(--primitive-space-half);
    --space-3: var(--primitive-space-three-quarter);
    --space-4: var(--primitive-space-base);
    --space-6: var(--primitive-space-double);
    --space-8: var(--primitive-space-triple);
    --space-12: var(--primitive-space-quadruple);
    --space-16: 90px;
    --radius-sm: var(--primitive-radius-button);
    --radius-md: var(--primitive-radius-default);
    --radius-pill: var(--primitive-radius-pill);
    --content-max: var(--primitive-content-width);
    --rail-width: var(--primitive-side-rail);
    --content-column-max: calc(var(--content-max) - (2 * var(--rail-width)));
    --content-gutter: clamp(var(--space-4), 8vw, var(--space-6));
    --section-flow: clamp(var(--space-6), 7vw, var(--space-8));
    --shadow: 0 4px 12px rgb(0 0 0 / 10%);

    /* Component tokens. */
    --header-height: 100px;
    --button-height: 50px;
    --button-radius: var(--primitive-radius-button);
    --button-pill-height: 40px;
    --button-pill-radius: var(--primitive-radius-pill);
    --input-height: 58px;
    --input-border: 1px solid rgba(var(--primitive-deep-rgb), 0.48);
    --separator-rule: linear-gradient(
        to bottom,
        var(--color-separator) 0,
        var(--color-separator) 1px,
        var(--primitive-white) 1px,
        var(--primitive-white) 2px
    );
    --separator-rule-vertical: linear-gradient(
        to right,
        var(--color-separator) 0,
        var(--color-separator) 1px,
        var(--primitive-white) 1px,
        var(--primitive-white) 2px
    );
    --font-body: 'Lufga', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Playfair Display', serif;
    --font-amount: 'Charter', Georgia, 'Times New Roman', serif;
    --section-padding-x: var(--primitive-space-double);
    --section-padding-y: var(--primitive-space-base);

    --referral-background: #0c0c0e;
    --referral-surface: #181819;
    --referral-text: #f0ebe2;
    --referral-muted: #c4b8a5;
    --referral-gold: #c8a96e;
    --referral-line: rgb(200 169 110 / 26%);

    /* Compatibility aliases used by existing components. */
    --color-surface: var(--color-background);
    --color-surface-raised: var(--color-field);
    --color-ink: var(--color-text);
    --color-brand: var(--color-primary);
    --color-brand-ink: var(--color-primary-foreground);
    --color-deep: var(--color-inverse);
    --color-aqua: var(--color-accent);
    --color-success: #1ca22b;
}
