/* =================================================================
   ABL Common UI Themes — Two independent axes:
     1. data-theme-mode="dark|light"  →  shared structural vars (bg, surface, text…)
     2. Accent colour                 →  set via JS style.setProperty() from user pick

   Aurora (teal→purple→pink) is the factory default, defined in :root.
   Users can pick any colour; JS derives all accent vars from the hex.
   Zero runtime computation for mode — pure CSS variable swapping.
   ================================================================= */


/* =================================================================
   MODE: Dark  (default — backward compatible)
   ================================================================= */
:root,
[data-theme-mode="dark"] {
    --abl-bg: #07080F;
    --abl-surface: #0E0F1A;
    --abl-card: #13141F;
    --abl-border: #1C1D2E;
    --abl-border-light: #252638;
    --abl-text: #E8EAF6;
    --abl-heading: #F8FAFC;
    --abl-muted: #6B7280;
}


/* =================================================================
   MODE: Light
   ================================================================= */
[data-theme-mode="light"] {
    --abl-bg: #F8F9FC;
    --abl-surface: #FFFFFF;
    --abl-card: #FFFFFF;
    --abl-border: #E2E4EA;
    --abl-border-light: #D1D5DB;
    --abl-text: #374151;
    --abl-heading: #111827;
    --abl-muted: #6B7280;
}


/* =================================================================
   GLOBAL ELEMENT RESETS — hr, etc.
   ================================================================= */

hr {
    border: none;
    border-top: 1px solid var(--abl-border, #1C1D2E);
    margin: 2rem 0;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--abl-checkbox-accent, #72AA16);
}


/* =================================================================
   AURORA DEFAULT ACCENT — Factory default, always present as fallback.
   JS overrides these via style.setProperty() when user picks a colour.
   ================================================================= */
:root {
    --abl-blue: #3B82F6;
    --abl-teal: #0ED9B4;
    --abl-purple: #7B61FF;
    --abl-pink: #FF5FA0;
    --abl-amber: #FFB347;
    --abl-green: #34D399;
    --abl-red: #F87171;
    --abl-accent-default: #72AA16;
    --abl-accent: #72AA16;
    --abl-toggle-accent: #72AA16;
    --abl-cta-accent: #495E29;
    --abl-nav-accent: #72AA16;
    --abl-chat-accent: #F65CB3;
    --abl-checkbox-accent: #72AA16;
    --abl-warn-accent: #f59e0b;
    --abl-danger-accent: #F87171;
}

/* Light mode: slightly darker accent for contrast */
[data-theme-mode="light"] {
    --abl-accent: #5E8E12;
}


/* =================================================================
   COMPONENT VARIABLES — Nav, Footer, Buttons, Promo, Highlight
   ================================================================= */

/* ── Nav, Footer, Promo — mode-responsive ── */

/* Light mode (default for nav) */
:root,
[data-theme-mode="light"] {
    --abl-nav-bg: #ffffff;
    --abl-nav-text: #374151;
    --abl-nav-border: #E2E4EA;
    /* Resolve from --abl-nav-accent (admin "Nav" interface accent row),
       NOT --abl-accent. The FOUC overrides --abl-accent per-page-context
       (themes_blog_hex / themes_status_hex / etc.) which would otherwise
       cause the global navbar to take whatever colour the admin picked
       for the current page's body — leaking page theming into the header.
       The navbar should stay visually neutral across all pages. */
    --abl-nav-btn-primary-bg: var(--abl-nav-accent, #0ED9B4);
    --abl-nav-btn-primary-text: #ffffff;
    --abl-nav-btn-ghost-text: #374151;
    --abl-nav-btn-ghost-border: #E2E4EA;
    --abl-nav-btn-highlight-bg: rgba(0, 0, 0, 0.04);
    --abl-footer-bg: #111827;
    --abl-footer-text: #9CA3AF;
    --abl-footer-heading: #ffffff;
    --abl-footer-link: #D1D5DB;
    --abl-footer-border: rgba(255, 255, 255, 0.1);
    --abl-promo-bg: linear-gradient(90deg, #0ED9B4, #7B61FF, #FF5FA0);
    --abl-promo-text: #ffffff;
}

/* Dark mode nav/footer overrides */
[data-theme-mode="dark"] {
    --abl-nav-bg: #0E0F1A;
    --abl-nav-text: #E8EAF6;
    --abl-nav-border: #1C1D2E;
    --abl-nav-btn-ghost-text: #E8EAF6;
    --abl-nav-btn-ghost-border: #1C1D2E;
    --abl-nav-btn-highlight-bg: rgba(255, 255, 255, 0.04);
    --abl-footer-bg: #07080F;
    --abl-footer-text: #6B7280;
    --abl-footer-heading: #F8FAFC;
    --abl-footer-link: #9CA3AF;
    --abl-footer-border: rgba(255, 255, 255, 0.06);
}

/* ── Role-based avatar ring colours (admin-configurable) ── */
:root {
    --abl-avatar-owner: #FBBF24;
    --abl-avatar-admin: #A855F7;
    --abl-avatar-member: #FFFFFF;
    --abl-avatar-guest: #6B7280;
}

/* =================================================================
   PAGE THEME ACCENTS — Per-context (admin-configurable)

   Defaults for the platform's three theme contexts. The admin can
   override these via the platformmgmt theme picker, which writes to
   Redis KV (platform:override:default.settings.themes_<ctx>_hex) and
   the gateway's platform_settings context processor injects the
   override into every Jinja template, where the FOUC partial sets
   the matching CSS variable on documentElement.

   Mode defaults (dark / light) are NOT in CSS — they live in a
   small Python dict in
   abl_gateway/abl_backend_package/gateway/platform_settings.py
   because they drive the data-theme-mode attribute, not a CSS var.
   ================================================================= */
:root {
    --abl-page-public-hex: #72AA16;
    --abl-page-blog-hex:   #B94B11;
    --abl-page-app-hex:    #72AA16;
    --abl-page-status-hex: #72AA16;

    /* Blog-scoped accent — defined here as the single source so every
       blog stylesheet (index, post, aei-landing, aei-shell) inherits
       the same resolution chain without duplicating the definition.
       Resolves from the admin-controlled --abl-page-blog-hex and falls
       back to the global platform accent. */
    --abl-blog-accent: var(--abl-page-blog-hex, var(--abl-accent));
}

/* =================================================================
   BLOG PAPER PALETTE — Fixed visual identity for all /blog/* pages.
   Mode-responsive (manila for light, walnut/leather for dark). The
   blog accent picker (themes_blog_hex) controls links/buttons/headings
   independently — these paper variables are NOT admin-configurable
   because they're a product visual identity decision, not a brand
   choice. The blog stylesheets read these via var(--abl-blog-paper) +
   var(--abl-blog-paper-text) and apply the SVG noise grain on top.
   ================================================================= */
/* Blog paper is the SAME MATERIAL in both modes (always cream paper),
   just slightly dimmed in dark mode for comfortable night reading.
   Text stays dark on the cream paper in both modes. The platform
   dark/light toggle shifts the paper a notch darker but keeps the
   yellow-cream identity intact — the blog product always reads as
   physical paper. Other products (status, app, etc.) flip palettes
   normally; only blog uses these mode-invariant cream values. */
:root,
[data-theme-mode="light"] {
    --abl-blog-paper:        #FBF4D9;
    --abl-blog-paper-edge:   #F0E6B8;
    --abl-blog-paper-text:   #3A2E10;
    --abl-blog-paper-heading:#1F1808;
    --abl-blog-paper-muted:  #7A6730;
}

[data-theme-mode="dark"] {
    /* Slightly dimmed cream — same material, night-reading shade. */
    --abl-blog-paper:        #EDE3BC;
    --abl-blog-paper-edge:   #D8CB94;
    --abl-blog-paper-text:   #2E2410;
    --abl-blog-paper-heading:#1A1408;
    --abl-blog-paper-muted:  #6A5820;
}

/* Procedural SVG noise grain for the paper effect. Inline data URI of
   an feTurbulence filter — 200×200 px tile, frequency 1.2 (fine paper
   fibres, not marble veins), alpha 0.22 (subtle, present-but-quiet),
   single octave so the noise stays fine-grained without clustering
   into larger blobs. Defined here once so all 4 blog stylesheets can
   read it from the cascade without duplicating the data URI. The
   blog body uses it as one of three stacked background-image layers
   (grain + edge vignette + paper colour). */
:root {
    --abl-blog-paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =================================================================
   PRODUCT GROUP ACCENTS — Per-group (admin-configurable)

   One CSS variable per product group. Admin overrides via the
   platformmgmt theme picker; reset deletes the Redis key and the
   cascade falls back to these defaults. Group codes match the
   "groups" map in abl_common_ui_product/product_registry.json
   (everyone, sales-marketing, hr-operations, finance-admin).
   New groups added to the registry MUST also get a default here.
   ================================================================= */
:root {
    --abl-group-everyone:        #72AA16;
    --abl-group-sales-marketing: #72AA16;
    --abl-group-hr-operations:   #72AA16;
    --abl-group-finance-admin:   #72AA16;
}

/* ── Dark mode button/highlight defaults ── */
:root,
[data-theme-mode="dark"] {
    --abl-btn-primary-bg: var(--abl-accent);
    --abl-btn-primary-text: #ffffff;
    --abl-cta-text: #ffffff;
    --abl-btn-gradient: linear-gradient(135deg, var(--abl-accent), var(--abl-purple));
    --abl-btn-ghost-text: var(--abl-accent);
    --abl-btn-ghost-border: var(--abl-border-light);
    --abl-highlight-bg: rgba(14, 217, 180, 0.08);
    --abl-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* ── Light mode button/highlight defaults ── */
[data-theme-mode="light"] {
    --abl-btn-primary-bg: var(--abl-accent);
    --abl-btn-primary-text: #ffffff;
    --abl-cta-text: #ffffff;
    --abl-btn-gradient: linear-gradient(135deg, var(--abl-accent), var(--abl-purple));
    --abl-btn-ghost-text: var(--abl-accent);
    --abl-btn-ghost-border: var(--abl-border-light);
    --abl-highlight-bg: rgba(0, 0, 0, 0.04);
    --abl-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}