/* TaalSaga brand foundations: colors + fonts.
   Keep this file as the single source of truth for brand tokens;
   feature CSS should reference these variables instead of raw hex/font values. */

@font-face {
    font-family: "Inglobal";
    src: url("../fonts/inglobal-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inglobal";
    src: url("../fonts/inglobal-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inglobal";
    src: url("../fonts/inglobal-italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Brand palette */
    --color-champagne-mist: #FDF1EF;
    --color-cotton-rose: #F7C6C2;
    --color-dry-sage: #B6B57F;
    --color-pine-teal: #375644;
    --color-rose-wine: #CF4B73;
    /* Pale sage/mint wash — a lighter, greener alternative to the peach
       page background, used for the resources hub section rather than
       site-wide. */
    --color-mint-mist: #E2EAD9;
    /* Soft dusty rose for the navbar band specifically — deliberately its
       own token rather than --color-dry-sage/--color-muted, since that
       one is reused everywhere as muted TEXT (contrast-sensitive) and as
       the Swedish language theme's accent, so lightening it directly
       would wash out text and retint that theme as a side effect. */
    --color-navbar-bg: #F3D9D4;

    /* Semantic roles (adjust as the design settles) */
    --color-background: var(--color-champagne-mist);
    --color-surface: var(--color-cotton-rose);
    --color-accent: var(--color-rose-wine);
    --color-primary: var(--color-pine-teal);
    --color-muted: var(--color-dry-sage);
    --color-text: var(--color-pine-teal);
    --color-text-on-dark: var(--color-champagne-mist);
    /* Behind the logo only. Currently matched to the page background —
       swap this if a distinct header tone is wanted again later. */
    --color-header-bg: #FDF1EF;
    /* Plain white card surface — used where a card needs to stand out
       against a pastel section background instead of blending into it. */
    --color-card-bg: #FFFFFF;

    /* Fonts */
    --font-heading: "Inglobal", "Georgia", serif;
    --font-body: "Source Serif 4", "Georgia", serif;
    /* Handwritten-style captions (hero tags, small notes next to photos).
       Caveat supports Cyrillic, unlike most script fonts. */
    --font-handwritten: "Caveat", cursive;

    color-scheme: light;
}

/* Dark mode. base.html puts data-theme="dark" on <html> — the visitor's
   choice from the ☾ button, else their system setting. The palette
   entries themselves get night versions (deep pine background, light
   sage instead of pine teal, a brighter rose, dark rose instead of
   cotton rose), so every role and language theme built on them follows;
   --color-text-on-dark becomes the dark background colour, which is
   what text on the now-light primary/accent fills needs. */
:root[data-theme="dark"] {
    --color-champagne-mist: #17201C;
    --color-cotton-rose: #4A2F37;
    --color-dry-sage: #C2C18A;
    --color-pine-teal: #A8D0B6;
    --color-rose-wine: #E8799C;
    --color-mint-mist: #1E2B25;
    --color-navbar-bg: #2C2528;

    --color-text: #E3ECE5;
    --color-header-bg: #17201C;
    --color-card-bg: #202B26;

    color-scheme: dark;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    margin: 0;
}

h1, h2, h3, h4, h5, h6,
.btn,
button {
    font-family: var(--font-heading);
}