/*
 * TheTrueStone.com — design tokens.
 *
 * Single source of truth for colour, elevation, radius and spacing.
 *
 * main.css and style.css each used to declare their own :root block with
 * DIFFERENT values for the same names (--primary was hsl(255 60% 55%) in one and
 * #7C3AED in the other; shadows and radii disagreed too). Because both files are
 * loaded, whichever happened to come last silently won, and the two halves of
 * the UI drifted apart. Both now inherit from here.
 *
 * Load order: tokens.css -> main.css -> style.css -> components.css
 */

:root {
    /* ---- Brand ------------------------------------------------------- */
    --primary: #6D28D9;
    --primary-light: #8B5CF6;
    --primary-dark: #5B21B6;
    --primary-soft: #F5F3FF;
    --primary-h: 262;
    --primary-s: 69%;
    --primary-l: 50%;

    --accent: #D97706;
    --accent-dark: #B45309;
    --accent-soft: #FFFBEB;

    /* ---- Neutrals ---------------------------------------------------- */
    --white: #FFFFFF;
    --black: #0B1120;

    --slate-900: #0F172A;
    --slate-800: #1E293B;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748B;
    --slate-400: #94A3B8;
    --slate-300: #CBD5E1;
    --slate-200: #E2E8F0;
    --slate-100: #F1F5F9;
    --slate-50: #F8FAFC;

    --text-main: var(--slate-900);
    --text-muted: var(--slate-500);
    --bg-light: var(--slate-50);
    --secondary: var(--slate-100);

    /*
     * Borders were literally #111 — a hairline of pure black around every card,
     * input and panel. That is what made the UI read as a wireframe rather than
     * a finished product. A soft neutral does the same job without the noise.
     */
    --border-color: #E2E8F0;
    --border-strong: #CBD5E1;
    --form-border: #CBD5E1;

    /* ---- Status ------------------------------------------------------ */
    --success: #059669;
    --success-bg: #ECFDF5;
    --success-fg: #065F46;
    --warning: #D97706;
    --warning-bg: #FFFBEB;
    --warning-fg: #92400E;
    --danger: #DC2626;
    --danger-bg: #FEF2F2;
    --danger-fg: #B91C1C;
    --info: #2563EB;
    --info-bg: #EFF6FF;
    --info-fg: #1E40AF;

    /* ---- Layout ------------------------------------------------------ */
    --container-max: 1280px;
    --container-width: 1280px;
    --container-narrow: 800px;
    --header-height: 80px;

    /* ---- Radius ------------------------------------------------------ */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ---- Elevation ---------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.12), 0 6px 12px -6px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.16), 0 8px 20px -8px rgba(15, 23, 42, 0.08);
    --shadow-2xl: 0 40px 72px -20px rgba(15, 23, 42, 0.22);
    --shadow-ring: 0 0 0 4px rgba(109, 40, 217, 0.14);
    --shadow-inner: inset 0 1px 3px rgba(15, 23, 42, 0.06);

    /* ---- Motion ------------------------------------------------------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms var(--ease);
    --transition: 240ms var(--ease);
    --transition-slow: 420ms var(--ease);

    /* ---- Type --------------------------------------------------------- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Poppins', 'Inter', system-ui, sans-serif;

    /* Glass surfaces */
    --glass: rgba(255, 255, 255, 0.72);
    --glass-dark: rgba(15, 23, 42, 0.82);
}

/* Respect a visitor's reduced-motion preference across the whole product. */
@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;
    }
}

/*
 * Visible keyboard focus everywhere. Several components previously set
 * `outline: none` on inputs with no replacement, which left keyboard and
 * screen-reader users with no indication of where they were on the page.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}