/* ============================================================================
   Brand accents + dark surface system (shared)
   ----------------------------------------------------------------------------
   Consumes tokens.css (load order: tailwind CDN config -> tokens.css -> this).
   Overrides Tailwind's runtime-injected utilities BY SPECIFICITY, not force:
   every selector is prefixed with `:root` (0,2,0 beats a utility's 0,1,0
   regardless of stylesheet order), which is what let the former ~40
   !important flags be deleted (2026-07-05 UI direction, phase 1).
   ========================================================================== */

/* Native controls, caret, selection */
:root body { accent-color: var(--rc-accent); caret-color: var(--rc-accent); }
::selection { background: var(--rc-accent-tint-25); }
::-moz-selection { background: var(--rc-accent-tint-25); }

/* Keyboard focus ring (accessibility win + a quiet green cue).
   Text-entry fields are EXCLUDED (owner call, 2026-07-18): the green boxes
   rendered badly while typing. Checkbox/radio keep it (no typing there). */
:root a:focus-visible,
:root button:focus-visible,
:root input[type='checkbox']:focus-visible,
:root input[type='radio']:focus-visible,
:root summary:focus-visible,
:root [tabindex]:focus-visible {
    outline: 2px solid var(--rc-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Typing fields: NO focus boxes anywhere (owner call, 2026-07-18).
   The :not() chain lifts specificity above shared.css's own rule and every
   Tailwind focus:ring-* utility, so this wins on every page regardless of
   load order. Feedback while typing = the green caret + a quiet neutral
   border shift; rings, glows and outlines are gone. */
:root input:not([type='checkbox']):not([type='radio']):focus,
:root textarea:focus,
:root select:focus,
:root input:not([type='checkbox']):not([type='radio']):focus-visible,
:root textarea:focus-visible,
:root select:focus-visible,
:root [contenteditable]:focus,
:root [contenteditable]:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--rc-line-strong);
}

/* Plain text links pick up green on hover (skip button-ish anchors) */
:root a:not([class*="btn"]):not([class*="bg-"]):not([class*="rounded-full"]):hover {
    color: var(--rc-accent-strong);
    text-decoration-color: var(--rc-accent-strong);
}

/* Quiet brand cues */
::marker { color: var(--rc-accent); }
:root hr { border-color: var(--rc-accent-tint-15); }

/* ---- One primary identity in BOTH themes ----
   Solid primary surfaces are brand green everywhere; text-level primary uses
   the darker AA green in light mode. KNOWN CAVEAT (brand call, flagged in
   the UI backlog log): white 14px bold on the accent measures ~3.1:1. */
:root .bg-primary { background-color: var(--rc-accent); }
:root .bg-primary\/90 { background-color: rgba(25, 179, 102, 0.9); }
:root .hover\:bg-primary:hover { background-color: var(--rc-accent-hover); }
:root .hover\:bg-primary\/90:hover { background-color: var(--rc-accent-active); }
:root .border-primary { border-color: var(--rc-accent); }
:root .text-primary { color: var(--rc-accent-text); }

/* Dark-mode lifts so faint primary tints stay readable on dark surfaces */
:root.dark .bg-primary\/5  { background-color: rgba(255, 255, 255, 0.05); }
:root.dark .bg-primary\/10 { background-color: rgba(255, 255, 255, 0.08); }
:root.dark .bg-primary\/20 { background-color: rgba(255, 255, 255, 0.14); }
:root.dark .border-primary\/10 { border-color: rgba(255, 255, 255, 0.10); }
:root.dark .border-primary\/20 { border-color: rgba(255, 255, 255, 0.16); }
:root.dark .hover\:bg-primary\/20:hover { background-color: rgba(255, 255, 255, 0.18); }
:root.dark .text-primary { color: var(--rc-accent-text); }

/* Native <select> with a readable right-aligned dropdown arrow */
:root select.rc-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 14px;
    padding-right: 1.9rem;
}

/* The thin brand line across the very top of every page */
:root body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rc-accent) 0%, var(--rc-accent-support) 55%, #5eead4 100%);
    z-index: 9999;
    pointer-events: none;
}

/* ============================================================================
   Dark mode surface system: one neutral near-black scale for every page.
   Green stays an ACCENT, never a wall colour. `.dark .dark\:x` is already
   0,2,0, which beats the runtime utility without force.
   ========================================================================== */
:root.dark .dark\:bg-slate-900 { background-color: #131316; }
:root.dark .dark\:bg-slate-800 { background-color: #1b1b1f; }
:root.dark .dark\:bg-slate-700 { background-color: #26262b; }
:root.dark .dark\:bg-slate-900\/90 { background-color: rgba(19, 19, 22, 0.9); }
:root.dark .dark\:bg-slate-900\/50 { background-color: rgba(19, 19, 22, 0.5); }
:root.dark .dark\:bg-slate-900\/40 { background-color: rgba(19, 19, 22, 0.4); }
:root.dark .dark\:bg-slate-800\/50 { background-color: rgba(255, 255, 255, 0.045); }
:root.dark .dark\:hover\:bg-slate-800:hover { background-color: #202025; }
:root.dark .dark\:hover\:bg-slate-700:hover { background-color: #2a2a30; }
:root.dark .dark\:hover\:bg-slate-600:hover { background-color: #333339; }
:root.dark .dark\:border-slate-700 { border-color: rgba(255, 255, 255, 0.10); }
:root.dark .dark\:border-slate-800 { border-color: rgba(255, 255, 255, 0.07); }
:root.dark .dark\:border-slate-600 { border-color: rgba(255, 255, 255, 0.14); }
:root.dark .dark\:divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, 0.07); }

/* Brand green stays the dark-mode accent for solid primary elements */
:root.dark .bg-primary { background-color: var(--rc-accent); }
:root.dark .bg-primary\/90 { background-color: rgba(25, 179, 102, 0.9); }
:root.dark .hover\:bg-primary:hover { background-color: var(--rc-accent-hover); }
:root.dark .hover\:bg-primary\/90:hover { background-color: var(--rc-accent-active); }