/*
 * StoryVale design tokens: the one place to change the look of the app.
 * Brand: "The Quiet Valley" (StoryVale Brand Concepts.pdf, pp. 3–41). See docs/DESIGN.md.
 *
 * Three layers, change them top-down:
 *   1. Brand palette: the named colours from the brand book. Change a hex here and every
 *      use follows.
 *   2. Semantic tokens: what a colour is *for* (page background, primary action, text...).
 *      Re-point these to restyle without touching the palette.
 *   3. Consumers: theme.css maps these onto Bootstrap and the .sr-* components. Component
 *      CSS should use the semantic tokens, never raw hex.
 *
 * Plain CSS custom properties, so the future Next.js customer app (SV-019) can import this
 * file unchanged.
 */

/* Licensed brand fonts go here once we have the files (drop .woff2 into wwwroot/fonts/ and
   uncomment). The font stacks below already list them first, so nothing else changes.
@font-face { font-family: "Kalice"; src: url("../fonts/Kalice-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kalice"; src: url("../fonts/Kalice-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Kalice"; src: url("../fonts/Kalice-Italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Avantt"; src: url("../fonts/Avantt-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Avantt"; src: url("../fonts/Avantt-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Avantt"; src: url("../fonts/Avantt-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
*/

:root {
    /* ---- 1. Brand palette (sampled from the brand book's colour page) ---- */
    --sv-sage: #8EA882;           /* Sage Grove: the anchor colour */
    --sv-sage-deep: #496B57;
    --sv-sage-ink: #34503F;       /* darker step for hover/pressed (derived) */
    --sv-straw: #E8C869;          /* Warm Straw: sunlight, optimism; highlights only */
    --sv-straw-deep: #BF9A3A;
    --sv-periwinkle: #B3BCDF;     /* Periwinkle Mist */
    --sv-periwinkle-deep: #6F82BC;
    --sv-linen: #EDEBE4;          /* Linen White: paper, never pure white */
    --sv-linen-deep: #D4C8B3;
    --sv-cornflower: #7B9EC8;     /* Cornflower Sky */
    --sv-cornflower-deep: #495D89;

    /* Neutrals and states (not in the brand book; chosen to sit with it) */
    --sv-paper: #F7F5F0;          /* raised surfaces on linen */
    --sv-ink: #2E3B33;            /* body text: green-tinted charcoal */
    --sv-ink-muted: #6A7268;
    --sv-rule: #D9D3C6;           /* hairlines, borders */
    --sv-danger: #B5544A;         /* muted terracotta */

    /* ---- 2. Semantic tokens ---- */
    --sv-color-page: var(--sv-linen);
    --sv-color-surface: var(--sv-paper);
    --sv-color-surface-sunken: #E4E0D6;
    --sv-color-text: var(--sv-ink);
    --sv-color-text-muted: var(--sv-ink-muted);
    --sv-color-border: var(--sv-rule);

    --sv-color-primary: var(--sv-sage-deep);         /* buttons, links, active states */
    --sv-color-primary-rgb: 73, 107, 87;             /* keep in step with --sv-sage-deep */
    --sv-color-primary-hover: var(--sv-sage-ink);
    --sv-color-primary-soft: #DCE5D6;                /* tinted backgrounds, badges */
    --sv-color-on-primary: var(--sv-linen);

    --sv-color-accent: var(--sv-straw);              /* small highlights: crowns, underlines */
    --sv-color-info: var(--sv-cornflower-deep);
    --sv-color-info-rgb: 73, 93, 137;
    --sv-color-success: var(--sv-sage-deep);
    --sv-color-warning: var(--sv-straw-deep);
    --sv-color-warning-rgb: 191, 154, 58;
    --sv-color-danger: var(--sv-danger);
    --sv-color-danger-rgb: 181, 84, 74;

    /* Notices (alerts, status badges): a soft tint of each status colour, a border a step deeper, and readable
       text. Without these Bootstrap fell back to its own cyan/green/yellow/red, off-brand (2026-10-18). */
    --sv-color-info-soft: #E7EAF5;                   /* periwinkle mist, lightened */
    --sv-color-info-border: var(--sv-periwinkle);
    --sv-color-info-text: var(--sv-cornflower-deep);
    --sv-color-success-soft: var(--sv-color-primary-soft);
    --sv-color-success-border: var(--sv-sage);
    --sv-color-success-text: var(--sv-sage-ink);
    --sv-color-warning-soft: #F8EFD3;                /* warm straw, lightened */
    --sv-color-warning-border: var(--sv-straw);
    --sv-color-warning-text: #6E561C;                /* straw-deep, darkened to read on its tint */
    --sv-color-danger-soft: #F4E3E0;                 /* terracotta, lightened */
    --sv-color-danger-border: #DDAEA7;
    --sv-color-danger-text: #8A3D35;

    --sv-color-nav: var(--sv-sage-deep);             /* sidebar */
    --sv-color-nav-text: #E6E9DF;
    --sv-color-nav-active: rgba(237, 235, 228, 0.18);
    --sv-color-focus-ring: rgba(142, 168, 130, 0.45);

    /* Type: Kalice for feeling (headings), Avantt for clarity (everything else).
       Fraunces / Albert Sans are free stand-ins until the licensed fonts are added. */
    --sv-font-display: "Kalice", "Fraunces", Georgia, "Times New Roman", serif;
    --sv-font-body: "Avantt", "Albert Sans", "Helvetica Neue", Arial, sans-serif;
    --sv-heading-weight: 400;
    --sv-heading-tracking: -0.01em;

    /* Shape and depth: soft and quiet */
    --sv-radius-sm: 8px;
    --sv-radius: 14px;
    --sv-radius-pill: 999px;
    --sv-shadow: 0 1px 2px rgba(46, 59, 51, 0.06), 0 4px 16px rgba(46, 59, 51, 0.06);
    --sv-shadow-raised: 0 2px 4px rgba(46, 59, 51, 0.08), 0 12px 28px rgba(46, 59, 51, 0.10);
    --sv-scrim: rgba(46, 59, 51, 0.5); /* behind a modal: ink, half see-through */
}