/* ====================================================================================
   Kall8 design tokens (Kall8.Web.Shared)
   Served at ~/_content/Kall8.Web.Shared/css/k8-tokens.css. Load AFTER bootstrap.min.css
   and BEFORE the site's own stylesheet so the site can override.

   Contrast: the brand green #9AB13F is 2.4:1 on white, so it is DECORATIVE only (fills,
   rules, backgrounds behind dark text). Text, links and outline buttons on white use
   --k8-green-text (#6F8A1A, 4.6:1). Solid brand-green buttons carry DARK text.
   ==================================================================================== */

:root {
    /* Brand */
    --k8-green: #9AB13F;            /* decorative brand green */
    --k8-green-dark: #83981F;       /* hover fill behind dark text */
    --k8-green-text: #6F8A1A;       /* links / text / outline buttons on white (AA) */
    --k8-green-text-hover: #55690F; /* hover state of the above */
    --k8-green-soft: #F1F5E4;       /* light green tint */
    --k8-green-soft-2: #E3EBC7;

    /* Neutrals */
    --k8-dark: #1F2937;             /* headings, dark text, footer */
    --k8-dark-2: #111827;           /* footer bottom strip */
    --k8-grey-900: #111827;
    --k8-grey-800: #1F2937;
    --k8-grey-700: #374151;         /* body text */
    --k8-grey-600: #4B5563;         /* secondary text (7:1) */
    --k8-grey-500: #6B7280;         /* muted text (4.6:1) */
    --k8-grey-400: #9CA3AF;         /* placeholders, decorative only */
    --k8-grey-300: #D1D5DB;         /* borders */
    --k8-grey-200: #E5E7EB;         /* dividers */
    --k8-grey-100: #F3F4F6;         /* light panels */
    --k8-grey-50: #F9FAFB;          /* page bands */
    --k8-white: #FFFFFF;

    /* Accents */
    --k8-blue: #0B7DA8;             /* informational (4.5:1 on white) */
    --k8-amber: #B45309;            /* warnings */
    --k8-red: #B91C1C;              /* errors */
    --k8-focus: #1D4ED8;            /* focus ring (distinct from brand green) */

    /* Semantic */
    --k8-text: var(--k8-grey-700);
    --k8-text-muted: var(--k8-grey-500);
    --k8-heading: var(--k8-grey-900);
    --k8-link: var(--k8-green-text);
    --k8-link-hover: var(--k8-green-text-hover);
    --k8-border: var(--k8-grey-200);
    --k8-bg: var(--k8-white);
    --k8-bg-alt: var(--k8-grey-50);

    /* Type */
    --k8-font-heading: 'Raleway', 'Segoe UI', Arial, sans-serif;
    --k8-font-body: 'Roboto', 'Segoe UI', Arial, sans-serif;
    --k8-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --k8-lh-body: 1.6;
    --k8-lh-heading: 1.2;

    /* Shape */
    --k8-radius-sm: 4px;
    --k8-radius: 8px;
    --k8-radius-lg: 16px;
    --k8-radius-pill: 999px;

    /* Elevation */
    --k8-shadow-sm: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .08);
    --k8-shadow-md: 0 4px 12px rgba(17, 24, 39, .10);
    --k8-shadow-lg: 0 12px 32px rgba(17, 24, 39, .14);

    /* Layout */
    --k8-header-height: 64px;       /* desktop; mobile stays under 64px (see k8-chrome.css) */
    --k8-container-max: 1200px;
    --k8-transition: .2s ease;

    /* Bootstrap hooks: components pick up the AA-safe green. */
    --bs-link-color: var(--k8-green-text);
    --bs-link-hover-color: var(--k8-green-text-hover);
    --bs-link-color-rgb: 111, 138, 26;
    --bs-link-hover-color-rgb: 85, 105, 15;
    --bs-body-font-family: var(--k8-font-body);
    --bs-body-color: var(--k8-grey-700);
    --bs-heading-color: var(--k8-grey-900);
}

/* ---- Base ------------------------------------------------------------------------- */

body {
    font-family: var(--k8-font-body);
    color: var(--k8-text);
    background: var(--k8-bg);
    line-height: var(--k8-lh-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--k8-font-heading);
    color: var(--k8-heading);
    line-height: var(--k8-lh-heading);
    font-weight: 700;
}

a {
    color: var(--k8-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--k8-link-hover);
}

/* ---- Focus rings (restored; A17) -------------------------------------------------- */

:focus {
    outline: 3px solid var(--k8-focus);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--k8-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid var(--k8-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---- Skip link (A16) --------------------------------------------------------------- */

.k8-skip {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 2000;
    padding: .625rem 1rem;
    background: var(--k8-dark);
    color: var(--k8-white);
    font-family: var(--k8-font-heading);
    font-weight: 700;
    border-radius: var(--k8-radius);
    text-decoration: none;
    box-shadow: var(--k8-shadow-md);
    transition: top var(--k8-transition);
}

.k8-skip:focus,
.k8-skip:focus-visible {
    top: 8px;
    color: var(--k8-white);
    outline: 3px solid var(--k8-focus);
    outline-offset: 2px;
}

/* ---- Visually hidden --------------------------------------------------------------- */

.k8-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Buttons ----------------------------------------------------------------------- */

/* Primary: dark text on brand green (6.3:1). */
.btn-k8 {
    --bs-btn-color: var(--k8-dark);
    --bs-btn-bg: var(--k8-green);
    --bs-btn-border-color: var(--k8-green);
    --bs-btn-hover-color: var(--k8-dark);
    --bs-btn-hover-bg: var(--k8-green-dark);
    --bs-btn-hover-border-color: var(--k8-green-dark);
    --bs-btn-active-color: var(--k8-dark);
    --bs-btn-active-bg: var(--k8-green-dark);
    --bs-btn-active-border-color: var(--k8-green-dark);
    --bs-btn-disabled-color: var(--k8-grey-600);
    --bs-btn-disabled-bg: var(--k8-green-soft-2);
    --bs-btn-disabled-border-color: var(--k8-green-soft-2);
    font-family: var(--k8-font-heading);
    font-weight: 700;
    border-radius: var(--k8-radius);
}

/* Primary alternative: white text on the AA green (4.6:1). */
.btn-k8-solid {
    --bs-btn-color: var(--k8-white);
    --bs-btn-bg: var(--k8-green-text);
    --bs-btn-border-color: var(--k8-green-text);
    --bs-btn-hover-color: var(--k8-white);
    --bs-btn-hover-bg: var(--k8-green-text-hover);
    --bs-btn-hover-border-color: var(--k8-green-text-hover);
    --bs-btn-active-color: var(--k8-white);
    --bs-btn-active-bg: var(--k8-green-text-hover);
    --bs-btn-active-border-color: var(--k8-green-text-hover);
    --bs-btn-disabled-color: var(--k8-white);
    --bs-btn-disabled-bg: var(--k8-grey-400);
    --bs-btn-disabled-border-color: var(--k8-grey-400);
    font-family: var(--k8-font-heading);
    font-weight: 700;
    border-radius: var(--k8-radius);
}

/* Secondary: outline in the AA green. */
.btn-k8-outline {
    --bs-btn-color: var(--k8-green-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--k8-green-text);
    --bs-btn-hover-color: var(--k8-dark);
    --bs-btn-hover-bg: var(--k8-green-soft);
    --bs-btn-hover-border-color: var(--k8-green-text);
    --bs-btn-active-color: var(--k8-dark);
    --bs-btn-active-bg: var(--k8-green-soft-2);
    --bs-btn-active-border-color: var(--k8-green-text);
    --bs-btn-disabled-color: var(--k8-grey-400);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--k8-grey-300);
    font-family: var(--k8-font-heading);
    font-weight: 700;
    border-radius: var(--k8-radius);
}

/* Dark: for use on light bands. */
.btn-k8-dark {
    --bs-btn-color: var(--k8-white);
    --bs-btn-bg: var(--k8-dark);
    --bs-btn-border-color: var(--k8-dark);
    --bs-btn-hover-color: var(--k8-white);
    --bs-btn-hover-bg: var(--k8-dark-2);
    --bs-btn-hover-border-color: var(--k8-dark-2);
    --bs-btn-active-color: var(--k8-white);
    --bs-btn-active-bg: var(--k8-dark-2);
    --bs-btn-active-border-color: var(--k8-dark-2);
    font-family: var(--k8-font-heading);
    font-weight: 700;
    border-radius: var(--k8-radius);
}

/* Bootstrap 5.1 compatibility. The --bs-btn-* variables above are the Bootstrap 5.2+ button API, but
   Kall8.Web.Signup and Kall8.Web.Marketing ship Bootstrap 5.1.0, whose .btn never reads them: every
   .btn-k8* rendered as bare text. These rules apply the variables as real properties, so a page that
   re-points a variable (Marketing's .k8-cta-band .btn-k8-dark) still works. Harmless on 5.2+, which
   does the same thing itself. Load this file after bootstrap.min.css. */
.btn-k8, .btn-k8-solid, .btn-k8-outline, .btn-k8-dark {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.btn-k8:hover, .btn-k8-solid:hover, .btn-k8-outline:hover, .btn-k8-dark:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.btn-k8:active, .btn-k8.active, .btn-k8-solid:active, .btn-k8-solid.active,
.btn-k8-outline:active, .btn-k8-outline.active, .btn-k8-dark:active, .btn-k8-dark.active {
    color: var(--bs-btn-active-color, var(--bs-btn-hover-color));
    background-color: var(--bs-btn-active-bg, var(--bs-btn-hover-bg));
    border-color: var(--bs-btn-active-border-color, var(--bs-btn-hover-border-color));
}
.btn-k8:disabled, .btn-k8.disabled, .btn-k8-solid:disabled, .btn-k8-solid.disabled,
.btn-k8-outline:disabled, .btn-k8-outline.disabled, .btn-k8-dark:disabled, .btn-k8-dark.disabled {
    color: var(--bs-btn-disabled-color, var(--bs-btn-color));
    background-color: var(--bs-btn-disabled-bg, var(--bs-btn-bg));
    border-color: var(--bs-btn-disabled-border-color, var(--bs-btn-border-color));
}
/* 5.1 paints a blue focus ring on every .btn; keep it in the brand green. */
.btn-k8:focus, .btn-k8-solid:focus, .btn-k8-outline:focus, .btn-k8-dark:focus {
    box-shadow: 0 0 0 .25rem rgba(154, 177, 63, .45);
}

/* ---- Small shared bits ------------------------------------------------------------- */

.k8-badge {
    display: inline-block;
    padding: .2em .6em;
    font-family: var(--k8-font-heading);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--k8-dark);
    background: var(--k8-green);
    border-radius: var(--k8-radius-pill);
}

.k8-text-muted { color: var(--k8-text-muted); }
.k8-text-green { color: var(--k8-green-text); }
.k8-bg-soft { background: var(--k8-green-soft); }
.k8-bg-alt { background: var(--k8-bg-alt); }

@media (prefers-reduced-motion: reduce) {
    :root { --k8-transition: 0s; }
    html { scroll-behavior: auto; }
}