/* Design tokens — the Connectify design template (ADR-075 in the product repo),
   light values only: the website is always light, like every other outward
   surface (e-mail, PDF, developer pages). Every colour, radius and shadow on
   the site is decided here; app.css and the scoped stylesheets only refer to
   these names. A literal hex value outside this file is a defect, with one
   exception: pure white on a brand surface.

   The same values live in Connectify.Web/wwwroot/css/tokens.css in the
   product repo — when a value changes there, change it here too. */

/* Inter, served by the site itself (no external font host). Four weights,
   italic is synthesised. Licence: fonts/Inter-LICENSE.txt (SIL OFL 1.1). */
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Inter-Bold.woff2") format("woff2");
}

:root {
    /* Brand */
    --brand-navy: #071a2d;
    --brand-blue: #006cff;
    --brand-cyan: #00d4c7;
    --brand-slate: #5e6b7a;

    /* Surfaces and lines */
    --surface: #f3f6fa;
    --surface-raised: #ffffff;
    --surface-sunken: #e9eef4;
    --line: #dbe3ec;
    --line-strong: #7c8b9b;

    /* Text */
    --ink: #0f1f33;
    --ink-muted: #5e6b7a;
    --ink-subtle: #7f8d9c;
    --ink-inverse: #ffffff;

    /* Action (fill) vs action as text/link, and the accent — a line or an arrow, never text */
    --primary: #006cff;
    --primary-hover: #0059d6;
    --on-primary: #ffffff;
    --primary-text: #005ed9;
    --primary-soft: #e5f0ff;
    --accent: #00d4c7;
    --accent-text: #007a72;
    --accent-soft: #d9f8f5;

    /* Text on the navy brand surfaces (header, hero, footer, call-to-action panel) */
    --on-navy: #e8eef5;
    --on-navy-muted: #c7d4e6;
    --on-navy-subtle: #8fa3ba;
    --navy-line: #16304a;
    --navy-raised: #112d4b;

    /* Status: text on its soft plate, and solid marks for dots and stripes */
    --success: #157347;
    --success-soft: #d8f3e3;
    --warning: #8a5a00;
    --warning-soft: #fff0c7;
    --danger: #c32b2b;
    --danger-soft: #fde3e3;
    --info: #0b5fb5;
    --info-soft: #e0edff;
    --neutral-soft: #e9eef4;
    --mark-success: #1a9c52;
    --mark-warning: #c47a00;
    --mark-danger: #dc3545;
    --mark-muted: #7f8d9c;

    --focus-ring: #006cff;

    /* Plate behind third-party logos: always white, the logos are made for it */
    --logo-plate: #ffffff;

    /* Code blocks: dark */
    --code-bg: #071a2d;
    --code-ink: #e8eef5;
    --code-line: #16304a;

    --shadow-card: 0 1px 3px rgba(7, 26, 45, 0.06), 0 1px 2px rgba(7, 26, 45, 0.04);
    --shadow-menu: 0 6px 18px rgba(7, 26, 45, 0.12);
    --shadow-overlay: 0 18px 60px rgba(7, 26, 45, 0.35);

    /* Spacing: 4 px base */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* Radii by role: md = anything you press or type in, lg = cards,
       xl = tiles, 2xl = large panels */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-pill: 999px;

    --font-sans: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "Cascadia Code", Consolas, Menlo, monospace;

    /* Site layout */
    --nav-height: 64px;
    --container: 1180px;
    --container-narrow: 760px;
    --gutter: clamp(1rem, 4vw, 2rem);
    --section-y: clamp(3.5rem, 8vw, 6rem);
    --section-y-sm: clamp(2.5rem, 5vw, 4rem);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.2s;

    color-scheme: light;
}