/*
 * Excelano Brand
 * Primary: #4B0082 (purple)
 * Secondary: #16A34A (green)
 * Tertiary: #FECD00 (gold, sparing use only)
 *
 * Mirrors excelano-brand/brand.css and layers on Excelano-site-specific
 * variables (hero treatments, spacing, layout). No gradients — per the
 * brand spec, color transitions are done with solid tints and shades.
 *
 * Author: David M. Anderson
 * Built with AI assistance (Claude, Anthropic)
 */

:root {
    /* ---- Extended palette (theme-independent) ------------------ */
    --primary:          #4b0082;
    --primary-tint-1:   #814da8;
    --primary-tint-2:   #b799cd;
    --primary-tint-3:   #e4d9ec;
    --primary-shade-1:  #35005b;
    --primary-shade-2:  #1e0034;
    --primary-shade-3:  #0b0014;
    --secondary:        #16A34A;
    --secondary-tint-1: #5cbf80;
    --secondary-tint-2: #a2dab7;
    --secondary-tint-3: #dcf1e4;
    --secondary-shade-1:#0f7234;
    --secondary-shade-2:#09411e;
    --secondary-shade-3:#03180b;

    /* Tertiary (gold) is reserved for sparing accent use. Do not
       treat as a third primary; pull in only where purple and green
       together need another voice. */
    --tertiary:         #FECD00;
    --tertiary-dark:    #b59200;

    /* ---- Axe contract — Light mode ----------------------------- */
    --color-bg:              #f7f7f8;
    --color-surface:         #ffffff;
    --color-text:            #1f1a23;
    --color-text-muted:      #6d5e78;
    --color-border:          #e1dde3;
    --color-accent:          #4b0082;
    --color-accent-hover:    #35005b;
    --color-highlight:       #16A34A;
    --color-highlight-hover: #0f7234;
    --color-nav-bg:          #260041;
    --color-nav-text:        #f2f2f2;

    /* Typography */
    --font-body:    system-ui, Arial, Helvetica, sans-serif;
    --font-heading: var(--font-body);
    --font-mono:    'Courier New', Courier, monospace;
    --line-height:  1.7;

    /* Shape */
    --radius: 5px;

    /* Shadow */
    --shadow:    0 1px 3px rgba(0, 0, 0, 0.09);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.11);

    /* ---- Excelano aliases (shorter names used in component CSS) */
    --bg:             var(--color-bg);
    --bg-alt:         var(--color-surface);
    --text:           var(--color-text);
    --text-muted:     var(--color-text-muted);
    --border:         var(--color-border);
    --accent:         var(--color-accent);
    --accent-dark:    var(--color-accent-hover);
    --highlight:      var(--color-highlight);
    --highlight-dark: var(--color-highlight-hover);
    --font-sans:      var(--font-body);

    /* ---- Excelano-specific (no axe equivalent) ----------------- */
    --bg-hero:    #4b0082;
    --hero-deep:  #2e0050;
    --text-light: #f7f7f8;

    /* ---- Family sub-brands (redesign) --------------------------
       One accent hue per domain family. Light values here; the dark
       blocks below brighten them for a dark ground, the way Blick and
       Zirbe brighten their own accents. Blick and Zirbe keep their own
       sub-brands (css/style.css). */
    --family-m365:              #1E5FB4;
    --family-tabular:           #C2410C;
    --family-docs:              #0F766E;
    /* Hero grounds for a family-led hero. Not themed: a hero renders on
       a dark ground in light and dark alike, so one value each. */
    --family-m365-hero:         #10366b;
    --family-m365-hero-deep:    #0a2447;
    --family-tabular-hero:      #5a1e08;
    --family-tabular-hero-deep: #3a1305;
    --family-docs-hero:         #0a463f;
    --family-docs-hero-deep:    #06302b;

    --space-xs:   0.5rem;
    --space-sm:   1rem;
    --space-md:   2rem;
    --space-lg:   4rem;
    --space-xl:   6rem;

    --max-width:  1100px;
    --nav-height: 64px;
}

/* Dark mode — system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:              #151117;
        --color-surface:         #221d25;
        --color-text:            #ebe9ec;
        --color-text-muted:      #9a91a1;
        --color-border:          #393041;
        --color-accent:          #814da8;
        --color-accent-hover:    #b799cd;
        --color-highlight:       #5cbf80;
        --color-highlight-hover: #a2dab7;
        --color-nav-bg:          #0b0014;
        --color-nav-text:        #ebebeb;
        --shadow:                0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow-md:             0 4px 12px rgba(0, 0, 0, 0.5);

        --bg-hero:    #2e0050;
        --hero-deep:  #1a0030;

        --family-m365:    #5b9be6;
        --family-tabular: #e57a3f;
        --family-docs:    #2bb9ab;
    }
}

/* Dark mode — manual override */
[data-theme="dark"] {
    --color-bg:              #151117;
    --color-surface:         #221d25;
    --color-text:            #ebe9ec;
    --color-text-muted:      #9a91a1;
    --color-border:          #393041;
    --color-accent:          #814da8;
    --color-accent-hover:    #b799cd;
    --color-highlight:       #5cbf80;
    --color-highlight-hover: #a2dab7;
    --color-nav-bg:          #0b0014;
    --color-nav-text:        #ebebeb;
    --shadow:                0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:             0 4px 12px rgba(0, 0, 0, 0.5);

    --bg-hero:    #2e0050;
    --hero-deep:  #1a0030;

    --family-m365:    #5b9be6;
    --family-tabular: #e57a3f;
    --family-docs:    #2bb9ab;
}

/* Light mode — manual override */
[data-theme="light"] {
    --color-bg:              #f7f7f8;
    --color-surface:         #ffffff;
    --color-text:            #1f1a23;
    --color-text-muted:      #6d5e78;
    --color-border:          #e1dde3;
    --color-accent:          #4b0082;
    --color-accent-hover:    #35005b;
    --color-highlight:       #16A34A;
    --color-highlight-hover: #0f7234;
    --color-nav-bg:          #260041;
    --color-nav-text:        #f2f2f2;
    --shadow:                0 1px 3px rgba(0, 0, 0, 0.09);
    --shadow-md:             0 4px 12px rgba(0, 0, 0, 0.11);

    --bg-hero:    #4b0082;
    --hero-deep:  #2e0050;

    --family-m365:    #1E5FB4;
    --family-tabular: #C2410C;
    --family-docs:    #0F766E;
}