/**
 * Multi-Reach — Global Styles
 *
 * Reset + CSS custom properties for light / dark mode.
 * Components reference var(--mr-*) instead of hardcoded hex.
 * This file provides only the base layer that Astro pages load via <link>.
 */

/* ── Design Tokens (light default) ──────────────────── */
:root {
    /* Backgrounds */
    --mr-bg-base:        #f8fafc;
    --mr-bg-card:        #ffffff;
    --mr-bg-card-alt:    #f1f5f9;
    --mr-bg-input:       #ffffff;
    --mr-bg-header:      #f8fafc;
    --mr-bg-cell-empty:  #f1f5f9;
    --mr-bg-toast:       #ffffff;

    /* Borders */
    --mr-border:         #e2e8f0;
    --mr-border-sec:     #cbd5e1;
    --mr-border-tert:    #94a3b8;

    /* Text */
    --mr-text:           #1e293b;
    --mr-text-heading:   #0f172a;
    --mr-text-sec:       #475569;
    --mr-text-muted:     #94a3b8;
    --mr-text-placeholder:#94a3b8;

    /* Accent (purple — same both modes) */
    --mr-accent:         #7c3aed;
    --mr-accent-hover:   #6d28d9;
    --mr-accent-light:   #8b5cf6;
    --mr-accent-text:    #7c3aed;
    --mr-accent-bg:      rgba(124, 58, 237, 0.06);

    /* Semantic */
    --mr-success:        #16a34a;
    --mr-error:          #dc2626;
    --mr-warning:        #d97706;

    /* UI chrome */
    --mr-scrollbar:      #cbd5e1;
    --mr-scrollbar-hover:#94a3b8;
    --mr-selection-bg:   rgba(124, 58, 237, 0.2);
    --mr-selection-text:  #1e293b;
    --mr-spinner-track:  #e2e8f0;
    --mr-spinner-active: #7c3aed;
    --mr-gradient-from:  #8b5cf6;
    --mr-gradient-to:    #a78bfa;

    /* Google button (unchanged) */
    --mr-google-bg:      #fff;
    --mr-google-text:    #1f2937;

    /* brand-sub */
    --mr-brand-sub:      #64748b;
}

/* ── Dark overrides ─────────────────────────────────── */
.dark {
    --mr-bg-base:        #0a0e1a;
    --mr-bg-card:        #111827;
    --mr-bg-card-alt:    #1a1f35;
    --mr-bg-input:       #0d1117;
    --mr-bg-header:      #0d1117;
    --mr-bg-cell-empty:  #090d14;
    --mr-bg-toast:       #1e293b;

    --mr-border:         #1f2937;
    --mr-border-sec:     #2d3555;
    --mr-border-tert:    #374151;

    --mr-text:           #e2e8f0;
    --mr-text-heading:   #f1f5f9;
    --mr-text-sec:       #94a3b8;
    --mr-text-muted:     #64748b;
    --mr-text-placeholder:#475569;

    --mr-accent-text:    #a78bfa;
    --mr-accent-bg:      rgba(124, 58, 237, 0.08);

    --mr-success:        #4ade80;
    --mr-error:          #f87171;
    --mr-warning:        #fbbf24;

    --mr-scrollbar:      #374151;
    --mr-scrollbar-hover:#4b5563;
    --mr-selection-bg:   rgba(124, 58, 237, 0.3);
    --mr-selection-text:  #f1f5f9;
    --mr-spinner-track:  #2d3555;
    --mr-spinner-active: #8b5cf6;

    --mr-brand-sub:      #64748b;
}

/* ── Reset ──────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: var(--mr-bg-base);
    color: var(--mr-text);
    line-height: 1.5;
    min-height: 100vh;
}

/* ── Typography ─────────────────────────────────────── */
h1,
h2,
h3,
h4 {
    line-height: 1.2;
}

a {
    color: inherit;
    text-decoration: none;
}

code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Scrollbar (webkit) ─────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--mr-scrollbar);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mr-scrollbar-hover);
}

/* ── Selection ──────────────────────────────────────── */
::selection {
    background: var(--mr-selection-bg);
    color: var(--mr-selection-text);
}

/* ── Focus ring ─────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--mr-accent);
    outline-offset: 2px;
}

/* ── Utility: sr-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;
}