/* ao-tokens.css — AO design-system CSS custom property tokens
   Used by App.Web + App.Mobile via AgencyOffice.App.Components RCL.
   Selector: [data-ao-theme='light|dark|legacy'] on any ancestor element.
   Default (:root) = light, so un-themed content inherits the light palette. */

/* ================================================================
   LIGHT THEME (default)
   ================================================================ */
:root,
[data-ao-theme='light'] {
    /* Brand anchors */
    --brand-dark-blue:  #1A4179;
    --brand-light-blue: #5091C4;
    --brand-magenta:    #E42289;
    --brand-orange:     #F88D2F;
    --brand-teal:       #4F9BBA; /* legacy ref only */

    /* Page surfaces */
    --color-bg:         #f3f6fb;
    --color-text:       #0f172a;
    --color-muted-text: rgba(15, 23, 42, 0.70);
    --surface-1:        #ffffff;
    --surface-2:        #eef3fb;
    --surface-3:        #e7eef9;
    --border-1:         rgba(15, 23, 42, 0.12);
    --border-2:         rgba(15, 23, 42, 0.18);

    /* Links */
    --color-link:       var(--brand-orange);
    --color-link-hover: #e6780c;

    /* Focus */
    --focus-ring:       rgba(80, 145, 196, 0.35);

    /* Primary action (orange on light) */
    --color-primary:       var(--brand-orange);
    --color-primary-hover: #e6780c;
    --color-on-primary:    #ffffff;

    /* Accent — per-tenant override via --brand-accent-override inline style */
    --color-accent:    var(--brand-accent-override, var(--brand-magenta));
    --color-on-accent: #ffffff;

    /* Semantic */
    --color-success: #16a34a;
    --color-warning: var(--brand-orange);
    --color-danger:  #dc2626;

    /* Shell (header / nav strip) */
    --shell-bg:     var(--brand-dark-blue);
    --shell-text:   #ffffff;
    --shell-border: rgba(255, 255, 255, 0.22);

    /* Inputs */
    --input-bg:          #ffffff;
    --input-text:        #0f172a;
    --input-border:      rgba(15, 23, 42, 0.18);
    --input-border-hover:rgba(15, 23, 42, 0.28);
    --input-placeholder: rgba(15, 23, 42, 0.45);

    /* Legacy panel tokens (kept for compat) */
    --panel-bg:        var(--surface-1);
    --panel-header-bg: var(--surface-2);
    --card-bg:         #ffffff;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.10);
    --shadow-md: 0 10px 24px rgba(2, 6, 23, 0.12);

    /* Avatar (for dark-theme-safe generated initials) */
    --avatar-saturation: 45%;
    --avatar-lightness:  45%;
    --avatar-text:       #ffffff;

    /* AI button (purple — same across all themes) */
    --ai-btn-bg:      #6d5dfc;
    --ai-btn-bg-hover:#7f73ff;
    --ai-btn-bg-active:#5b4ee8;
    --ai-btn-glow:    rgba(109, 93, 252, 0.25);
    --ai-btn-shadow:  0 8px 18px rgba(2, 6, 23, 0.18);
}

/* ================================================================
   DARK THEME
   ================================================================ */
[data-ao-theme='dark'] {
    /* Brand anchors */
    --brand-dark-blue:  #1A4179;
    --brand-light-blue: #5091C4;
    --brand-magenta:    #E42289;
    --brand-orange:     #F88D2F;
    --brand-teal:       #4F9BBA;

    /* Page surfaces */
    --color-bg:         #0b1220;
    --color-text:       #e5e7eb;
    --color-muted-text: rgba(229, 231, 235, 0.72);
    --surface-1:        #0f172a;
    --surface-2:        #111c33;
    --surface-3:        #162444;
    --border-1:         rgba(255, 255, 255, 0.12);
    --border-2:         rgba(255, 255, 255, 0.20);

    /* Links */
    --color-link:       #9ec5ff;
    --color-link-hover: #c3dbff;

    /* Focus */
    --focus-ring:       rgba(80, 145, 196, 0.45);

    /* Primary action (blue on dark) */
    --color-primary:       #2f6db5;
    --color-primary-hover: #2a5f9d;
    --color-on-primary:    #ffffff;

    /* Accent */
    --color-accent:    var(--brand-accent-override, var(--brand-magenta));
    --color-on-accent: #ffffff;

    /* Semantic */
    --color-success: #22c55e;
    --color-warning: var(--brand-orange);
    --color-danger:  #f87171;

    /* Shell */
    --shell-bg:     #0c1630;
    --shell-text:   #ffffff;
    --shell-border: rgba(255, 255, 255, 0.14);

    /* Inputs */
    --input-bg:           #0b142b;
    --input-text:         #e5e7eb;
    --input-border:       rgba(255, 255, 255, 0.16);
    --input-border-hover: rgba(255, 255, 255, 0.24);
    --input-placeholder:  rgba(229, 231, 235, 0.55);

    /* Panel */
    --panel-bg:        var(--surface-1);
    --panel-header-bg: var(--surface-2);
    --card-bg:         rgba(255, 255, 255, 0.04);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35);

    /* Avatar (lighter for dark bg contrast) */
    --avatar-saturation: 50%;
    --avatar-lightness:  60%;
    --avatar-text:       #0f172a;

    /* AI button */
    --ai-btn-bg:       #6d5dfc;
    --ai-btn-bg-hover: #7f73ff;
    --ai-btn-bg-active:#5b4ee8;
    --ai-btn-glow:     rgba(109, 93, 252, 0.35);
    --ai-btn-shadow:   0 8px 18px rgba(0, 0, 0, 0.35);
}

/* ================================================================
   LEGACY THEME
   ================================================================ */
[data-ao-theme='legacy'] {
    /* Legacy-specific palette refs */
    --legacy-teal:       #01828f;
    --legacy-teal-hover: #01909c;
    --legacy-deep:       #00343b;
    --legacy-blue:       #004c93;
    --legacy-lite:       #cadced;

    /* Brand anchors (legacy mappings) */
    --brand-dark-blue:  #004c93;
    --brand-light-blue: #cadced;
    --brand-magenta:    #E42289;
    --brand-orange:     #F88D2F;
    --brand-teal:       #01828f;

    /* Page surfaces */
    --color-bg:         #ffffff;
    --color-text:       #111111;
    --color-muted-text: #4b5563;
    --surface-1:        #ffffff;
    --surface-2:        #f3f4f6;
    --surface-3:        #e5e5e5;
    --border-1:         #cccccc;
    --border-2:         #a0a0a0;

    /* Links */
    --color-link:       var(--legacy-teal);
    --color-link-hover: #00a1af;

    /* Focus */
    --focus-ring: rgba(1, 130, 143, 0.35);

    /* Primary action (teal on legacy) */
    --color-primary:       var(--legacy-teal);
    --color-primary-hover: var(--legacy-teal-hover);
    --color-on-primary:    #ffffff;

    /* Accent */
    --color-accent:    var(--brand-accent-override, var(--legacy-blue));
    --color-on-accent: #ffffff;

    /* Semantic */
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger:  #dc2626;

    /* Shell */
    --shell-bg:     var(--legacy-deep);
    --shell-text:   #ffffff;
    --shell-border: rgba(255, 255, 255, 0.15);

    /* Inputs */
    --input-bg:           #ffffff;
    --input-text:         #111111;
    --input-border:       #cccccc;
    --input-border-hover: #999999;
    --input-placeholder:  rgba(85, 85, 85, 0.7);

    /* Panel */
    --panel-bg:        var(--surface-1);
    --panel-header-bg: var(--surface-2);
    --card-bg:         #ffffff;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);

    /* AI button */
    --ai-btn-bg:       #6d5dfc;
    --ai-btn-bg-hover: #7f73ff;
    --ai-btn-bg-active:#5b4ee8;
    --ai-btn-glow:     rgba(109, 93, 252, 0.25);
    --ai-btn-shadow:   0 8px 18px rgba(0, 0, 0, 0.18);
}