/* ==========================================================================
   Accent Colour System — DevPortal
   ==========================================================================
   PHP sets data-devportal-accent on <html> server-side from theme settings,
   so no JS is needed to avoid flash-of-unstyled-content.

   Architecture:
     1. Each preset block defines three primitives:
          --color-brand-primary-rgb        R, G, B triplet (no #)
          --color-brand-primary-hover-val  darker hex for :hover states
          --color-brand-primary-active-val darker hex for :active / pressed

     2. The base [data-devportal-accent] block derives every brand token
        from those three values so all 40+ components update automatically.

     3. For custom colours, PHP (page_attachments_alter) or accent.js
        injects a <style class="devportal-custom-accent"> block that sets
        the same three primitives on [data-devportal-accent="custom"].

   Presets mirror gin's full colour palette so the two systems stay visually
   in-sync when gin's accent bridge is active on admin pages.
   ========================================================================== */

/* ── Base: derive all brand tokens from the three primitives ─────────────── */

[data-devportal-accent] {
  --color-brand-primary:               rgb(var(--color-brand-primary-rgb));
  --color-brand-primary-hover:         var(--color-brand-primary-hover-val);
  --color-brand-primary-active:        var(--color-brand-primary-active-val);
  --color-brand-primary-light:         rgba(var(--color-brand-primary-rgb), 0.12);
  --color-brand-secondary:             rgb(var(--color-brand-primary-rgb));
  --color-brand-secondary-hover:       var(--color-brand-primary-hover-val);
  --color-brand-accent:                rgb(var(--color-brand-primary-rgb));
  --color-brand-accent-hover:          var(--color-brand-primary-hover-val);
  --color-brand-primary-subtle:        rgba(var(--color-brand-primary-rgb), 0.08);
  --color-brand-primary-subtle-border: rgba(var(--color-brand-primary-rgb), 0.20);
  --color-brand-primary-subtle-hover:  rgba(var(--color-brand-primary-rgb), 0.14);
  --color-border-focus:                rgb(var(--color-brand-primary-rgb));
  --color-interactive-primary:         rgb(var(--color-brand-primary-rgb));
  --color-interactive-primary-hover:   var(--color-brand-primary-hover-val);
  --color-text-link:                   rgb(var(--color-brand-primary-rgb));
  --color-text-link-hover:             var(--color-brand-primary-hover-val);
  --color-focus:                       rgb(var(--color-brand-primary-rgb));
}

/* Dark mode: slightly soften primary for better contrast on dark backgrounds */
[data-theme="dark"][data-devportal-accent] {
  --color-brand-primary-light:         rgba(var(--color-brand-primary-rgb), 0.15);
  --color-brand-primary-subtle:        rgba(var(--color-brand-primary-rgb), 0.10);
  --color-brand-primary-subtle-border: rgba(var(--color-brand-primary-rgb), 0.22);
  --color-brand-primary-subtle-hover:  rgba(var(--color-brand-primary-rgb), 0.16);
}

/* ── Presets — matching gin's full colour palette ────────────────────────── */

/* Navy — DevPortal-specific deep navy, kept as default brand colour */
[data-devportal-accent="navy"] {
  --color-brand-primary-rgb:        0, 48, 143;
  --color-brand-primary-hover-val:  #002570;
  --color-brand-primary-active-val: #001f5c;
}

/* Blue */
[data-devportal-accent="blue"] {
  --color-brand-primary-rgb:        5, 80, 230;
  --color-brand-primary-hover-val:  #0444c4;
  --color-brand-primary-active-val: #043cad;
}

/* Light Blue */
[data-devportal-accent="light_blue"] {
  --color-brand-primary-rgb:        47, 109, 208;
  --color-brand-primary-hover-val:  #285db1;
  --color-brand-primary-active-val: #23529c;
}

/* Dark Purple */
[data-devportal-accent="dark_purple"] {
  --color-brand-primary-rgb:        67, 0, 191;
  --color-brand-primary-hover-val:  #3900a2;
  --color-brand-primary-active-val: #32008f;
}

/* Purple */
[data-devportal-accent="purple"] {
  --color-brand-primary-rgb:        91, 0, 255;
  --color-brand-primary-hover-val:  #4d00d9;
  --color-brand-primary-active-val: #4400bf;
}

/* Teal */
[data-devportal-accent="teal"] {
  --color-brand-primary-rgb:        16, 133, 127;
  --color-brand-primary-hover-val:  #0e716c;
  --color-brand-primary-active-val: #0c645f;
}

/* Green */
[data-devportal-accent="green"] {
  --color-brand-primary-rgb:        0, 135, 95;
  --color-brand-primary-hover-val:  #007351;
  --color-brand-primary-active-val: #006547;
}

/* Pink */
[data-devportal-accent="pink"] {
  --color-brand-primary-rgb:        209, 47, 112;
  --color-brand-primary-hover-val:  #b2285f;
  --color-brand-primary-active-val: #9d2354;
}

/* Red */
[data-devportal-accent="red"] {
  --color-brand-primary-rgb:        216, 0, 47;
  --color-brand-primary-hover-val:  #b80028;
  --color-brand-primary-active-val: #a20023;
}

/* Orange */
[data-devportal-accent="orange"] {
  --color-brand-primary-rgb:        218, 99, 1;
  --color-brand-primary-hover-val:  #b95401;
  --color-brand-primary-active-val: #a44a01;
}

/* Yellow / Golden */
[data-devportal-accent="yellow"] {
  --color-brand-primary-rgb:        179, 122, 0;
  --color-brand-primary-hover-val:  #986800;
  --color-brand-primary-active-val: #865c00;
}

/* Neutral / Black */
[data-devportal-accent="neutral"] {
  --color-brand-primary-rgb:        17, 17, 17;
  --color-brand-primary-hover-val:  #0e0e0e;
  --color-brand-primary-active-val: #0d0d0d;
}

/* Custom — primitives injected by PHP <style> block or accent.js */
[data-devportal-accent="custom"] {}
