/**
 * Shared semantic tokens for child-theme customizations.
 *
 * @package Ratna_Gems
 */

:root {
    color-scheme: light dark;

    /* Primitive palette */
    --rg-gray-050: #f8fafc;
    --rg-gray-100: #f1f5f9;
    --rg-gray-300: #cbd5e1;
    --rg-gray-400: #94a3b8;
    --rg-gray-600: #475569;
    --rg-gray-700: #334155;
    --rg-gray-800: #1e293b;
    --rg-gray-900: #0f172a;

    --rg-blue-400: #60a5fa;
    --rg-blue-500: #3b82f6;
    --rg-blue-700: #1d4ed8;

    /* Semantic tokens */
    --rg-focus-inner: #ffffff;
    --rg-focus-outer: var(--rg-blue-700);

    --rg-surface-page: #ffffff;
    --rg-surface-header: #ffffff;
    --rg-surface-card: var(--rg-gray-050);
    --rg-surface-card-strong: var(--rg-gray-100);
    --rg-surface-overlay: rgba(15, 23, 42, 0.65);

    --rg-text-primary: #111827;
    --rg-text-secondary: #1f2937;
    --rg-text-muted: #4b5563;
    --rg-text-placeholder: #6b7280;

    --rg-link: #005f99;
    --rg-link-hover: #003e6b;

    --rg-border-subtle: #d1d5db;
    --rg-border-strong: #94a3b8;
    --rg-border-accent: var(--rg-blue-500);


    /* Backward-compatible aliases for existing component styles */
    --rg-a11y-focus-inner: var(--rg-focus-inner);
    --rg-a11y-focus-outer: var(--rg-focus-outer);
    --rg-a11y-bg-header: var(--rg-surface-header);
    --rg-a11y-bg-surface: var(--rg-surface-page);
    --rg-a11y-bg-surface-alt: var(--rg-surface-card);
    --rg-a11y-bg-surface-active: var(--rg-surface-card-strong);
    --rg-a11y-bg-button: var(--rg-surface-card-strong);
    --rg-a11y-bg-surface-nested: var(--rg-surface-card);
    --rg-a11y-text-primary: var(--rg-text-primary);
    --rg-a11y-text-secondary: var(--rg-text-secondary);
    --rg-a11y-text-muted: var(--rg-text-muted);
    --rg-a11y-text-placeholder: var(--rg-text-placeholder);
    --rg-a11y-link: var(--rg-link);
    --rg-a11y-link-hover: var(--rg-link-hover);
    --rg-a11y-border: var(--rg-border-subtle);
    --rg-a11y-border-strong: var(--rg-border-strong);
    --rg-a11y-border-active: var(--rg-border-accent);
    --rg-a11y-border-accent: var(--rg-border-accent);
    --rg-a11y-overlay: var(--rg-surface-overlay);
}

/* Astra or device dark mode authority: enable dark tokens in either case. */
body:is(.astra-dark-mode-enable, .rg-device-dark-mode) {
    color-scheme: dark;

    --rg-focus-inner: #0b1220;
    --rg-focus-outer: #93c5fd;

    --rg-surface-page: #020617;
    --rg-surface-header: #010307;
    --rg-surface-card: #0b1220;
    --rg-surface-card-strong: #1e293b;
    --rg-surface-overlay: rgba(2, 6, 23, 0.72);

    --rg-text-primary: #f8fafc;
    --rg-text-secondary: #e5e7eb;
    --rg-text-muted: #cbd5e1;
    --rg-text-placeholder: #94a3b8;

    --rg-link: #93c5fd;
    --rg-link-hover: #bfdbfe;

    --rg-border-subtle: #334155;
    --rg-border-strong: #475569;
    --rg-border-accent: #60a5fa;

    /* Keep legacy token names mapped for existing dark-mode rules */
    --rg-a11y-bg-button: var(--rg-surface-card-strong);
}

/*
 * Fallback for sites that rely on device dark mode without adding a body class.
 * This keeps token values aligned with existing @media (prefers-color-scheme: dark)
 * component rules so text/background contrast remains consistent.
 */
@media (prefers-color-scheme: dark) {
    body:not(.rg-force-light-mode) {
        color-scheme: dark;

        --rg-focus-inner: #0b1220;
        --rg-focus-outer: #93c5fd;

        --rg-surface-page: #020617;
        --rg-surface-header: #010307;
        --rg-surface-card: #0b1220;
        --rg-surface-card-strong: #1e293b;
        --rg-surface-overlay: rgba(2, 6, 23, 0.72);

        --rg-text-primary: #f8fafc;
        --rg-text-secondary: #e5e7eb;
        --rg-text-muted: #cbd5e1;
        --rg-text-placeholder: #94a3b8;

        --rg-link: #93c5fd;
        --rg-link-hover: #bfdbfe;

        --rg-border-subtle: #334155;
        --rg-border-strong: #475569;
        --rg-border-accent: #60a5fa;

        --rg-a11y-bg-button: var(--rg-surface-card-strong);
    }
}