/*
 * ASA design system — single source of truth for brand colors, type and surfaces.
 * Loaded after every theme / Tailwind stylesheet, so it overrides the purchased
 * theme's palette (--anity-*) and the old public.css palette (--color-*).
 *
 * Brand (from the logo): navy #213253, mint #ACE1DB.
 * Direction: modern, minimal, generous whitespace, soft "glass" surfaces.
 * Dark mode: `dark` class on <html> (set in layouts/main.blade.php).
 */

:root {
    /* Brand */
    --asa-navy: #213253;
    --asa-navy-rgb: 33, 50, 83;
    --asa-navy-700: #18263F;
    --asa-navy-900: #0E1829;
    --asa-mint: #ACE1DB;
    --asa-mint-rgb: 172, 225, 219;
    --asa-teal: #2E8C82;            /* mint deepened for text/icons on white (AA) */
    --asa-teal-rgb: 46, 140, 130;

    /* Semantic — light */
    --asa-bg: #F6F9FA;
    --asa-surface: #FFFFFF;
    --asa-surface-2: #EEF5F5;
    --asa-text: #16233A;
    --asa-text-muted: #5A6880;
    --asa-border: rgba(var(--asa-navy-rgb), .10);
    --asa-accent: var(--asa-navy);        /* buttons, links */
    --asa-accent-contrast: #FFFFFF;
    --asa-accent-soft: var(--asa-mint);   /* highlights, tags, focus */
    --asa-link: var(--asa-teal);

    /* Glass */
    --asa-glass-bg: rgba(255, 255, 255, .62);
    --asa-glass-border: rgba(255, 255, 255, .55);
    --asa-glass-blur: 16px;
    --asa-glass-shadow: 0 8px 32px rgba(var(--asa-navy-rgb), .08);

    /* Shape & type */
    --asa-radius-sm: 10px;
    --asa-radius: 18px;
    --asa-radius-lg: 28px;
    --asa-radius-pill: 999px;
    --asa-shadow-sm: 0 1px 2px rgba(var(--asa-navy-rgb), .06), 0 2px 8px rgba(var(--asa-navy-rgb), .04);
    --asa-shadow: 0 12px 40px rgba(var(--asa-navy-rgb), .10);
    --asa-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --asa-font-display: "Libre Baskerville", Georgia, serif; /* echoes the logo's serif wordmark */
    --asa-ease: cubic-bezier(.2, .7, .2, 1);

    /* Remap the purchased theme's variables onto the brand */
    --anity-font: var(--asa-font);
    --anity-font-two: var(--asa-font-display);
    --anity-font-three: var(--asa-font-display);
    --anity-gray: var(--asa-text-muted);
    --anity-gray-rgb: 90, 104, 128;
    --anity-base: var(--asa-navy);
    --anity-base-rgb: var(--asa-navy-rgb);
    --anity-primary: var(--asa-teal);
    --anity-primary-rgb: var(--asa-teal-rgb);
    --anity-extra: var(--asa-mint);
    --anity-extra-rgb: var(--asa-mint-rgb);
    --anity-extra-two: var(--asa-surface-2);
    --anity-extra-two-rgb: 238, 245, 245;
    --anity-black: var(--asa-text);
    --anity-black-rgb: 22, 35, 58;
    --anity-white: #FFFFFF;
    --anity-bdr-color: var(--asa-border);
    --anity-bdr-radius: var(--asa-radius);

    /* Remap the old public.css palette */
    --color-primary: var(--asa-navy);
    --color-primary-hover: var(--asa-navy-700);
    --color-primary-light: var(--asa-surface-2);
    --color-secondary: var(--asa-teal);
    --color-secondary-hover: #24736B;
    --color-secondary-light: #E3F4F2;
    --color-sunny: var(--asa-mint);
    --color-mint: var(--asa-mint);
    --color-lavender: var(--asa-mint);
    --color-text: var(--asa-text);
    --color-text-light: var(--asa-text-muted);
    --color-background: var(--asa-bg);
    --color-card: var(--asa-surface);
    --color-border: var(--asa-border);

    color-scheme: light;
}

html.dark {
    --asa-bg: #0B1322;
    --asa-surface: #111C30;
    --asa-surface-2: #16233A;
    --asa-text: #E7EEF6;
    --asa-text-muted: #9AA8BD;
    --asa-border: rgba(255, 255, 255, .09);
    --asa-accent: var(--asa-mint);
    --asa-accent-contrast: var(--asa-navy-900);
    --asa-link: var(--asa-mint);

    --asa-glass-bg: rgba(17, 28, 48, .58);
    --asa-glass-border: rgba(255, 255, 255, .08);
    --asa-glass-shadow: 0 8px 32px rgba(0, 0, 0, .35);
    --asa-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --asa-shadow: 0 12px 40px rgba(0, 0, 0, .35);

    --anity-base: var(--asa-mint);
    --anity-base-rgb: var(--asa-mint-rgb);
    --anity-primary: var(--asa-mint);
    --anity-primary-rgb: var(--asa-mint-rgb);
    --anity-black: var(--asa-text);
    --anity-black-rgb: 231, 238, 246;
    --anity-gray: var(--asa-text-muted);
    --anity-extra-two: var(--asa-surface-2);
    --anity-white: var(--asa-surface);
    --anity-bdr-color: var(--asa-border);

    --color-primary: var(--asa-mint);
    --color-primary-hover: #C4EBE6;
    --color-primary-light: var(--asa-surface-2);
    --color-text: var(--asa-text);
    --color-text-light: var(--asa-text-muted);
    --color-background: var(--asa-bg);
    --color-card: var(--asa-surface);
    --color-border: var(--asa-border);

    color-scheme: dark;
}

/* ---------- Base ---------- */

body {
    background: var(--asa-bg);
    color: var(--asa-text);
    font-family: var(--asa-font);
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s var(--asa-ease), color .3s var(--asa-ease);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--asa-text);
    letter-spacing: -0.01em;
}

a { color: var(--asa-link); }

::selection { background: var(--asa-mint); color: var(--asa-navy); }

:focus-visible {
    outline: 2px solid var(--asa-teal);
    outline-offset: 3px;
}

/* ---------- Glass surface utility ---------- */

.asa-glass {
    background: var(--asa-glass-bg);
    -webkit-backdrop-filter: blur(var(--asa-glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--asa-glass-blur)) saturate(140%);
    border: 1px solid var(--asa-glass-border);
    box-shadow: var(--asa-glass-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .asa-glass { background: var(--asa-surface); }
}

/* ---------- Buttons (theme .thm-btn) ---------- */

.thm-btn {
    background: var(--asa-accent);
    color: var(--asa-accent-contrast);
    border-radius: var(--asa-radius-pill);
    font-family: var(--asa-font);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: var(--asa-shadow-sm);
    transition: transform .2s var(--asa-ease), box-shadow .2s var(--asa-ease), background-color .2s var(--asa-ease);
}

.thm-btn:hover {
    color: var(--asa-accent-contrast);
    transform: translateY(-1px);
    box-shadow: var(--asa-shadow);
}

/* The theme animates a coloured layer on hover; keep it on-brand. */
.thm-btn::before,
.thm-btn::after {
    background-color: var(--asa-navy-700);
}

html.dark .thm-btn::before,
html.dark .thm-btn::after {
    background-color: #C4EBE6;
}

.thm-btn span,
.thm-btn i { color: inherit; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}