/* =========================================================
   AOM Design Tokens
   Alles over Mallorca
   -----------------------------------------
   ⚠️  Alleen CSS-variables
   ⚠️  Geen selectors behalve :root en media
   ⚠️  Geen globale WP / GP overrides
   Version: 2026-04-14 — aliases aangevuld (brand, radius, shadow-*)
   ========================================================= */

/* =========================================================
   Light mode (default)
   ========================================================= */

:root {
    /* -----------------------------------------------------
       Brand
    ----------------------------------------------------- */
    --aoo-brand: #0077b6; /* Mallorca blauw */
    /* Oostenrijks rood */
    --aoo-brand-strong: #005f8e;
    --aoo-brand-soft: #e8f4fd;

    /* -----------------------------------------------------
       Neutral colors
    ----------------------------------------------------- */
    --aoo-bg: #f4f4f4;
    --aoo-fg: #111827;
    --aoo-muted: #6b7280;

    /* -----------------------------------------------------
       Surfaces
    ----------------------------------------------------- */
    --aoo-surface: #ffffff;
    --aoo-surface-alt: #f9fafb;
    --aoo-border: #e5e7eb;

    /* -----------------------------------------------------
       Accent backgrounds
    ----------------------------------------------------- */
    --aoo-accent-blue-bg: #e3f2fd;
    --aoo-accent-green-bg: #e6f5ec;
    --aoo-accent-beige-bg: #fff9f3;
    --aoo-accent-warn-bg: #fff7e6;
    --aoo-accent-brand-bg: #e8f4fd;

    /* Accent borders */
    --aoo-accent-blue-border: #64b5f6;
    --aoo-accent-green-border: #3b8b5b;
    --aoo-accent-beige-border: #f4a300;
    --aoo-accent-warn-border: #f0c674;
    --aoo-accent-brand-border: #0077b6;

    /* -----------------------------------------------------
       Typography
    ----------------------------------------------------- */
    --aoo-font-base: system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --aoo-font-size-xs: 0.75rem;
    --aoo-font-size-sm: 0.875rem;
    --aoo-font-size-base: 1rem;
    --aoo-font-size-lg: 1.125rem;
    --aoo-font-size-xl: 1.375rem;

    /* -----------------------------------------------------
       Radius
    ----------------------------------------------------- */
    --aoo-radius-xs: 6px;
    --aoo-radius-sm: 10px;
    --aoo-radius: 12px;
    --aoo-radius-lg: 16px;
    --aoo-radius-xl: 24px;

    /* -----------------------------------------------------
       Shadows
    ----------------------------------------------------- */
    --aoo-shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.08);
    --aoo-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --aoo-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    --aoo-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* -----------------------------------------------------
       Spacing
    ----------------------------------------------------- */
    --aoo-space-1: 0.5rem;
    --aoo-space-2: 1rem;
    --aoo-space-3: 1.5rem;
    --aoo-space-4: 2rem;
    --aoo-space-5: 3rem;

    /* -----------------------------------------------------
       Motion
    ----------------------------------------------------- */
    --aoo-transition-fast: 150ms ease;
    --aoo-transition: 250ms ease;
    --aoo-transition-slow: 400ms ease;
}

/* =========================================================
   Dark mode (system preference)
   ========================================================= */

@media (prefers-color-scheme: dark) {
    :root {
        /* Neutral colors */
        --aoo-bg: #0b1220;
        --aoo-fg: #e5e7eb;
        --aoo-muted: #9ca3af;

        /* Surfaces */
        --aoo-surface: #0e1318;
        --aoo-surface-alt: #121821;
        --aoo-border: #1f2937;

        /* Accent backgrounds (subtiel) */
        --aoo-accent-blue-bg: rgba(99, 179, 237, 0.12);
        --aoo-accent-green-bg: rgba(72, 187, 120, 0.12);
        --aoo-accent-beige-bg: rgba(237, 28, 36, 0.12);
        --aoo-accent-warn-bg: rgba(252, 211, 77, 0.12);
        --aoo-accent-brand-bg: rgba(200, 140, 106, 0.12);

        /* Accent borders */
        --aoo-accent-blue-border: rgba(99, 179, 237, 0.45);
        --aoo-accent-green-border: rgba(72, 187, 120, 0.45);
        --aoo-accent-beige-border: rgba(237, 28, 36, 0.45);
        --aoo-accent-warn-border: rgba(252, 211, 77, 0.45);
        --aoo-accent-brand-border: rgba(200, 140, 106, 0.45);

        /* Shadows */
        --aoo-shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.35);
        --aoo-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45);
        --aoo-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        --aoo-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    }
}

/* =========================================================
   Aliases (legacy / shared tokens)
   -----------------------------------------
   These keep older components working while we migrate.
   ========================================================= */

:root {
    /* Links */
    --aoo-link: #0077b6;

    /* Brand */
    --brand: var(--aoo-brand);
    --brand-soft: var(--aoo-brand-soft);
    --brand-strong: var(--aoo-brand-strong);

    /* Generic aliases used in legacy/components */
    --bg: var(--aoo-bg);
    --fg: var(--aoo-fg);
    --muted: var(--aoo-muted);

    --card-bg: var(--aoo-surface);
    --card-fg: var(--aoo-fg);
    --ring: var(--aoo-border);

    /* Radius */
    --radius-sm: var(--aoo-radius-sm);
    --radius: var(--aoo-radius);
    --radius-lg: var(--aoo-radius-lg);

    /* Shadows */
    --shadow-xs: var(--aoo-shadow-xs);
    --shadow-sm: var(--aoo-shadow-sm);
    --shadow: var(--aoo-shadow-sm);
    --shadow-lg: var(--aoo-shadow-lg);

    /* Callout legacy variants */
    --blue-bg: var(--aoo-accent-blue-bg);
    --blue-border: var(--aoo-accent-blue-border);

    --green-bg: var(--aoo-accent-green-bg);
    --green-border: var(--aoo-accent-green-border);

    --beige-bg: var(--aoo-accent-beige-bg);
    --beige-border: var(--aoo-accent-beige-border);

    --warn-bg: var(--aoo-accent-warn-bg);
    --warn-border: var(--aoo-accent-warn-border);

    --brand-bg: var(--aoo-accent-brand-bg);
    --brand-border: var(--aoo-accent-brand-border);

    /* brand-alt = zelfde token, andere naam (gebruikt in disclaimer/servus) */
    --brand-alt-bg: var(--aoo-accent-brand-bg);
    --brand-alt-border: var(--aoo-accent-brand-border);

    /* Spacing */
    --space-1: var(--aoo-space-1);
    --space-2: var(--aoo-space-2);
    --space-3: var(--aoo-space-3);
    --space-4: var(--aoo-space-4);

    /* Convenience */
    --card-border: var(--ring);
}

@media (prefers-color-scheme: dark) {
    :root {
        --aoo-link: #8ab4f8;
    }
}

/* Keep generic link var for older CSS */
:root { --link: var(--aoo-link); }