/*
 * AAMV design system: tokens (docs/design/DESIGN_SYSTEM.md, §2).
 * The only file allowed to contain raw colors and sizes. Everything else uses var(--a-…).
 */
:root {
    /* Colors */
    --a-ink: #1E2B45;
    --a-ink-2: #36425C;
    --a-muted: #4A5670;
    --a-paper: #FFF9F0;
    --a-card: #FFFFFF;
    --a-field: #FFFDF9;
    --a-line: #EFE3CF;
    --a-line-strong: #D8CBB6;
    --a-field-border: #9A8A70;  /* border of the fields, checkboxes and radios: 3.3:1 on --a-field (WCAG 1.4.11) */
    --a-line-dashed: #B9AE9C;   /* dashed outline of an inactive day */
    --a-shadow: #F2E6D2;
    --a-shadow-strip: #EADBC2;
    --a-sand: #F3ECE0;

    --a-sun: #FFC83D;   --a-sun-soft: #FFF1C7;   --a-sun-ink: #6B4E00;   --a-sun-light: #FFE08A;
    --a-coral: #C73E22; --a-coral-soft: #FFE3DA; --a-coral-ink: #A8321A; --a-coral-star: #D9482B; --a-coral-avatar: #FFD1C4;
    --a-coral-faint: #FFF6F2;  /* preview rows of .a-locked */
    --a-sky: #2764A8;   --a-sky-soft: #E1ECFA;   --a-sky-ink: #1D4F86;   --a-sky-avatar: #BFD6F2;
    --a-sky-light: #EAF1FB;    /* body text on a solid sky card */
    --a-leaf: #2F7D4F;  --a-leaf-soft: #DFF2E6;  --a-leaf-ink: #1F5E3A;  --a-leaf-avatar: #CDEBD8;
    --a-leaf-light: #E3F3E9;   /* body text on a solid leaf card */
    --a-leaf-faint: #F4FAF6;

    --a-on-dark: #E7EAF1;      /* footer text */
    --a-on-dark-line: rgba(231, 234, 241, .18);
    --a-white: #FFFFFF;
    --a-veil: rgba(255, 249, 240, .55);   /* inactive tab on a soft band */

    /* Typography */
    --a-font-display: 'Baloo 2', 'Nunito', sans-serif;
    --a-font-body: 'Nunito', system-ui, sans-serif;
    --a-fs-base: 18px;   --a-lh: 1.55;
    --a-fs-small: 15px;  --a-fs-xs: 14px;  --a-fs-field: 17px;  --a-fs-lead: 20px;  --a-fs-row: 19px;
    --a-fs-h1: 58px;  --a-fs-h1-hero: 66px;  --a-fs-h2: 44px;  --a-fs-h3: 26px;  --a-fs-h4: 21px;  --a-fs-card-title: 24px;

    /* Spacing, shapes */
    --a-container: 1200px;  --a-container-pad: 24px;  --a-gutter: 24px;
    --a-measure: 68ch;   /* line length of running text (.a-measure) */
    --a-section: 80px;  --a-section-mobile: 48px;
    --a-pad-card: 28px; --a-pad-card-mobile: 20px;
    --a-radius-card: 24px;  --a-radius-field: 16px;  --a-radius-tile: 16px;  --a-radius-pill: 999px;
    --a-h-btn: 48px;  --a-h-btn-lg: 56px;  --a-h-field: 56px;
    --a-h-utility: 44px;  --a-h-header: 96px;  --a-h-header-mobile: 72px;
    --a-border: 2px;
    --a-shadow-card: 0 6px 0 var(--a-shadow);
    --a-shadow-strip-box: 0 8px 0 var(--a-shadow-strip);
    --a-shadow-btn: 4px 4px 0 var(--a-ink);
    --a-ring: 0 0 0 3px var(--a-sun);

    /* Same colors as rgb triplets, for Bootstrap's --bs-*-rgb variables */
    --a-ink-rgb: 30, 43, 69;  --a-coral-rgb: 199, 62, 34;  --a-sky-rgb: 39, 100, 168;  --a-leaf-rgb: 47, 125, 79;
    --a-sun-rgb: 255, 200, 61;  --a-coral-ink-rgb: 168, 50, 26;  --a-paper-rgb: 255, 249, 240;  --a-muted-rgb: 74, 86, 112;

    /* Chevron of selects (Bootstrap .form-select, Select2), in --a-ink */
    --a-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%231E2B45' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    /* Error icon of invalid fields (bootstrap.css .is-invalid), in --a-coral-ink */
    --a-invalid-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23A8321A'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23A8321A' stroke='none'/%3e%3c/svg%3e");
    --a-ease: .15s ease;
}

@media (max-width: 767.98px) {
    :root {
        --a-fs-base: 17px;
        --a-fs-h1: 40px;  --a-fs-h1-hero: 40px;  --a-fs-h2: 30px;  --a-fs-h3: 22px;  --a-fs-h4: 19px;  --a-fs-card-title: 21px;
        --a-fs-lead: 18px;  --a-fs-row: 17px;
        --a-container-pad: 20px;
        --a-section: var(--a-section-mobile);
        --a-pad-card: var(--a-pad-card-mobile);
    }
}