/* ── CROCS app theme: Berry & Electric Dark (2026-10-16) ──────────────────────────────────────────
   Shared by every active crocs-*.html page (loaded at the end of <head>, followed by crocs-theme.js).
   This file holds the palette and the base element styles; crocs-theme.js maps each page's own colours
   onto the palette at runtime (screen-only overrides, page code untouched).
   Everything here is inside @media screen, so printed pages keep their original light styling. */

:root {
  /* Dark backgrounds */
  --cr-bg: #141114;          /* main page background */
  --cr-card: #29202A;        /* cards / panels */
  --cr-raised: #382C39;      /* raised surfaces, selected panels */
  --cr-line: #493A46;        /* borders, dividers */
  --cr-text: #FFF4F5;        /* primary text */
  --cr-text-2: #CDBEC9;      /* secondary text */
  --cr-text-3: #A8979F;      /* faint text (still AA on cards) */
  /* Berry & Electric accents */
  --cr-berry: #D887D5;       /* primary interactive, active nav, selected tabs */
  --cr-coral: #F28B91;       /* filming / creative; also errors */
  --cr-honey: #E4AA65;       /* campaigns, priorities, upcoming; also warnings */
  --cr-violet: #A49AF2;      /* secondary interactive, creators */
  --cr-teal: #5EBBC3;        /* analytics, video views, info */
  --cr-lime: #A8CB84;        /* positive growth, success */
  --cr-on-accent: #1B1419;   /* text on a solid accent background */
}

@media screen {
  html { color-scheme: dark; background: var(--cr-bg); }
  body { background-color: var(--cr-bg); color: var(--cr-text); }

  ::selection { background: rgba(216, 135, 213, 0.38); color: var(--cr-text); }
  * { scrollbar-color: #5C4A58 transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #4A3B48; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: #5C4A58; background-clip: padding-box; }

  /* Base form controls -- :where() keeps specificity at zero so page styles (already remapped) win */
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
    background-color: #1E181E; color: var(--cr-text); border-color: var(--cr-line);
  }
  :where(input, textarea)::placeholder { color: #8E7D88; opacity: 1; }
  :where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--cr-berry); }
  :where(select) option { background-color: #29202A; color: var(--cr-text); }
  :where(input, select, textarea, button):disabled { opacity: 0.55; cursor: not-allowed; }
  :where(a) { color: var(--cr-berry); }
  :where(hr) { border-color: var(--cr-line); }

  /* Visible keyboard focus everywhere */
  :where(a, button, input, select, textarea, summary, [tabindex], [role="tab"], [role="button"]):focus-visible {
    outline: 2px solid var(--cr-berry) !important; outline-offset: 2px;
  }

  /* Native tooltips / dialogs */
  :where(dialog) { background-color: var(--cr-card); color: var(--cr-text); border: 1px solid var(--cr-line); }
  :where(dialog)::backdrop { background: rgba(10, 6, 10, 0.65); }

  /* Shared left navigation (crocs-nav.js): the active page is berry on every page. Pages used to colour
     it green or purple individually; one role colour keeps the app consistent. */
  .nav-link.active { background: #3B2A3C !important; color: #EBB6E8 !important; }
  .nav-link.active .nav-icon-circle { background: var(--cr-berry) !important; color: var(--cr-on-accent) !important; }
  .nav-link.active .nav-count { color: #EBB6E8 !important; }

  /* Product photos, logos and creator images keep their real colours */
  img, video, picture { color-scheme: normal; }
}