/*
 * Script name: custom.css  (Files Gallery, www.wheatfarm.com/photos)
 * Location:    photos/_files/css/custom.css
 * Revision:    1.0
 * Date:        2026-11-10
 * Changelog (newest first):
 *   1.0  2026-11-10  First version: "Wheatfarm light" look for the gallery's default theme
 *                    ("contrast"), matching wheatfarm.com (warm off-white, denim, barn red).
 *
 * How it works: the gallery builds its colors from CSS variables. This file only
 * changes those variables for the "contrast" theme; the stock "dark" theme is untouched.
 * Files Gallery 0.15.3 loads this file automatically when it exists.
 * To switch it off, rename it (e.g. custom.css.off) or delete it.
 */

/* ---- Whole page: warm light palette ---------------------------------- */
[data-theme=contrast] {
  --hue: 36;                          /* warm tone for borders, scrollbars, shadows */

  --wf-bg:        #F4F2EE;            /* page background (main site --bg) */
  --wf-card:      #FFFFFF;            /* album and photo cards */
  --wf-hover:     #F9F6F1;            /* card hover */
  --wf-band:      #EAE6DF;            /* sidebar and top bar (main site --band) */
  --wf-border:    #DEDAD2;            /* thin borders */
  --wf-denim:     #4F6A80;
  --wf-denim-lt:  #6A8498;
  --wf-red-tint:  #F2E6E2;            /* selected items */

  --text1: #2A2A2A;
  --text2: #4C4C4C;
  --text3: #585858;

  --surface1: var(--wf-bg);
  --surface2: var(--wf-card);
  --surface3: var(--wf-hover);
  --surface4: #FFFFFF;
  --surface-selected: var(--wf-red-tint);
  --surface-list-hover: var(--wf-bg);
  --files-border-bottom: 0 1px 0 0 var(--wf-border);

  /* folder icons in denim */
  --svg-folder-bg: var(--wf-denim);
  --svg-folder-fg: var(--wf-denim-lt);
  --svg-folder-bg-large: var(--wf-denim);
  --svg-folder-fg-large: var(--wf-denim-lt);

  /* barn red (#8E3B2E) for buttons, active menu item, links */
  --hsl-primary-contrast: 8 51% 37%;

  /* menu hover uses dark-on-light, like the light theme */
  --menu-surface-hover-lightness: 30%;
  --menu-icon-folder-fill-opacity: 1;
}

/* Thin warm border around each card */
[data-theme=contrast] .files-a {
  --box-shadow: 0 0 0 1px var(--wf-border);
}

/* ---- Top bar and sidebar: stock "contrast" makes these dark; make them light --- */
[data-theme=contrast] #topbar,
[data-theme=contrast] #sidebar,
[data-theme=contrast] .custom-section,
[data-theme=contrast] .custom-footer-fixed {
  color-scheme: light;
  color: var(--text1);
  --text1: #2A2A2A;
  --text2: #4C4C4C;
  --text3: #636363;
  --surface-selected: var(--wf-red-tint);
  --files-border-bottom: none;
  --img-placeholder-bg: var(--img-placeholder-bg-light);
  --color-danger: var(--color-danger-light);
  --color-info: var(--color-info-light);
  --color-success: var(--color-success-light);
  --popup-bg: var(--popup-bg-light);
  --rgb-theme: var(--rgb-theme-light);
  --rgb-theme-invert: var(--rgb-theme-invert-light);
  --svg-file-bg: var(--svg-file-bg-light);
  --svg-file-flip: var(--svg-file-flip-light);
  --svg-file-icon: var(--svg-file-icon-light);
  --svg-folder-bg: var(--wf-denim);
  --svg-folder-fg: var(--wf-denim-lt);
  --svg-folder-bg-large: var(--wf-denim);
  --svg-folder-fg-large: var(--wf-denim-lt);
  --scrollbar-color: var(--scrollbar-color-light);
  --scrollbar-color-hover: var(--scrollbar-color-hover-light);
  --font-weight-bold: 500;
  --font-weight-letter-spacing: normal;
}

/* Top bar: tan band, denim rule underneath (like the main site's footer rule) */
[data-theme=contrast] #topbar {
  --surface1: var(--wf-border);       /* thin lines between the bar's rows */
  --surface2: var(--wf-hover);
  --surface3: var(--wf-hover);        /* breadcrumb row */
  --surface4: var(--wf-band);         /* top row */
}
[data-theme=contrast] #topbar-top {
  border-bottom: 2px solid var(--wf-denim);
}

/* Sidebar: tan band all the way down */
[data-theme=contrast] #sidebar {
  --surface1: var(--wf-band);
  --surface2: var(--wf-hover);
  --surface3: var(--wf-band);
  --surface4: var(--wf-band);
  border-right: 1px solid var(--wf-border);
}