/* ==========================================================================
   Arista Dealer Portal — Design Tokens (single source of truth)

   Every color used anywhere in this plugin — wp-admin screens, the legacy
   tab content, and the new app shell — should read from a variable defined
   in this file. Nothing else should declare :root variables. This exists
   specifically to prevent color drift: before this file, the "gold" brand
   color existed as two slightly different hardcoded hex values in two
   different stylesheets (--ccp-primary: #b8905b vs the shell's accent
   preset #B38953). Loaded first, with every other stylesheet depending on
   it (see Assets.php enqueue order).
   ========================================================================== */

:root {
    /* ---- Legacy system (--ccp-*) — consumed by wp-admin views and by
       every tab's existing inline styles. Left in place rather than
       renamed, since retrofitting every inline style that already
       references these names is exactly the work planned for the
       tab-by-tab Bootstrap rebuild, not something to do piecemeal here. */
    --ccp-bg: #f8fafc;
    --ccp-card: #ffffff;
    --ccp-text: #1e293b;
    --ccp-muted: #64748b;
    --ccp-line: #e2e8f0;
    --ccp-primary: #B38953;        /* now matches the "gold" accent preset exactly — previously #b8905b, a near-duplicate that had quietly drifted from the brand value */
    --ccp-primary-hover: #785c30;  /* darkened from the old #9c7643, which cleared 4.5:1 contrast with neither black nor white text */
    --ccp-primary-ink: #2b1d10;    /* text color for use ON --ccp-primary; overridden to white under the darker accent presets */
    --ccp-dark-slate: #0f172a;
    --ccp-shadow: 0 12px 30px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.01);
    --ccp-radius: 16px;
    --ccp-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- Official Arista brand tokens — also the "gold" accent preset
       for the new app shell. */
    --arista-bg-dark: #333333;
    --arista-cream: #FAF3DD;
    --arista-gold: #B38953;
    --arista-gold-border: #85684c; /* slightly darker than the brand value so hover-state white text keeps solid contrast */
    --arista-gold-ink: #2b1d10;    /* text color used ON the accent background — overridden per accent preset */
    --arista-gold-subtle: #4f463a; /* accent tinted ~22% into the dark sidebar, precomputed per accent */
    --arista-gray: #989898;
    --ccp-shell-caption-on-dark: #a3a3a3; /* higher-contrast caption color for small text on the dark sidebar (WCAG AA) */

    --ccp-shell-sidebar-width: 264px;
    --ccp-shell-sidebar-collapsed: 76px;
}

/* ---------------------------------------------------------------------- */
/* Accent presets — swap the accent color only, layout stays identical.   */
/* Each preset sets an "ink" color for text placed ON the accent          */
/* background and a "subtle" tint for lighter highlights, both chosen to  */
/* clear WCAG AA (4.5:1) against that specific accent — a plain white or  */
/* dark ink does not read well against every one of these colors.        */
/* Applied to BOTH surfaces: data-ccp-accent="<key>" on .ccp-app-shell    */
/* (the portal), and body.ccp-accent-<key> in wp-admin.                   */
/* ---------------------------------------------------------------------- */
.ccp-app-shell[data-ccp-accent="slate_blue"],
body.ccp-accent-slate_blue {
    --arista-gold: #3B5BA5;
    --arista-gold-border: #2E4780;
    --arista-gold-ink: #ffffff;
    --arista-gold-subtle: #353c4c;
    --ccp-primary: #3B5BA5;
    --ccp-primary-hover: #2E4780;
    --ccp-primary-ink: #ffffff;
}
.ccp-app-shell[data-ccp-accent="forest"],
body.ccp-accent-forest {
    --arista-gold: #3F6B4A;
    --arista-gold-border: #33573C;
    --arista-gold-ink: #ffffff;
    --arista-gold-subtle: #363f38;
    --ccp-primary: #3F6B4A;
    --ccp-primary-hover: #33573C;
    --ccp-primary-ink: #ffffff;
}
.ccp-app-shell[data-ccp-accent="burgundy"],
body.ccp-accent-burgundy {
    --arista-gold: #7A2E3B;
    --arista-gold-border: #611F2B;
    --arista-gold-ink: #ffffff;
    --arista-gold-subtle: #433235;
    --ccp-primary: #7A2E3B;
    --ccp-primary-hover: #611F2B;
    --ccp-primary-ink: #ffffff;
}

/* ---------------------------------------------------------------------- */
/* Light / dark mode — controls the MAIN content area of the app shell.   */
/* The sidebar stays on the dark brand background regardless of mode, by  */
/* design. Applied via data-ccp-mode="light|dark" on .ccp-app-shell.      */
/* ---------------------------------------------------------------------- */
.ccp-app-shell {
    --ccp-shell-bg: #f8fafc;
    --ccp-shell-surface: #ffffff;
    --ccp-shell-text: #1e293b;
    --ccp-shell-muted: #64748b;
    --ccp-shell-border: #e2e8f0;
}

.ccp-app-shell[data-ccp-mode="dark"] {
    --ccp-shell-bg: #1b1b1d;
    --ccp-shell-surface: #242426;
    --ccp-shell-text: #f1f1f1;
    --ccp-shell-muted: #a3a3a3;
    --ccp-shell-border: #38383b;
}

/* wp-admin dark mode reuses the SAME legacy --ccp-* names so every
   existing var(--ccp-bg) / var(--ccp-text) reference in the admin views
   picks this up automatically with zero changes to those files. */
body.ccp-dark-mode {
    --ccp-bg: #1b1b1d;
    --ccp-card: #242426;
    --ccp-text: #f1f1f1;
    --ccp-muted: #a3a3a3;
    --ccp-line: #38383b;
    --ccp-dark-slate: #f1f1f1;
}