/* ----------------------------------------------------------------------
 * VCG FILE HEADER
 * File:          core/static/brand_style.css
 * Version:       2.8.6
 * Use:           Brand colours, fonts and design tokens.
 * Last modified: 2026-10-29 (v2.8.6 CR-0016)
 * ---------------------------------------------------------------------- */
/* VCG BRAND - tokens and fonts only. Generated from GLOBAL_VCG-BRANDING_CSS.txt. Do not edit here. */

:root {
    /* palette */
    --white:          #ffffff;
    --black:          #0a0a0a;

    --blue-light:     #c6daff;
    --blue-medium:    #5972a8;
    --blue-dark:      #0b307d;
    --blue-accent:    #2563eb;
    --blue-pale:      #e8effd;

    --grey-light:     #e8e9ea;
    --grey-medium:    #cbd5e1;
    --grey-faint:     #b2bbc9;
    --grey-border:    #a7acb4;
    --grey-dark:      #7a8392;

    --green-light:    #5af082;
    --green-medium:   #34984f;
    --green-dark:     #0f782b;
    --green-pale:     #eef8f1;

    --red-light:      #fbd5d5;
    --red-medium:     #ed1111;
    --red-dark:       #a30d0d;
    --red-strong:     #b91c1c;

    --yellow-light:   #faffc2;
    --yellow-medium:  #e5f514;
    --yellow-dark:    #8a6d00;
    --amber-dark:     #b37a00;

    --purple-medium:  #6513b5;
    --purple-dark:    #430c7a;

    --overlay:        rgba(15, 23, 42, 0.70);

    /* roles - components use these, not the palette directly */
    --canvas:         var(--blue-medium);
    --surface:        var(--grey-light);
    --surface-raised: var(--white);
    --text:           var(--black);
    --text-muted:     var(--grey-dark);
    --text-faint:     var(--grey-faint);
    --heading:        var(--blue-dark);
    --border:         var(--grey-border);
    --line:           var(--grey-medium);
    --link:           var(--blue-accent);
    --focus:          var(--blue-accent);
    --highlight:      var(--yellow-medium);

    --ok:             var(--green-dark);
    --ok-bg:          var(--green-light);
    --warn:           var(--yellow-dark);
    --warn-bg:        var(--yellow-light);
    --err:            var(--red-dark);
    --err-bg:         var(--red-light);
    --info:           var(--blue-dark);
    --info-bg:        var(--blue-light);

    /* shadows */
    --shadow-btn:     inset -3px -2px 1px rgb(119 124 170 / 77%);
    --shadow-drop:    1px 1px 5px #082461, 2px -2px 5px #5c70a8;
    --shadow-drop2:   1px 1px 3px #0824615c, 0 1px 5px #5c70a8;

    /* buttons (directive values - final) */
    --btn-border:     #8294ba;
    --btn-rest:       #f2f4f6;
    --h-btn:          1.5rem;

    /* shape */
    --radius:         6px;
    --radius-tab:     8px;
    --select-arrow:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b307d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* type */
    --font:           'Inter', -apple-system, 'Segoe UI', sans-serif;
    --font-brand:     'Crimson Text', Georgia, serif;

    --fs-btn:         0.6rem;
    --fs-sm:          0.7rem;
    --fs-md:          0.8rem;
    --fs-lg:          1rem;

    --fw-body:        400;
    --fw-ui:          550;
    --fw-head:        600;
    --ls-ui:          0.035em;

    /* spacing */
    --sp-1:           0.25rem;
    --sp-2:           0.5rem;
    --sp-4:           1rem;
    --sp-6:           1.5rem;

    /* layers */
    --z-modal:        1000;
    --z-toast:        1100;
}

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

@font-face {
    font-family: 'Crimson Text';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/crimson-text-600-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Crimson Text';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/crimson-text-700-italic.woff2') format('woff2');
}