/*
 * Redesign foundations (BR Stage 1, S1Foundations board). Every v2 colour, size and shadow is a variable here;
 * components never use a raw hex. Clay is reserved for AI; the risk scale never borrows the brand green.
 */
:root {
    /* Brand */
    --ci-deep-forest: #123326;
    --ci-forest: #1E4D3A;
    --ci-moss: #DCE8DF;
    --ci-mint: #9FD3B4;
    --ci-paper: #F5F1E8;
    --ci-surface: #FFFDF8;
    --ci-line: #E3DDD0;
    --ci-ink: #17201B;
    --ci-muted: #5C625D;
    --ci-muted-on-dark: #B9C4BD;
    --ci-star: #C48A1E;
    --ci-white: #FFFFFF;

    /* Named on the board on 30 Oct */
    --ci-field-border: #C9C2B3;
    --ci-disabled-text: #8A8F8B;
    --ci-logo-tile: #EDE6D8;
    --ci-track: #E9E3D7;
    --ci-skeleton: #EDE8DE;

    /* AI only */
    --ci-clay: #B5532F;
    --ci-clay-ink: #9E4527;
    --ci-clay-tint: #F6E2D6;
    --ci-clay-light: #F0A07C;

    /* Risk-return scale: text on tint passes 4.5:1 */
    --ci-level-1-tint: #E2F0E6;  --ci-level-1-text: #2E6B45;  /* Very good / Lowest */
    --ci-level-2-tint: #EAF2DC;  --ci-level-2-text: #456B27;  /* Good / Low */
    --ci-level-3-tint: #F8ECCF;  --ci-level-3-text: #7A5410;  /* Medium; also Warn */
    --ci-level-4-tint: #F8E3D3;  --ci-level-4-text: #9A4A1F;  /* Bad / High */
    --ci-level-5-tint: #F7DFD9;  --ci-level-5-text: #9A3524;  /* Very bad / Highest; also errors */
    --ci-warn-tint: var(--ci-level-3-tint);
    --ci-warn-text: var(--ci-level-3-text);
    --ci-error-tint: var(--ci-level-5-tint);
    --ci-error-text: var(--ci-level-5-text);

    /* Type */
    --ci-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --ci-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ci-display: 500 40px/1.02 var(--ci-serif);
    --ci-h1: 500 32px/1.06 var(--ci-serif);
    --ci-h2: 500 26px/1.1 var(--ci-serif);
    --ci-h3: 600 19px/1.25 var(--ci-serif);
    --ci-body-l: 400 17px/1.55 var(--ci-sans);
    --ci-body: 400 16px/1.5 var(--ci-sans);
    --ci-small: 400 14px/1.45 var(--ci-sans);
    --ci-overline: 600 12px/1.3 var(--ci-sans);
    --ci-caption: 400 12px/1.4 var(--ci-sans);

    /* Spacing */
    --ci-s1: 4px;  --ci-s2: 8px;  --ci-s3: 12px;  --ci-s4: 16px;  --ci-s5: 24px;
    --ci-s6: 32px; --ci-s7: 48px; --ci-s8: 64px;  --ci-s9: 96px;

    /* Radii */
    --ci-r-small: 8px;
    --ci-r-field: 12px;
    --ci-r-card: 18px;
    --ci-r-panel: 24px;
    --ci-r-pill: 999px;

    /* Elevation */
    --ci-shadow-hover: 0 14px 28px rgba(18, 51, 38, .12);
    --ci-shadow-float: 0 24px 48px rgba(18, 51, 38, .18);
    --ci-shadow-toast: 0 14px 28px rgba(18, 51, 38, .16);
    --ci-focus-ring: 0 0 0 3px rgba(30, 77, 58, .18);

    /* Layout */
    --ci-content: 1280px;
    --ci-gutter: 16px;
    --ci-tap: 44px;
}

/* Desktop sizes; phone sizes above are the default (breakpoints 600 and 1024) */
@media (min-width: 600px) {
    :root {
        --ci-gutter: 24px;
    }
}

@media (min-width: 1024px) {
    :root {
        --ci-display: 500 64px/1.02 var(--ci-serif);
        --ci-h1: 500 48px/1.06 var(--ci-serif);
        --ci-h2: 500 36px/1.1 var(--ci-serif);
        --ci-h3: 600 20px/1.25 var(--ci-serif);
        --ci-body-l: 400 18px/1.55 var(--ci-sans);
        --ci-overline: 600 13px/1.3 var(--ci-sans);
        --ci-gutter: 32px;
    }
}