/**
 * KindredAccess Theme System
 *
 * A warm, calm visual language for connection without pressure.
 * "Where access is part of intimacy"
 *
 * Usage:
 *   Use CSS variables for all colors and key design tokens.
 *   Import this file BEFORE page-specific styles.
 *
 * Color Palette:
 *   - Primary Accent (Clay/Terracotta): #C26A4A - accents, buttons, selected states
 *   - Background Canvas (Linen): #F6F1EB - default body/page background
 *   - Surface/Card (Chalk): #FAF7F3 - cards/panels
 *   - Text Primary (Charcoal): #2F2A26
 *   - Text Secondary (Warm Slate): #6E665F
 *   - Support Accent (Moss): #6F8F7A - compatibility/"they get it" signals
 *   - Low Availability (Oat): #E9D9A8 - limited/resting chips
 *   - Neutral (Blue-Gray): #7A8A92 - dividers, tertiary UI
 */

:root {
    /* === Core Colors === */
    --ka-accent: #C26A4A;
    --ka-accent-hover: #A85A3D;
    --ka-accent-light: rgba(194, 106, 74, 0.12);

    --ka-bg: #F6F1EB;
    --ka-surface: #FAF7F3;
    --ka-surface-elevated: #FFFFFF;

    --ka-text: #2F2A26;
    --ka-text-muted: #6E665F;
    --ka-text-on-accent: #FFFFFF;

    --ka-border: #E5DDD4;
    --ka-border-strong: #D1C7BC;

    /* === Semantic Colors === */
    --ka-support: #6F8F7A;
    --ka-support-light: rgba(111, 143, 122, 0.15);
    --ka-low: #E9D9A8;
    --ka-low-text: #5C5032;
    --ka-neutral: #7A8A92;

    /* === Status/Feedback Colors === */
    --ka-success: #5A8F6A;
    --ka-success-hover: #4A7F5A;
    --ka-success-bg: #E8F4EC;
    --ka-error: #C25A4A;
    --ka-error-bg: #FAEDEB;
    --ka-info: #5A7A8F;
    --ka-info-bg: #EBF2F5;
    --ka-warning: #B8923A;
    --ka-warning-bg: #F9F4E8;

    /* === Needs/Offers Colors (Compatibility) === */
    --ka-need: #C26A4A;      /* What I need - terracotta */
    --ka-offer: #5A8F6A;     /* What I can offer - moss green */

    /* === Spacing & Layout === */
    --ka-radius-sm: 6px;
    --ka-radius: 10px;
    --ka-radius-lg: 16px;
    --ka-radius-full: 9999px;

    --ka-shadow-sm: 0 1px 3px rgba(47, 42, 38, 0.06);
    --ka-shadow: 0 2px 8px rgba(47, 42, 38, 0.08);
    --ka-shadow-lg: 0 8px 24px rgba(47, 42, 38, 0.12);
    --ka-shadow-accent: 0 4px 12px rgba(194, 106, 74, 0.25);

    /* === Focus & Accessibility === */
    --ka-focus-ring: 0 0 0 3px rgba(194, 106, 74, 0.4);
    --ka-focus-ring-inset: inset 0 0 0 2px var(--ka-accent);

    /* === Typography === */
    --ka-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ka-font-size-sm: 0.875rem;
    --ka-font-size-base: 1rem;
    --ka-font-size-lg: 1.125rem;
    --ka-font-size-xl: 1.25rem;
    --ka-font-size-2xl: 1.5rem;
    --ka-line-height: 1.6;

    /* === Transitions === */
    --ka-transition-fast: 150ms ease;
    --ka-transition: 200ms ease;
    --ka-transition-slow: 300ms ease;
}

/* === Base Styles === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--ka-font-family);
    font-size: var(--ka-font-size-base);
    line-height: var(--ka-line-height);
    color: var(--ka-text);
    background-color: var(--ka-bg);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Focus Styles (Accessibility) === */
/*
 * Focus-visible provides keyboard-only focus indicators.
 * Fallback for browsers without :focus-visible support.
 */
:focus {
    outline: 3px solid var(--ka-accent);
    outline-offset: 2px;
}

/* Modern browsers: only show focus ring for keyboard navigation */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--ka-accent);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (forced-colors: active) {
    :focus,
    :focus-visible {
        outline: 3px solid CanvasText;
    }
}

/* === Links === */
a {
    color: var(--ka-accent);
    text-decoration: none;
    transition: color var(--ka-transition-fast);
}

a:hover {
    color: var(--ka-accent-hover);
    text-decoration: underline;
}

/* === Screen Reader Only === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Skip Link === */
.ka-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--ka-accent);
    color: var(--ka-text-on-accent);
    padding: 12px 20px;
    border-radius: var(--ka-radius);
    font-weight: 600;
    z-index: 10000;
    transition: top var(--ka-transition-fast);
}

.ka-skip-link:focus {
    top: 16px;
    outline: 3px solid var(--ka-surface);
    outline-offset: 2px;
}

/* ==========================================================================
   COMPONENT: Cards
   ========================================================================== */

.ka-card {
    background: var(--ka-surface-elevated);
    border-radius: var(--ka-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--ka-shadow);
    border: 1px solid var(--ka-border);
}

.ka-card--surface {
    background: var(--ka-surface);
}

.ka-card--interactive {
    transition: transform var(--ka-transition), box-shadow var(--ka-transition);
}

.ka-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--ka-shadow-lg);
}

/* ==========================================================================
   COMPONENT: Buttons
   ========================================================================== */

.ka-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--ka-font-family);
    font-size: var(--ka-font-size-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: none;
    border-radius: var(--ka-radius);
    cursor: pointer;
    transition: all var(--ka-transition);
    min-height: 44px; /* Accessibility: minimum touch target */
}

.ka-btn:focus-visible {
    box-shadow: var(--ka-focus-ring);
}

/* Primary Button */
.ka-btn-primary {
    background-color: var(--ka-accent);
    color: var(--ka-text-on-accent);
    box-shadow: var(--ka-shadow-accent);
}

.ka-btn-primary:hover {
    background-color: var(--ka-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(194, 106, 74, 0.35);
}

.ka-btn-primary:active {
    transform: translateY(0);
}

/* Secondary Button */
.ka-btn-secondary {
    background-color: var(--ka-surface-elevated);
    color: var(--ka-text);
    border: 2px solid var(--ka-border-strong);
}

.ka-btn-secondary:hover {
    background-color: var(--ka-surface);
    border-color: var(--ka-accent);
    color: var(--ka-accent);
}

/* Ghost Button */
.ka-btn-ghost {
    background-color: transparent;
    color: var(--ka-accent);
    padding: 0.5rem 1rem;
}

.ka-btn-ghost:hover {
    background-color: var(--ka-accent-light);
}

/* Danger Button */
.ka-btn-danger {
    background-color: var(--ka-error);
    color: var(--ka-text-on-accent);
}

.ka-btn-danger:hover {
    background-color: #A84A3D;
}

/* Button Sizes */
.ka-btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--ka-font-size-sm);
    min-height: 36px;
}

.ka-btn-lg {
    padding: 1rem 2rem;
    font-size: var(--ka-font-size-lg);
}

/* Icon-only Button - ensures 44px minimum touch target */
.ka-btn-icon,
.btn-icon {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   COMPONENT: Chips / Tags
   ========================================================================== */

.ka-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--ka-font-size-sm);
    font-weight: 500;
    border-radius: var(--ka-radius-full);
    background-color: var(--ka-accent-light);
    color: var(--ka-accent);
    border: 1px solid transparent;
}

.ka-chip--support {
    background-color: var(--ka-support-light);
    color: var(--ka-support);
}

.ka-chip--low {
    background-color: var(--ka-low);
    color: var(--ka-low-text);
}

.ka-chip--neutral {
    background-color: var(--ka-surface);
    color: var(--ka-text-muted);
    border-color: var(--ka-border);
}

.ka-chip--active {
    background-color: var(--ka-accent);
    color: var(--ka-text-on-accent);
}

/* Emoji in chips should be decorative */
.ka-chip [aria-hidden="true"] {
    font-style: normal;
}

/* ==========================================================================
   COMPONENT: Form Inputs
   ========================================================================== */

.ka-input,
.ka-select,
.ka-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--ka-font-family);
    font-size: var(--ka-font-size-base);
    color: var(--ka-text);
    background-color: var(--ka-surface-elevated);
    border: 2px solid var(--ka-border);
    border-radius: var(--ka-radius);
    transition: border-color var(--ka-transition-fast), box-shadow var(--ka-transition-fast);
}

.ka-input:hover,
.ka-select:hover,
.ka-textarea:hover {
    border-color: var(--ka-border-strong);
}

.ka-input:focus,
.ka-select:focus,
.ka-textarea:focus {
    border-color: var(--ka-accent);
    box-shadow: var(--ka-focus-ring);
    outline: none;
}

.ka-input::placeholder {
    color: var(--ka-text-muted);
}

.ka-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--ka-text);
}

.ka-help-text {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--ka-font-size-sm);
    color: var(--ka-text-muted);
}

.ka-error-text {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--ka-font-size-sm);
    color: var(--ka-error);
}

/* ==========================================================================
   COMPONENT: Messages / Alerts
   ========================================================================== */

.ka-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--ka-radius);
    border-left: 4px solid;
    margin-bottom: 1rem;
}

.ka-alert--success {
    background-color: var(--ka-success-bg);
    border-color: var(--ka-success);
    color: #2D4A35;
}

.ka-alert--error {
    background-color: var(--ka-error-bg);
    border-color: var(--ka-error);
    color: #6B2E25;
}

.ka-alert--info {
    background-color: var(--ka-info-bg);
    border-color: var(--ka-info);
    color: #2D3E4A;
}

.ka-alert--warning {
    background-color: var(--ka-warning-bg);
    border-color: var(--ka-warning);
    color: #5C491D;
}

/* ==========================================================================
   COMPONENT: Section Headers
   ========================================================================== */

.ka-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ka-border);
}

.ka-section-title {
    font-size: var(--ka-font-size-lg);
    font-weight: 600;
    color: var(--ka-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ka-section-title [aria-hidden="true"] {
    font-size: 1.25em;
}

/* ==========================================================================
   COMPONENT: Status Badge
   ========================================================================== */

.ka-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background-color: var(--ka-surface);
    border: 1px solid var(--ka-border);
    border-radius: var(--ka-radius);
    font-size: var(--ka-font-size-sm);
}

.ka-status-badge--available {
    background-color: var(--ka-support-light);
    border-color: var(--ka-support);
    color: var(--ka-support);
}

.ka-status-badge--limited {
    background-color: var(--ka-low);
    border-color: #D4C594;
    color: var(--ka-low-text);
}

.ka-status-badge--resting {
    background-color: var(--ka-surface);
    border-color: var(--ka-border-strong);
    color: var(--ka-text-muted);
}

.ka-status-badge--away {
    background-color: var(--ka-surface);
    border-color: var(--ka-neutral);
    color: var(--ka-neutral);
}

/* Status indicator dot */
.ka-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

/* ==========================================================================
   LAYOUT: Container
   ========================================================================== */

.ka-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.ka-container--narrow {
    max-width: 800px;
}

.ka-container--wide {
    max-width: 1400px;
}

/* ==========================================================================
   LAYOUT: Header
   ========================================================================== */

.ka-header {
    background-color: var(--ka-surface-elevated);
    border-bottom: 1px solid var(--ka-border);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.ka-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ka-logo {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ka-accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ka-logo:hover {
    color: var(--ka-accent-hover);
    text-decoration: none;
}

/* ==========================================================================
   LAYOUT: Navigation
   ========================================================================== */

.ka-nav {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
}

.ka-nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    color: var(--ka-text);
    font-weight: 500;
    border-radius: var(--ka-radius);
    transition: all var(--ka-transition-fast);
}

.ka-nav-link:hover {
    background-color: var(--ka-accent-light);
    color: var(--ka-accent);
    text-decoration: none;
}

.ka-nav-link--active {
    background-color: var(--ka-accent);
    color: var(--ka-text-on-accent);
}

.ka-nav-link--active:hover {
    background-color: var(--ka-accent-hover);
    color: var(--ka-text-on-accent);
}

.ka-nav-badge {
    background-color: var(--ka-error);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ka-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
}

/* ==========================================================================
   LAYOUT: Footer
   ========================================================================== */

.ka-footer {
    background-color: var(--ka-text);
    color: var(--ka-surface);
    padding: 2rem 0;
    margin-top: 3rem;
}

.ka-footer a {
    color: var(--ka-surface);
    opacity: 0.85;
}

.ka-footer a:hover {
    opacity: 1;
    color: var(--ka-surface);
}

.ka-footer-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ka-footer-text {
    text-align: center;
    opacity: 0.7;
    font-size: var(--ka-font-size-sm);
}

/* ==========================================================================
   LAYOUT: Main Content
   ========================================================================== */

.ka-main {
    min-height: calc(100vh - 200px);
    padding: 2rem 0;
}

/* ==========================================================================
   UTILITY: Spacing
   ========================================================================== */

.ka-mt-0 { margin-top: 0; }
.ka-mt-1 { margin-top: 0.5rem; }
.ka-mt-2 { margin-top: 1rem; }
.ka-mt-3 { margin-top: 1.5rem; }
.ka-mt-4 { margin-top: 2rem; }

.ka-mb-0 { margin-bottom: 0; }
.ka-mb-1 { margin-bottom: 0.5rem; }
.ka-mb-2 { margin-bottom: 1rem; }
.ka-mb-3 { margin-bottom: 1.5rem; }
.ka-mb-4 { margin-bottom: 2rem; }

/* ==========================================================================
   UTILITY: Text
   ========================================================================== */

.ka-text-muted {
    color: var(--ka-text-muted);
}

.ka-text-accent {
    color: var(--ka-accent);
}

.ka-text-support {
    color: var(--ka-support);
}

.ka-text-center {
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .ka-header-inner {
        flex-wrap: wrap;
    }

    .ka-nav {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .ka-nav-link {
        padding: 0.5rem 0.625rem;
        font-size: var(--ka-font-size-sm);
    }

    .ka-card {
        padding: 1rem;
    }

    .ka-footer-links {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .ka-btn {
        width: 100%;
    }

    .ka-btn-sm {
        width: auto;
    }
}

/* ==========================================================================
   ACCESSIBILITY: Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY: High Contrast Mode
   ========================================================================== */

@media (forced-colors: active) {
    .ka-btn,
    .ka-card,
    .ka-chip,
    .ka-alert {
        border: 2px solid CanvasText;
    }

    .ka-nav-link--active {
        border: 2px solid Highlight;
    }

    .ka-status-badge,
    .ka-chip--active {
        border: 2px solid Highlight;
    }
}

/* ==========================================================================
   ACCESSIBILITY: Focus Within (for card/container focus)
   ========================================================================== */

.ka-card:focus-within {
    outline: 2px solid var(--ka-accent);
    outline-offset: 2px;
}

/* Ensure minimum touch target size on all interactive elements */
a,
button,
input,
select,
textarea,
[role="button"],
[role="link"] {
    min-height: 44px;
}

/* Exception: inline links in paragraphs */
p a,
li a,
span a {
    min-height: auto;
}