/* Design tokens of AstroDiary: the same values as tokens.json, change both together.
   Dark is the brand's home; [data-theme="light"] is the day mode. */
@font-face {
    font-family: "Cormorant Garamond";
    src: url("fonts/cormorant-garamond-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("fonts/cormorant-garamond-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("fonts/cormorant-garamond-500-italic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/inter-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/inter-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/inter-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-primary: #D4B26A;
    --color-on-primary: #08070D;
    --color-secondary: #6E5A8A;
    --color-on-secondary: #E9E4D8;
    --color-background: #08070D;
    --color-surface: #1A1626;
    --color-surface-raised: #241F33;
    --color-border: #2E2840;
    --color-text: #E9E4D8;
    --color-muted: #8F879F;
    --color-success: #6FBF8E;
    --color-warning: #E89B4C;
    --color-error: #E5736B;
    --color-info: #7FA3D9;

    --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
    --text-display: 3.5rem;
    --text-h1: 3rem;
    --text-h2: 2.125rem;
    --text-h3: 1.5rem;
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-label: 0.75rem;
    --leading-display: 1.05;
    --leading-h1: 1.1;
    --leading-h2: 1.15;
    --leading-h3: 1.25;
    --leading-body: 1.6;
    --leading-small: 1.5;
    --leading-label: 1.4;
    --leading: 1.6;
    --tracking-label: 0.14em;
    --tracking-wordmark: 0.22em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 64px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow: 0 12px 32px rgb(0 0 0 / 0.45);
    --hairline: 1px solid var(--color-border);
    --duration-fast: 160ms;
    --duration-base: 240ms;
    --duration-slow: 600ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    color-scheme: dark;
}

[data-theme="light"] {
    --color-primary: #7D5F1F;
    --color-on-primary: #F3EFE6;
    --color-secondary: #5A4878;
    --color-on-secondary: #F3EFE6;
    --color-background: #F3EFE6;
    --color-surface: #E9E4D8;
    --color-surface-raised: #FBF9F4;
    --color-border: #D6CFBF;
    --color-text: #14111D;
    --color-muted: #5E566C;
    --color-success: #2B7049;
    --color-warning: #9A5B12;
    --color-error: #B23A33;
    --color-info: #2F5E9E;
    --shadow: 0 8px 24px rgb(20 17 29 / 0.12);
    color-scheme: light;
}