/*
 * Zlix Shared Application Design Tokens
 * v0.21.2e2a4n2
 *
 * Presentation-only foundation for:
 *   - Zlix Customer Portal
 *   - Zlix Admin authentication surfaces
 *   - authenticated Zlix Admin
 *
 * This file intentionally contains NO component styling.
 *
 * Public marketing themes remain a separate concern.
 *
 * Portal and Admin share:
 *   - Zlix brand identity
 *   - application-shell geometry
 *   - typography scale
 *   - common component language
 *
 * Portal and Admin retain controlled visual variants.
 *
 * Security/status semantic colors are deliberately separate from
 * future user-editable theme values.
 */


/* ==================================================================
   SHARED ZLIX APPLICATION BRAND
   ================================================================== */

html[data-zlix-app-shell] {
    /*
     * Stable Zlix brand colors.
     *
     * These are shared brand identity values, not arbitrary
     * per-application colors.
     */
    --zlix-app-brand-ink: #0f1c35;
    --zlix-app-brand-navy: #162f63;
    --zlix-app-brand-navy-strong: #0f1c35;
    --zlix-app-brand-blue: #2563d8;
    --zlix-app-brand-secondary: #2f7fa0;

    /*
     * Shared application-shell geometry.
     */
    --zlix-app-shell-max-width: 1180px;
    --zlix-app-shell-gutter: 20px;

    --zlix-app-header-height: 72px;
    --zlix-app-header-height-mobile: 64px;

    --zlix-app-brand-mark-size: 42px;
    --zlix-app-brand-mark-size-mobile: 36px;

    /*
     * Slightly stronger than the current Portal wordmark while
     * remaining appropriately smaller than public-site branding.
     */
    --zlix-app-wordmark-primary-size: 1.20rem;
    --zlix-app-wordmark-secondary-size: .60rem;
    --zlix-app-wordmark-secondary-tracking: .11em;

    --zlix-app-product-label-size: .90rem;
    --zlix-app-meta-size: .80rem;

    /*
     * Shared shape language.
     */
    --zlix-app-radius-sm: 8px;
    --zlix-app-radius-md: 12px;
    --zlix-app-radius-lg: 16px;
    --zlix-app-radius-xl: 22px;
    --zlix-app-radius-pill: 999px;

    /*
     * Shared motion.
     */
    --zlix-app-transition-fast: 140ms ease;
    --zlix-app-transition-normal: 180ms ease;
}


/* ==================================================================
   CUSTOMER PORTAL APPLICATION VARIANT
   ================================================================== */

html[data-zlix-app-shell="portal"] {
    /*
     * Customer-facing treatment:
     * lighter and calmer than Admin.
     */
    --zlix-app-bg: #eef4f9;
    --zlix-app-surface: #ffffff;
    --zlix-app-surface-soft: #f7fafc;

    --zlix-app-text: #14283b;
    --zlix-app-text-muted: #5d7083;
    --zlix-app-text-subtle: #75889a;

    --zlix-app-border: #d7e2ec;
    --zlix-app-border-strong: #bdcddd;

    --zlix-app-accent: #1b5682;
    --zlix-app-accent-hover: #216b9d;
    --zlix-app-accent-soft: #f4f9fd;

    --zlix-app-header-bg: rgba(255, 255, 255, .96);
    --zlix-app-footer-bg: rgba(255, 255, 255, .82);

    --zlix-app-shadow:
        0 10px 28px rgba(16, 45, 70, .07);

    --zlix-app-shadow-strong:
        0 22px 55px rgba(16, 45, 70, .10);
}


/* ==================================================================
   ZLIX ADMIN APPLICATION VARIANT
   ================================================================== */

html[data-zlix-app-shell="admin"] {
    /*
     * Privileged application treatment:
     * same family as Portal, with a stronger navy/blue identity.
     */
    --zlix-app-bg: #eef3f7;
    --zlix-app-surface: #ffffff;
    --zlix-app-surface-soft: #f7fafc;

    --zlix-app-text: #10202e;
    --zlix-app-text-muted: #496174;
    --zlix-app-text-subtle: #708493;

    --zlix-app-border: #d8e2e9;
    --zlix-app-border-strong: #c7d5df;

    --zlix-app-accent: #087eaa;
    --zlix-app-accent-hover: #06698f;
    --zlix-app-accent-soft: #edf7fb;

    --zlix-app-admin-navy: #103957;
    --zlix-app-admin-navy-strong: #0b2d47;

    --zlix-app-header-bg: rgba(255, 255, 255, .97);
    --zlix-app-footer-bg: rgba(255, 255, 255, .84);

    --zlix-app-shadow:
        0 10px 28px rgba(15, 49, 77, .08);

    --zlix-app-shadow-strong:
        0 22px 58px rgba(15, 49, 77, .14);
}


/* ==================================================================
   PROTECTED SEMANTIC TOKENS
   ==================================================================
   These values are intentionally NOT part of future arbitrary theme
   customization. Operational meaning must remain visually reliable.
   ================================================================== */

html[data-zlix-app-shell] {
    --zlix-semantic-success: #146b32;
    --zlix-semantic-success-bg: #eef8f1;
    --zlix-semantic-success-border: #b9dac3;

    --zlix-semantic-info: #1b5682;
    --zlix-semantic-info-bg: #eef7fc;
    --zlix-semantic-info-border: #bfd3e4;

    --zlix-semantic-warning: #7a5312;
    --zlix-semantic-warning-bg: #fff9eb;
    --zlix-semantic-warning-border: #ead9ab;

    --zlix-semantic-danger: #a83232;
    --zlix-semantic-danger-bg: #fff4f3;
    --zlix-semantic-danger-border: #e3b8b3;

    /*
     * Environment indicators are semantic, not decorative.
     */
    --zlix-environment-development: #1b5682;
    --zlix-environment-development-bg: #f4f9fd;
    --zlix-environment-development-border: #bfd3e4;

    --zlix-environment-production: #146b32;
    --zlix-environment-production-bg: #eef8f1;
    --zlix-environment-production-border: #b9dac3;
}


/* ==================================================================
   MOBILE TOKEN ADJUSTMENTS
   ================================================================== */

@media (max-width: 700px) {
    html[data-zlix-app-shell] {
        --zlix-app-shell-gutter: 14px;
        --zlix-app-wordmark-primary-size: 1.04rem;
        --zlix-app-wordmark-secondary-size: .52rem;
    }
}


/* ==================================================================
   ACCESSIBILITY / MOTION CONTRACT
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
    html[data-zlix-app-shell] {
        --zlix-app-transition-fast: 0ms;
        --zlix-app-transition-normal: 0ms;
    }
}