/* ============================================================
   Know Your Area — shared design tokens + responsive base
   File: components/kya-theme.css
   Load this in the <head> of every page (before the page's own
   inline <style>) so all pages share one brand + a mobile safety net.
   Canonical brand is taken from the site navigation: #3a66b3.
   Updated: July 12, 2026
   ============================================================ */

:root {
    /* brand */
    --kya-primary:       #3a66b3;   /* canonical KYA blue (matches nav) */
    --kya-primary-dark:  #2f5590;
    --kya-primary-light: #5a8fd8;
    --kya-primary-tint:  #eef3fb;   /* pale blue fill for chips/selected */
    --kya-accent:        #ed8936;   /* orange accent */
    --kya-accent-dark:   #dd6b20;

    /* surfaces + text */
    --kya-bg:      #f8faff;
    --kya-surface: #f5f7fa;
    --kya-card:    #ffffff;
    --kya-text:    #2c3e50;
    --kya-muted:   #64748b;
    --kya-border:  #e8ecf0;

    /* status */
    --kya-green: #16a34a;
    --kya-amber: #d97706;
    --kya-red:   #dc2626;

    /* shape + type */
    --kya-radius:    14px;
    --kya-radius-sm: 10px;
    --kya-shadow:    0 1px 3px rgba(0,0,0,.06);
    --kya-shadow-lg: 0 6px 16px rgba(58,102,179,.12);
    --kya-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* legacy aliases — pages that used shorthand token names inherit the brand */
    --p: var(--kya-primary);
}

/* ---------- mobile safety net (applies everywhere) ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Keep content from spilling past the screen edge WITHOUT turning body into
   a scroll container (which would break the sticky nav). overflow-x: clip
   does not create a scroll container, so position: sticky keeps working. */
html { overflow-x: clip; }

/* Media and embeds always fit their container. */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

/* Long words / URLs wrap instead of forcing the page wider. */
body { overflow-wrap: break-word; }

/* Wrap any wide table in <div class="kya-table-scroll"> so it scrolls
   horizontally on small screens instead of breaking the layout. */
.kya-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Inputs/selects/buttons inherit the page font (Safari/iOS reset). */
input, select, textarea, button { font-family: inherit; }

/* Comfortable tap targets on touch devices. */
@media (pointer: coarse) {
    button, .btn, a.btn { min-height: 40px; }
}

/* ---------- optional shared components (opt-in via class) ---------- */
.kya-chip { white-space: nowrap; }
