/* 
 * Web Awesome BTGT Theme Configuration
 * Integrates Beat The Geek Trivia brand colors with Web Awesome design tokens
 */

:root {
    /* BTGT Primary Brand Colors */
    --btgt-lime: #AFD246;        /* Primary brand color - headers, CTAs */
    --btgt-red: #E84343;         /* Accent/Alert color */
    --btgt-blue: #47AADF;        /* Info/Secondary */
    --btgt-purple: #7F5BA4;      /* Tertiary accent */
    --btgt-orange: #F79334;      /* Warning/Highlight */
    
    /* Web Awesome Brand Color Scale - Using BTGT Lime as primary */
    --wa-color-brand-50: #f7fce8;
    --wa-color-brand-100: #eef8d1;
    --wa-color-brand-200: #d9f0a3;
    --wa-color-brand-300: #c4e876;
    --wa-color-brand-400: #AFD246;  /* BTGT Primary */
    --wa-color-brand-500: #9bc03e;
    --wa-color-brand-600: #7a9932;
    --wa-color-brand-700: #5c7325;
    --wa-color-brand-800: #3d4c19;
    --wa-color-brand-900: #1f260c;
    
    /* Web Awesome Success Color Scale - Using BTGT Lime for success states */
    --wa-color-success-50: #f7fce8;
    --wa-color-success-100: #eef8d1;
    --wa-color-success-200: #d9f0a3;
    --wa-color-success-300: #c4e876;
    --wa-color-success-400: #AFD246;
    --wa-color-success-500: #9bc03e;
    --wa-color-success-600: #7a9932;
    --wa-color-success-700: #5c7325;
    --wa-color-success-800: #3d4c19;
    --wa-color-success-900: #1f260c;
    
    /* Web Awesome Danger/Error Color Scale - Using BTGT Red */
    --wa-color-danger-50: #fce8e8;
    --wa-color-danger-100: #f9d1d1;
    --wa-color-danger-200: #f3a3a3;
    --wa-color-danger-300: #ed7575;
    --wa-color-danger-400: #E84343;  /* BTGT Red */
    --wa-color-danger-500: #d33939;
    --wa-color-danger-600: #a92e2e;
    --wa-color-danger-700: #7f2222;
    --wa-color-danger-800: #541717;
    --wa-color-danger-900: #2a0b0b;
    
    /* Web Awesome Warning Color Scale - Using BTGT Orange */
    --wa-color-warning-50: #fef4e8;
    --wa-color-warning-100: #fde9d1;
    --wa-color-warning-200: #fbd3a3;
    --wa-color-warning-300: #f9bd75;
    --wa-color-warning-400: #F79334;  /* BTGT Orange */
    --wa-color-warning-500: #de842f;
    --wa-color-warning-600: #b26a26;
    --wa-color-warning-700: #864f1c;
    --wa-color-warning-800: #593513;
    --wa-color-warning-900: #2d1a09;
    
    /* Web Awesome Info Color Scale - Using BTGT Blue */
    --wa-color-info-50: #e8f5fc;
    --wa-color-info-100: #d1ebf9;
    --wa-color-info-200: #a3d7f3;
    --wa-color-info-300: #75c3ed;
    --wa-color-info-400: #47AADF;  /* BTGT Blue */
    --wa-color-info-500: #3f99c8;
    --wa-color-info-600: #327aa0;
    --wa-color-info-700: #265c78;
    --wa-color-info-800: #193d50;
    --wa-color-info-900: #0d1f28;
    
    /* Additional BTGT accent mapping */
    --btgt-accent-purple-50: #f3eff7;
    --btgt-accent-purple-100: #e7dfef;
    --btgt-accent-purple-200: #cfbfdf;
    --btgt-accent-purple-300: #b79fcf;
    --btgt-accent-purple-400: #7F5BA4;  /* BTGT Purple */
    --btgt-accent-purple-500: #725293;
    --btgt-accent-purple-600: #5b4276;
    --btgt-accent-purple-700: #443158;
    --btgt-accent-purple-800: #2e213b;
    --btgt-accent-purple-900: #17101d;
}

/* Web Awesome component customizations for BTGT theme */
:root {
    /* Typography enhancements */
    --wa-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    
    /* Spacing adjustments */
    --wa-spacing-x-small: 0.25rem;
    --wa-spacing-small: 0.5rem;
    --wa-spacing-medium: 1rem;
    --wa-spacing-large: 1.5rem;
    --wa-spacing-x-large: 2rem;
    
    /* Border radius - slightly more rounded for modern look */
    --wa-border-radius-small: 0.25rem;
    --wa-border-radius-medium: 0.5rem;
    --wa-border-radius-large: 0.75rem;
    --wa-border-radius-x-large: 1rem;
    
    /* Shadows - subtle elevation */
    --wa-shadow-x-small: 0 1px 2px rgba(0, 0, 0, 0.05);
    --wa-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.1);
    --wa-shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
    --wa-shadow-large: 0 10px 15px rgba(0, 0, 0, 0.1);
    --wa-shadow-x-large: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* BTGT-specific component overrides */

/* Badge styling for round indicators */
wa-badge[variant="brand"] {
    --background: var(--btgt-lime);
    --color: #2d4c19;
    font-weight: 600;
}

/* Tab styling with BTGT colors */
wa-tab[active] {
    --indicator-color: var(--btgt-lime);
    font-weight: 600;
}

/* Button primary styling */
wa-button[variant="brand"] {
    --background: var(--btgt-lime);
    --background-hover: #9bc03e;
    --background-active: #7a9932;
    font-weight: 600;
}

/* Force dark text on brand buttons — #AFD246 lime fails WCAG contrast with white */
wa-button[variant="brand"]::part(label) {
    color: #1a1a1a;
}

/* Card subtle elevation */
wa-card {
    --border-color: var(--wa-color-neutral-200);
    --background: white;
}

/* Split panel divider */
wa-split-panel {
    --divider-width: 10px;
    --divider-color: var(--wa-color-neutral-200);
    --divider-color-hover: var(--btgt-lime);
}

/* Progress indicators */
wa-spinner[variant="brand"] {
    --indicator-color: var(--btgt-lime);
    --track-color: var(--wa-color-neutral-200);
}

wa-progress-bar[variant="brand"] {
    --indicator-color: var(--btgt-lime);
    --track-color: var(--wa-color-neutral-200);
}

/* Details/Disclosure widget */
wa-details {
    --border-color: var(--wa-color-neutral-200);
    --border-width: 1px;
}

wa-details summary {
    font-weight: 600;
    cursor: pointer;
}

/* Tooltip styling */
wa-tooltip {
    --max-width: 20rem;
    --border-radius: var(--wa-border-radius-medium);
}

/* Dialog/Modal styling */
wa-dialog {
    --border-radius: var(--wa-border-radius-large);
    --box-shadow: var(--wa-shadow-x-large);
}

/* Input focus states */
wa-input,
wa-textarea,
wa-select {
    --border-color-focus: var(--btgt-lime);
    --border-width-focus: 2px;
}

/* Callout color variants */
wa-callout[variant="brand"] {
    --background-color: var(--wa-color-brand-50);
    --border-color: var(--btgt-lime);
    --color: var(--wa-color-brand-900);
}

/* Round color assignments for tabs */
.round-1-tab wa-badge,
.round-1-indicator {
    --background: var(--btgt-lime);
    --color: #2d4c19;
}

.round-2-tab wa-badge,
.round-2-indicator {
    --background: var(--btgt-red);
    --color: white;
}

.round-3-tab wa-badge,
.round-3-indicator {
    --background: var(--btgt-blue);
    --color: white;
}

.round-4-tab wa-badge,
.round-4-indicator {
    --background: var(--btgt-purple);
    --color: white;
}

.round-5-tab wa-badge,
.round-5-indicator {
    --background: var(--btgt-orange);
    --color: white;
}

.round-6-tab wa-badge,
.round-6-indicator {
    --background: var(--btgt-lime);
    --color: #2d4c19;
}

/* Connection status indicators */
.status-excellent {
    color: var(--wa-color-success-600);
}

.status-good {
    color: var(--wa-color-info-600);
}

.status-fair {
    color: var(--wa-color-warning-600);
}

.status-poor {
    color: var(--wa-color-danger-600);
}

/* ============================================
   AB#576 — Register Phase 0 Layout Cleanup
   ============================================ */

:root {
    /* Secondary link color — WCAG 1.4.3 compliant on white (~9:1 contrast).
       Use for muted/secondary links (e.g., "Back" navigation under registration cards). */
    --btgt-link-secondary: var(--wa-color-neutral-700);

    /* AB#644 — Muted body/helper text. Semantically distinct from --btgt-link-secondary
       (same value today, may drift independently). Use for de-emphasized non-interactive
       text: loading states, empty-state copy, "(optional)" hints. ~7:1 contrast on white. */
    --btgt-text-muted: var(--wa-color-neutral-700);
}

/* Visually-hidden utility — content remains in the accessibility tree but not visually rendered.
   Standard WCAG-blessed clip pattern. Use for SR-only h1 in shared register layout, decorative
   icon labels, and status text that should only reach assistive tech.
   Matches the byte-identical .sr-only pattern already present in grader-interface.css and
   player-three-column.css; a future consolidation can alias .sr-only to this rule. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    :root {
        --wa-spacing-medium: 0.75rem;
        --wa-spacing-large: 1rem;
        --wa-spacing-x-large: 1.5rem;
    }
    
    wa-split-panel {
        --divider-width: 6px;
    }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    /* Dark mode overrides would go here if needed */
}

/* Print styles */
@media print {
    wa-split-panel {
        display: block !important;
    }
    
    .split-panel-start,
    .split-panel-end {
        width: 100% !important;
        page-break-inside: avoid;
    }
}