/* temptingbrands.com — dark mode
   Loaded after the page's own styles. Light stays the default: dark applies
   when the visitor's system asks for it, unless they have chosen light
   themselves, and the switch in the footer overrides both (the choice is
   remembered in the browser). Everything dark lives in this one file. */

/* --- shared with light mode --- */
.dark-only{display:none}
.theme-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;font-family:"Bricolage Grotesque","Helvetica Neue",sans-serif;font-size:14px;letter-spacing:.02em;color:#C9D4D8}
.theme-toggle:hover{color:#fff}
.theme-toggle svg{width:15px;height:15px;flex:0 0 auto}
.theme-toggle .t-moon{display:block}
.theme-toggle .t-sun{display:none}
.theme-toggle .t-light{display:none}
@media(max-width:700px){.f-bot .theme-toggle{order:-1}}

/* --- dark, following the system setting --- */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  color-scheme:dark;
  --ink:#E8E4DA;
  --ink-soft:#9DACB4;
  --paper:#121A1F;
  --paper-lift:#18222A;
  --rule:#2F3B43;
  --rule-soft:#242E35;
  --r66:#C49A78;
  --ma:#D2757C;
  --hp:#45B2D8;
}
:root:not([data-theme="light"]) ::selection{background:#2E4551;color:#fff}
:root:not([data-theme="light"]) .site-head{background:rgba(15,22,27,.92);border-bottom-color:#26323A}
:root:not([data-theme="light"]) .btn-solid{background:var(--ink);color:#101820}
:root:not([data-theme="light"]) .btn-solid:hover{background:#FFFDF6}
:root:not([data-theme="light"]) .btn-line:hover{background:var(--ink);color:#101820}
:root:not([data-theme="light"]) .nav .cta:hover{background:var(--ink);color:#101820}

/* the sections that are dark already go one step deeper */
:root:not([data-theme="light"]) .banner,:root:not([data-theme="light"]) .guides,:root:not([data-theme="light"]) footer,:root:not([data-theme="light"]) .reel{background:#0C1418}
:root:not([data-theme="light"]) .guides{color:var(--ink)}
:root:not([data-theme="light"]) .guides p{color:#A9B7BE}
:root:not([data-theme="light"]) .gnums{background:#26343C;border-color:#26343C}
:root:not([data-theme="light"]) .gnums div{background:#0C1418}
:root:not([data-theme="light"]) .gnums b{color:var(--ink)}
:root:not([data-theme="light"]) .b-shot{filter:brightness(.9)}

/* Brand bands. One veil over the whole band keeps the artwork and the band
   colour in step, exactly as they sit in light mode. It is painted above the
   artwork and below both the text (.wrap) and the accent line. */
:root:not([data-theme="light"]) .brand{--rule:#4B565D;--rule-soft:#39444B}
:root:not([data-theme="light"]) .brand::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
:root:not([data-theme="light"]) .brand-r66::after{background:rgba(20,14,9,.845)}
:root:not([data-theme="light"]) .brand-ma::after{background:rgba(21,9,13,.845)}
:root:not([data-theme="light"]) .brand-hp::after{background:rgba(7,16,24,.845)}
:root:not([data-theme="light"]) .brand .tag{color:#A9B7BE}
:root:not([data-theme="light"]) .light-only{display:none}
:root:not([data-theme="light"]) .dark-only{display:block}

/* artwork that is black and would otherwise disappear */
:root:not([data-theme="light"]) .rets .r{filter:grayscale(1) invert(1);opacity:.6}
:root:not([data-theme="light"]) .team .ph img{mix-blend-mode:normal;filter:grayscale(1) contrast(.9) brightness(.82)}

:root:not([data-theme="light"]) .f-status.ok{color:#5EC08D}
:root:not([data-theme="light"]) .f-status.err{color:#E8908F}
:root:not([data-theme="light"]) .doc .placeholder{border-color:#3A454C}

/* the footer switch swaps its own icon and label */
:root:not([data-theme="light"]) .theme-toggle .t-moon{display:none}
:root:not([data-theme="light"]) .theme-toggle .t-sun{display:block}
:root:not([data-theme="light"]) .theme-toggle .t-dark{display:none}
:root:not([data-theme="light"]) .theme-toggle .t-light{display:inline}
}

/* --- dark, chosen in the footer --- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E8E4DA;
  --ink-soft:#9DACB4;
  --paper:#121A1F;
  --paper-lift:#18222A;
  --rule:#2F3B43;
  --rule-soft:#242E35;
  --r66:#C49A78;
  --ma:#D2757C;
  --hp:#45B2D8;
}
:root[data-theme="dark"] ::selection{background:#2E4551;color:#fff}
:root[data-theme="dark"] .site-head{background:rgba(15,22,27,.92);border-bottom-color:#26323A}
:root[data-theme="dark"] .btn-solid{background:var(--ink);color:#101820}
:root[data-theme="dark"] .btn-solid:hover{background:#FFFDF6}
:root[data-theme="dark"] .btn-line:hover{background:var(--ink);color:#101820}
:root[data-theme="dark"] .nav .cta:hover{background:var(--ink);color:#101820}

/* the sections that are dark already go one step deeper */
:root[data-theme="dark"] .banner,:root[data-theme="dark"] .guides,:root[data-theme="dark"] footer,:root[data-theme="dark"] .reel{background:#0C1418}
:root[data-theme="dark"] .guides{color:var(--ink)}
:root[data-theme="dark"] .guides p{color:#A9B7BE}
:root[data-theme="dark"] .gnums{background:#26343C;border-color:#26343C}
:root[data-theme="dark"] .gnums div{background:#0C1418}
:root[data-theme="dark"] .gnums b{color:var(--ink)}
:root[data-theme="dark"] .b-shot{filter:brightness(.9)}

/* Brand bands. One veil over the whole band keeps the artwork and the band
   colour in step, exactly as they sit in light mode. It is painted above the
   artwork and below both the text (.wrap) and the accent line. */
:root[data-theme="dark"] .brand{--rule:#4B565D;--rule-soft:#39444B}
:root[data-theme="dark"] .brand::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
:root[data-theme="dark"] .brand-r66::after{background:rgba(20,14,9,.845)}
:root[data-theme="dark"] .brand-ma::after{background:rgba(21,9,13,.845)}
:root[data-theme="dark"] .brand-hp::after{background:rgba(7,16,24,.845)}
:root[data-theme="dark"] .brand .tag{color:#A9B7BE}
:root[data-theme="dark"] .light-only{display:none}
:root[data-theme="dark"] .dark-only{display:block}

/* artwork that is black and would otherwise disappear */
:root[data-theme="dark"] .rets .r{filter:grayscale(1) invert(1);opacity:.6}
:root[data-theme="dark"] .team .ph img{mix-blend-mode:normal;filter:grayscale(1) contrast(.9) brightness(.82)}

:root[data-theme="dark"] .f-status.ok{color:#5EC08D}
:root[data-theme="dark"] .f-status.err{color:#E8908F}
:root[data-theme="dark"] .doc .placeholder{border-color:#3A454C}

/* the footer switch swaps its own icon and label */
:root[data-theme="dark"] .theme-toggle .t-moon{display:none}
:root[data-theme="dark"] .theme-toggle .t-sun{display:block}
:root[data-theme="dark"] .theme-toggle .t-dark{display:none}
:root[data-theme="dark"] .theme-toggle .t-light{display:inline}