/* --- Tokens ------------------------------------------------- */
/* themes/gold.css — Warm editorial gold (default) dark charcoal + gold accent */
:root {
  /* set from javascript and theme page */
  --overall-look-is-light: 1; /* 1 for overall light, 0 for overall dark */
  --gold:        #c9a84c;        /* forest green accent */

  --nav-bg: #212529;
  --brand-icon-color: var(--gold) ;
  --brand-text-color: var(--gold) ;
  /* --brand-icon-color: contrast-color(var(--nav-bg)) !important;
  --brand-text-color: contrast-color(var(--nav-bg)) !important; */


  /* javascript calculated */
  --is-light: 1; /* 1 for light, 0 for dark */
  --navbar-is-light: 1; /* 1 for light, 0 for dark */

  /* derived colors */

  --gold-dark: color-mix(
    in srgb,
    color-mix(in srgb, var(--gold), black 50%) calc(var(--overall-look-is-light) * 100%),
    color-mix(in srgb, var(--gold), white 50%) calc((1 - var(--overall-look-is-light)) * 100%)
  );

  --component-text-color: contrast-color(var(--gold));
  --component-text-color-hover: color-mix(
    in srgb,
    color-mix(in srgb, var(--component-text-color), white 90%) calc(var(--is-light) * 100%),
    color-mix(in srgb, var(--component-text-color), black 90%) calc((1 - var(--is-light)) * 100%)
  );

  --gold-dark-banner: color-mix(
    in srgb,
    color-mix(in srgb, var(--gold), white 95%) calc(var(--overall-look-is-light) * 100%),
    color-mix(in srgb, var(--gold), black 95%) calc((1 - var(--overall-look-is-light)) * 100%)
  );

  --warm-bg: color-mix(
    in srgb,
    color-mix(in srgb, var(--gold), white 85%) calc(var(--overall-look-is-light) * 100%),
    color-mix(in srgb, var(--gold), black 85%) calc((1 - var(--overall-look-is-light)) * 100%)
  );

  --card-bg: color-mix(
    in srgb,
    color-mix(in srgb, var(--gold), white 75%) calc(var(--overall-look-is-light) * 100%),
    color-mix(in srgb, var(--gold), black 75%) calc((1 - var(--overall-look-is-light)) * 100%)

  );

  --form-label-color: contrast-color(var(--card-bg));

  --body-bg: color-mix(
    in srgb,
    color-mix(in srgb, var(--gold), white 85%) calc(var(--overall-look-is-light) * 100%),
    color-mix(in srgb, var(--gold), black 85%) calc((1 - var(--overall-look-is-light)) * 100%)

  );

  --nav-link-hover-color: color-mix(
    in srgb,
    color-mix(in srgb, var(--nav-bg), black 25%) calc(var(--navbar-is-light) * 100%),
    color-mix(in srgb, var(--nav-bg), white 25%) calc((1 - var(--navbar-is-light)) * 100%)
  );

  /* --text:        #2d2d2d;
  --text-body-secondary:  #6c757d; */

  /* body text color */
  --text: contrast-color(var(--body-bg));

  /* secondary text color, used for less important text like timestamps, image captions etc. */
  --text-body-secondary: color-mix(
    in srgb,
    color-mix(in srgb, var(--text), white 35%) calc(var(--overall-look-is-light) * 100%),
    color-mix(in srgb, var(--text), black 35%) calc((1 - var(--overall-look-is-light)) * 100%)

  );

  --radius:      12px;
  --radius-sm:   6px;
  --shadow-sm:   0 2px 8px rgba(0,0,0,.08);
  --shadow-md:   0 6px 24px rgba(0,0,0,.12);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.16);
  --transition:  0.22s ease;
}