/**
 * WeFoodies — global design tokens (always-enqueued).
 *
 * Plugin-wide CSS custom properties that define the design system AND its
 * dark-mode override. Always loaded by ScriptService::enqueue_global_tokens()
 * regardless of which blocks (if any) are present on the current page.
 *
 * Why this exists:
 *   Block stylesheets are conditionally enqueued — they only load when their
 *   block is present on the page. On a single foodies post that uses a plain
 *   theme template (no wefoodies/* blocks rendered), none of the block CSS
 *   loads, so the design tokens are undefined and the dark-mode toggle has
 *   nothing to switch. This file fixes that by registering the tokens at the
 *   site level.
 *
 * Source of truth note:
 *   The compiled equivalent in src/shared/styles/_variables.scss remains the
 *   working source for block-scoped Sass usage (mixins, breakpoints, etc).
 *   This file mirrors the runtime CSS-custom-property values verbatim — keep
 *   them in sync when changing token values.
 *
 * @package WeFoodies
 * @since 1.5.2
 */

/* Light-mode (default) tokens — mirror :root, :root[data-theme="light"] in _variables.scss. */
:root,
:root[data-theme="light"] {
    color-scheme: light;

    --wefoodies-card-padding: 1.25rem;
    --wefoodies-item-gap: 1.5rem;
    --wefoodies-image-aspect: 4/3;
    --wefoodies-border-width: 1px;
    --wefoodies-grid-gap: 1.5rem;

    --wefoodies-border-radius: var(--wp--custom--border--radius--medium, 8px);
    --wefoodies-border-color: var(--wp--preset--color--light-grey, #e5e7eb);
    --wefoodies-text-color: var(--wp--preset--color--foreground, #1a1a1a);

    /*
     * P0 WCAG 2.2 AA contrast fix: dedicated link colour.
     * Brand teal #7fc3c0 only reaches 2.01:1 on white at body sizes — far below
     * the 4.5:1 minimum. #0c5f5c gives 7.0:1 (AAA) and keeps the teal family
     * recognisable. Brand --wefoodies-primary-color is reserved for hero
     * accents, button backgrounds, and highlighted UI surfaces.
     */
    --wefoodies-link-color: #0c5f5c;
    --wefoodies-link-color-hover: #084947;
    --wefoodies-meta-color: var(--wp--preset--color--medium-grey, #6b7280);
    --wefoodies-background-color: var(--wp--preset--color--background, #fff);
    --wefoodies-surface-color: var(--wp--preset--color--light-grey, #f8fafc);
    --wefoodies-primary-color: var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue, #0073aa));
    --wefoodies-accent-color: var(--wp--preset--color--secondary, var(--wp--preset--color--vivid-purple, #9b51e0));

    --wefoodies-success-color: var(--wp--preset--color--success, #4caf50);
    --wefoodies-warning-color: var(--wp--preset--color--warning, #ff9800);
    --wefoodies-error-color: var(--wp--preset--color--error, #f44336);

    --wefoodies-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --wefoodies-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);

    /*
     * Floating UI button surfaces (gallery slider arrows, lightbox controls).
     * Must theme-switch independently of --wefoodies-background-color so the
     * button's pill remains opaque against busy image backgrounds in both
     * modes. Light: near-white frosted; dark: slate frosted (see dark block).
     */
    --wefoodies-button-bg: rgba(255, 255, 255, 0.95);
    --wefoodies-button-bg-hover: rgba(255, 255, 255, 1);
}

/* Dark-mode tokens — explicit attribute selector. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --wefoodies-border-color: var(--wp--preset--color--dark-grey, #374151);
    --wefoodies-text-color: var(--wp--preset--color--background, #f9fafb);

    /* Dark mode link: #5eead4 on #1f2937 = 9.1:1 (AAA). */
    --wefoodies-link-color: #5eead4;
    --wefoodies-link-color-hover: #99f6e4;
    --wefoodies-meta-color: var(--wp--preset--color--medium-grey, #9ca3af);
    --wefoodies-background-color: var(--wp--preset--color--foreground, #1f2937);
    --wefoodies-surface-color: var(--wp--preset--color--dark-grey, #1f2937);
    --wefoodies-primary-color: var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue, #38bdf8));
    --wefoodies-accent-color: var(--wp--preset--color--secondary, var(--wp--preset--color--vivid-purple, #a855f7));
    --wefoodies-success-color: var(--wp--preset--color--success, #66bb6a);
    --wefoodies-warning-color: var(--wp--preset--color--warning, #ffb74d);
    --wefoodies-error-color: var(--wp--preset--color--error, #ef5350);
    --wefoodies-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --wefoodies-hover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

    /*
     * Floating UI buttons in dark mode — slate w/ slight transparency so the
     * frosted-glass effect persists against image backgrounds.
     */
    --wefoodies-button-bg: rgba(31, 41, 55, 0.92);
    --wefoodies-button-bg-hover: rgba(45, 55, 72, 1);
}

/* OS-level dark-mode preference fallback (only when no explicit theme attribute). */
@media (prefers-color-scheme: dark) {

    :root:not([data-theme]) {
        --wefoodies-border-color: var(--wp--preset--color--dark-grey, #374151);
        --wefoodies-text-color: var(--wp--preset--color--background, #f9fafb);
        --wefoodies-link-color: #5eead4;
        --wefoodies-link-color-hover: #99f6e4;
        --wefoodies-meta-color: var(--wp--preset--color--medium-grey, #9ca3af);
        --wefoodies-background-color: var(--wp--preset--color--foreground, #1f2937);
        --wefoodies-surface-color: var(--wp--preset--color--dark-grey, #1f2937);
        --wefoodies-primary-color: var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue, #38bdf8));
        --wefoodies-accent-color: var(--wp--preset--color--secondary, var(--wp--preset--color--vivid-purple, #a855f7));
        --wefoodies-success-color: var(--wp--preset--color--success, #66bb6a);
        --wefoodies-warning-color: var(--wp--preset--color--warning, #ffb74d);
        --wefoodies-error-color: var(--wp--preset--color--error, #ef5350);
        --wefoodies-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        --wefoodies-hover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

        /* Floating UI buttons in dark mode (OS-preference fallback). */
        --wefoodies-button-bg: rgba(31, 41, 55, 0.92);
        --wefoodies-button-bg-hover: rgba(45, 55, 72, 1);
    }
}

/*
 * Apply tokens to <body> directly so the background actually goes dark.
 * WordPress sets background on <body>, not <html>, and the front-end theme
 * toggle adds .theme-dark to <body> — these selectors cover both pathways.
 */
:root[data-theme="dark"] body,
:root .theme-dark body,
body[data-theme="dark"],
body.theme-dark {
    background-color: var(--wefoodies-background-color, #1f2937);
    color: var(--wefoodies-text-color, #f3f4f6);
}

@media (prefers-color-scheme: dark) {

    body:not(.theme-light):not([data-theme="light"]):not([data-theme="dark"]):not(.theme-dark) {
        background-color: var(--wefoodies-background-color, #1f2937);
        color: var(--wefoodies-text-color, #f3f4f6);
    }
}

/* Utility classes shared across blocks — mirror src/shared/styles/_utilities.scss. */

.wefoodies-sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
    white-space: nowrap !important;
}

.wefoodies-sr-only-focusable:focus,
.wefoodies-sr-only-focusable:active {
    clip: auto !important;
    clip-path: none !important;
    display: block !important;
    height: auto !important;
    left: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 1rem !important;
    position: fixed !important;
    top: 0 !important;
    width: auto !important;
    z-index: 100000 !important;
    background: var(--wefoodies-surface-color, white) !important;
    color: var(--wefoodies-text-color, black) !important;
}