/* Keep terracotta matching an sRGB PC monitor on iPhone/P3 OLED.
   Untagged #C85A32 is treated as Display P3 on many phones and looks red. */
:root {
  --navy: #0e1520;
  --cream: #f4efea;
  --terra: #c85a32;
  --terra-deep: #a34424;
  --terra-mid: #d4683c;
  --terra-brick: #b8502c;
  --terra-glow: #e07a52;
  color-scheme: light only;
}

html {
  color-scheme: light only;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports (color: color(srgb 1 0 0)) {
  :root {
    --terra: color(srgb 0.784314 0.352941 0.196078);
    --terra-deep: color(srgb 0.639216 0.266667 0.141176);
    --terra-mid: color(srgb 0.831373 0.407843 0.235294);
    --terra-brick: color(srgb 0.721569 0.313725 0.172549);
    --terra-glow: color(srgb 0.878431 0.478431 0.321569);
  }
}

@media (color-gamut: p3) {
  :root {
    --terra: color(display-p3 0.73 0.42 0.24);
    --terra-deep: color(display-p3 0.58 0.30 0.17);
    --terra-mid: color(display-p3 0.77 0.45 0.27);
    --terra-brick: color(display-p3 0.66 0.35 0.20);
    --terra-glow: color(display-p3 0.83 0.51 0.35);
  }
}

svg [fill="#C85A32"], svg [fill="#c85a32"] { fill: var(--terra); }
svg [fill="#A34424"] { fill: var(--terra-deep); }
svg [fill="#D4683C"] { fill: var(--terra-mid); }
svg [fill="#B8502C"] { fill: var(--terra-brick); }
svg [stroke="#C85A32"] { stroke: var(--terra); }

.bg-terra { background-color: var(--terra) !important; }
.text-terra { color: var(--terra) !important; }
.border-terra { border-color: var(--terra) !important; }
.fill-terra { fill: var(--terra) !important; }
.hover\:text-terra:hover { color: var(--terra) !important; }
.hover\:border-terra:hover { border-color: var(--terra) !important; }
.focus\:bg-terra:focus { background-color: var(--terra) !important; }
.group:hover .group-hover\:text-terra { color: var(--terra) !important; }
.border-terra\/30,
.border-terra-soft {
  border-color: color-mix(in srgb, var(--terra) 30%, transparent) !important;
}

@media (pointer: coarse) {
  body::after {
    mix-blend-mode: soft-light;
    opacity: 0.028;
  }
}
