/*
 * AmendSignal design tokens. The one place colors, type, spacing, radii, borders
 * and layout widths are defined; every other stylesheet references these.
 * Source: docs/branding.txt. Rules and contrast notes: docs/DESIGN_SYSTEM.md.
 */

/* Fonts: self-hosted variable WOFF2, Latin subset. One file per family covers
   every weight in its range, so there is nothing to choose between at preload. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
}

@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("/assets/fonts/source-serif-4-latin-var.woff2") format("woff2");
}

/* Fallbacks scaled to the web fonts' metrics (#105), so text drawn before a web font
   arrives takes the same room and the swap does not reflow the page. Measured in
   Chrome against the site's own text: average advance width for size-adjust, the web
   font's ascent and descent for the overrides (divided by size-adjust, which scales
   them too). Arial and Georgia ship with macOS and Windows; elsewhere the stack moves
   on to the system fonts, unadjusted. Remeasure if either web font changes. */
@font-face {
    font-family: "Inter fallback";
    font-weight: 400 500;
    src: local("Arial"), local("ArialMT");
    size-adjust: 106.08%;
    ascent-override: 91.44%;
    descent-override: 22.63%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Inter fallback";
    font-weight: 600 700;
    src: local("Arial Bold"), local("Arial-BoldMT");
    size-adjust: 101.44%;
    ascent-override: 95.62%;
    descent-override: 23.66%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Source Serif 4 fallback";
    font-weight: 600 700;
    src: local("Georgia Bold"), local("Georgia-Bold");
    size-adjust: 92.65%;
    ascent-override: 112.25%;
    descent-override: 36.70%;
    line-gap-override: 0%;
}

:root {
    /* Brand */
    --color-navy: #172b46;
    --color-blue: #326da8;
    --color-blue-hover: #285b90;
    --color-steel: #66869d;          /* accents and input borders, never text (3.8:1) */
    --color-pale-blue: #dce5ec;

    /* Neutrals */
    --color-page: #f7f8fa;
    --color-surface: #ffffff;
    --color-text: #202b38;
    --color-text-secondary: #647184; /* AA on page and surface only, not on pale blue */
    --color-text-muted: #8793a1;     /* fails AA as text (3.1:1): disabled controls only */
    --color-border: #e2e7ed;

    /* Reserved for the future status system (docs/branding.txt §4). Defined so the
       values live in one place; not used until a semantic status is designed, and
       never without a text label. */
    --color-status-critical: #c74747;
    --color-status-warning: #d99a27;
    --color-status-caution: #e6c64b;
    --color-status-clear: #38845a;

    /* Roles: components use these, not the raw palette */
    --color-heading: var(--color-navy);
    --color-link: var(--color-blue);
    --color-link-hover: var(--color-blue-hover);
    --color-link-on-tint: var(--color-blue-hover); /* blue on pale blue is 4.2:1 */
    --color-tint: var(--color-pale-blue);
    --color-input-border: var(--color-steel);      /* UI components need 3:1 */
    --color-focus: var(--color-blue);
    --color-separator: var(--color-steel);         /* decorative, never text */

    /* Admin nav (#70): pale text on navy (11.2:1); the current page in white (14.3:1) */
    --color-admin-nav: var(--color-navy);
    --color-admin-nav-text: var(--color-pale-blue);
    --color-admin-nav-current: var(--color-surface);
    --color-admin-nav-marker: var(--color-steel);  /* the current page's bar, decorative */
    --color-focus-on-dark: var(--color-pale-blue); /* blue on navy is too faint to see */

    /* Type families */
    --font-sans: "Inter", "Inter fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Source Serif 4", "Source Serif 4 fallback", Georgia, "Times New Roman", serif;

    /* Type scale. Fluid sizes run from phone to desktop per branding.txt §2. */
    --text-meta: 0.8125rem;                                   /* 13px */
    --text-small: 0.875rem;                                   /* 14px */
    --text-body: 1rem;                                        /* 16px */
    --text-card: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* 17-20px */
    --text-section: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); /* 22-28px */
    --text-article: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);   /* 28-40px */
    --text-page: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);   /* 30-44px */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-body: 1.6;
    --leading-heading: 1.2;
    --leading-tight: 1.35;

    /* Spacing (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Layout */
    --width-page: 72rem;     /* header, footer, listings */
    --width-reading: 42rem;  /* long-form text, about 70 characters a line */
    --width-form: 24rem;     /* short forms such as admin sign-in */
    --width-admin-nav: 14rem;
    --width-admin-nav-folded: 2.5rem;
    --gutter: var(--space-4);

    /* Borders and radii: modest rounding, subtle borders, no shadows */
    --border-width: 1px;
    --border: var(--border-width) solid var(--color-border);
    --radius-small: 3px;
    --radius: 5px;
    --focus-ring: 2px solid var(--color-focus);
    --focus-offset: 2px;

    /* Icons (#96): inline SVG line icons, drawn on a 24-unit grid in currentColor */
    --icon-size: 1rem;
    --icon-stroke: 2;

    /* Logo and header */
    --logo-height: 3rem;    /* the wordmark is about 40% of the lockup's height, so about 1.2rem */
    --header-offset: 5rem;  /* sticky header height plus breathing room, for in-page anchors */

    /* How long a static page's account area waits, blank, for the app before it shows
       the signed-out links anyway (#105, partials/account.php) */
    --account-wait: 1.5s;

    /* Stacking: the only elements that layer */
    --z-header: 10;
    --z-skip-link: 20;
}