/*
 * AIE Solicitor Directory: design tokens.
 *
 * Mirrors the Abuse Injury Group (AIG) site design "B" adopted on
 * 30 September 2026 (docs/DESIGN_SYSTEM.md). The tokens are scoped to the
 * plugin's own roots - the front-end component root (.aie-ui), the staff
 * screens (.aie-directory-admin) and the WordPress password screens - and are
 * never set on :root, which belongs to the theme.
 *
 * Fonts: every stack names the plain family first ("Manrope", "DM Sans"), so a
 * theme that already serves it under that name is used as it is; otherwise the
 * plugin's own copies ("AIE Manrope", "AIE DM Sans") are. Both are licensed
 * under the SIL Open Font License (assets/fonts/OFL.txt).
 *
 * A theme that serves the same typefaces under a NAME OF ITS OWN - the Abuse
 * Injury Group site calls them "AIG Manrope" and "AIG DM Sans" - will not be
 * matched by those stacks, and the plugin's copies download alongside the
 * theme's. The fix belongs to the theme, not here: --aie-font-heading and
 * --aie-font-body are variables, so one line in the site's own stylesheet
 * settles it, the way that site already overrides --aie-wrap and --aie-gutter.
 * Naming another site's private font alias in this file would tie the plugin
 * to one host.
 */

@font-face {
    font-family: "AIE Manrope";
    src: url("../fonts/manrope-variable.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AIE DM Sans";
    src: url("../fonts/dm-sans-variable.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

.aie-ui,
.aie-directory-admin,
.aie-directory-password-screen {
    /* Brand palette (AIG brand.md, adopted 29 September 2026) */
    --aie-plum: #512C59;            /* headings, primary actions, section menu */
    --aie-plum-mid: #6B3565;
    --aie-plum-blend: #74386B;
    --aie-plum-deep: #412249;       /* hover of every plum control */
    --aie-rose: #A34C78;            /* links, small labels, outline pills (5.44:1 on white) */
    --aie-teal: #277F80;            /* focus ring and guidance accent; never body text on pale */
    --aie-ink: #30233D;             /* body text (14.65:1 on white) */
    --aie-muted: #5E5068;           /* secondary text (7.44:1 on white) */
    --aie-white: #FFFFFF;
    --aie-pale: #FAF6F9;            /* panels */
    --aie-warm: #FFF8F1;            /* page background */
    --aie-cream: #FBEFE6;           /* bands */
    --aie-peach: #FFF1E8;           /* "how this works" note background */
    --aie-line: #E9DCE6;            /* dividers and panel borders (decorative only) */
    --aie-line-card: #F1E1DA;       /* card borders */
    --aie-line-field: #93809A;      /* form field borders: 3.62:1 on white (AIG's #E9DCE6 is 1.33:1) */
    --aie-on-plum-label: #F3D9E7;   /* small labels on plum (8.57:1) */
    --aie-on-plum-wash: rgba(255, 255, 255, 0.14);
    --aie-exit: #192A45;            /* quick exit */
    --aie-exit-deep: #0E1A2E;

    /* Functional colours. AIG defines none; these are derived from its
       palette and measured for WCAG 2.2 AA (see DESIGN_SYSTEM.md). */
    --aie-success-bg: #EAF4F3;
    --aie-success-ink: #1D5E5F;     /* 6.65:1 on its background */
    --aie-success-line: #277F80;
    --aie-error-bg: #FDEDEE;
    --aie-error-ink: #8A1F2B;       /* 8.01:1 on its background */
    --aie-error-line: #B4344A;      /* 5.95:1 on white: borders, icons, danger buttons */
    --aie-notice-bg: #FFF4E0;       /* AIG amber */
    --aie-notice-ink: #5C3D00;      /* 9.08:1 on its background */
    --aie-notice-line: #B07A12;     /* 3.72:1 on white */
    --aie-info-bg: #FAF6F9;
    --aie-info-ink: #30233D;
    --aie-info-line: #512C59;

    /* Type */
    --aie-font-heading: "Manrope", "AIE Manrope", Arial, sans-serif;
    --aie-font-body: "DM Sans", "AIE DM Sans", Arial, sans-serif;
    --aie-text-size: 19px;          /* 17.5px at 860px and below */
    --aie-text-leading: 1.7;
    --aie-heading-leading: 1.15;
    --aie-heading-tracking: -0.02em;
    --aie-label-tracking: 0.12em;

    /* Space (AIG uses these steps; components keep their exact values) */
    --aie-space-1: 4px;
    --aie-space-2: 8px;
    --aie-space-3: 12px;
    --aie-space-4: 16px;
    --aie-space-5: 20px;
    --aie-space-6: 24px;
    --aie-space-7: 28px;
    --aie-space-8: 32px;
    --aie-space-9: 44px;
    --aie-space-10: 56px;
    --aie-space-11: 76px;
    --aie-wrap: 1320px;             /* AIG .wrap, including the gutters */
    --aie-gutter: 32px;             /* 20px at 860px and below */
    --aie-inset: 24px;              /* text inset inside every box, border included (18px at 600px and below) */

    /* Shape */
    --aie-radius-pill: 999px;
    --aie-radius-xl: 28px;
    --aie-radius-lg: 26px;
    --aie-radius-card: 20px;
    --aie-radius-nav: 18px;
    --aie-radius-panel: 16px;
    --aie-radius-box: 14px;
    --aie-radius-field: 12px;
    --aie-radius-small: 8px;

    /* Depth */
    --aie-shadow-card: 0 10px 28px rgba(120, 60, 90, 0.10);
    --aie-shadow-card-hover: 0 14px 32px rgba(81, 44, 89, 0.16);
    --aie-shadow-raised: 0 14px 40px rgba(120, 60, 90, 0.12);
    --aie-shadow-menu: 0 16px 40px rgba(48, 35, 61, 0.18);

    /* Focus and motion */
    --aie-focus-ring: 3px solid #277F80;
    --aie-focus-ring-on-colour: 3px solid #FFFFFF;
    --aie-duration: 0.15s;
    --aie-easing: ease;
    --aie-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

@media (max-width: 860px) {
    .aie-ui {
        --aie-text-size: 17.5px;
        --aie-gutter: 20px;
    }
}

@media (max-width: 600px) {
    .aie-ui {
        --aie-inset: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aie-ui,
    .aie-directory-admin,
    .aie-directory-password-screen {
        --aie-duration: 0.01ms;
        --aie-transition: none;
    }
}