/*
 * Douglas Restorations design tokens.
 *
 * GenerateBlocks should provide structure and semantic classes; this file owns
 * the durable tokens and palette swaps those classes consume.
 */

:root {
  /* Approved Heritage Navy / Burgundy palette — raw HSL channels. */
  --dr-color-navy-hsl: 212 78% 13%;
  --dr-color-navy-deep-hsl: 213 81% 8%;
  --dr-color-burgundy-hsl: 353 76% 35%;
  --dr-color-cream-hsl: 35 35% 93%;
  --dr-color-paper-hsl: 35 100% 98%;
  --dr-color-text-hsl: 214 29% 20%;
  --dr-color-muted-hsl: 215 8% 52%;
  --dr-color-white-hsl: 0 0% 100%;
  --dr-color-black-hsl: 216 33% 3%;
  --dr-color-accent-dark-hsl: 353 77% 28%;

  /* Finished color tokens. */
  --dr-color-navy: hsl(var(--dr-color-navy-hsl));
  --dr-color-navy-deep: hsl(var(--dr-color-navy-deep-hsl));
  --dr-color-burgundy: hsl(var(--dr-color-burgundy-hsl));
  --dr-color-cream: hsl(var(--dr-color-cream-hsl));
  --dr-color-paper: hsl(var(--dr-color-paper-hsl));
  --dr-color-text: hsl(var(--dr-color-text-hsl));
  --dr-color-muted: hsl(var(--dr-color-muted-hsl));
  --dr-color-white: hsl(var(--dr-color-white-hsl));
  --dr-color-black: hsl(var(--dr-color-black-hsl));

  /* Derived tokens. */
  --dr-border-red: hsl(var(--dr-color-burgundy-hsl) / 0.45);
  --dr-border-light: hsl(var(--dr-color-white-hsl) / 0.16);
  --dr-shadow-soft: 0 24px 70px hsl(var(--dr-color-navy-deep-hsl) / 0.14);

  /* Back-compat aliases from the initial theme scaffold. */
  --dr-bg: var(--dr-color-cream);
  --dr-surface: var(--dr-color-paper);
  --dr-text: var(--dr-color-text);
  --dr-muted: var(--dr-color-muted);
  --dr-primary: var(--dr-color-navy);
  --dr-primary-dark: var(--dr-color-navy-deep);
  --dr-accent: var(--dr-color-burgundy);
  --dr-accent-dark: hsl(var(--dr-color-accent-dark-hsl));
  --dr-border: var(--dr-border-red);
  --dr-white: var(--dr-color-white);
  --dr-black: var(--dr-color-black);
}

.dr-theme-heritage,
.palette-heritage {
  --dr-color-navy-hsl: 212 78% 13%;
  --dr-color-navy-deep-hsl: 213 81% 8%;
  --dr-color-burgundy-hsl: 353 76% 35%;
  --dr-color-cream-hsl: 35 35% 93%;
  --dr-color-paper-hsl: 35 100% 98%;
  --dr-color-text-hsl: 214 29% 20%;
  --dr-color-muted-hsl: 215 8% 52%;
  --dr-color-white-hsl: 0 0% 100%;
  --dr-color-black-hsl: 216 33% 3%;
  --dr-color-accent-dark-hsl: 353 77% 28%;

  --dr-border-red-opacity: 0.45;
  --dr-border-light-opacity: 0.16;
}

.dr-theme-charcoal,
.palette-charcoal {
  --dr-color-navy-hsl: 215 21% 11%;
  --dr-color-navy-deep-hsl: 216 28% 7%;
  --dr-color-burgundy-hsl: 353 73% 29%;
  --dr-color-cream-hsl: 37 39% 91%;
  --dr-color-paper-hsl: 40 60% 96%;
  --dr-color-text-hsl: 0 0% 15%;
  --dr-color-muted-hsl: 28 6% 44%;
  --dr-color-white-hsl: 0 0% 100%;
  --dr-color-black-hsl: 216 33% 3%;
  --dr-color-accent-dark-hsl: 353 77% 28%;

  --dr-border-red-opacity: 0.46;
  --dr-border-light-opacity: 0.15;
}

.dr-theme-racing-green,
.palette-green,
.palette-racing-green {
  --dr-color-navy-hsl: 168 53% 11%;
  --dr-color-navy-deep-hsl: 167 58% 6%;
  --dr-color-burgundy-hsl: 25 53% 39%;
  --dr-color-cream-hsl: 41 40% 92%;
  --dr-color-paper-hsl: 37 100% 97%;
  --dr-color-text-hsl: 164 18% 16%;
  --dr-color-muted-hsl: 105 3% 46%;
  --dr-color-white-hsl: 0 0% 100%;
  --dr-color-black-hsl: 216 33% 3%;
  --dr-color-accent-dark-hsl: 25 53% 29%;

  --dr-border-red-opacity: 0.48;
  --dr-border-light-opacity: 0.16;
}

.dr-theme-graphite,
.palette-brass,
.palette-graphite {
  --dr-color-navy-hsl: 216 14% 15%;
  --dr-color-navy-deep-hsl: 214 17% 8%;
  --dr-color-burgundy-hsl: 39 44% 48%;
  --dr-color-cream-hsl: 40 32% 93%;
  --dr-color-paper-hsl: 42 56% 96%;
  --dr-color-text-hsl: 210 14% 17%;
  --dr-color-muted-hsl: 213 4% 48%;
  --dr-color-white-hsl: 0 0% 100%;
  --dr-color-black-hsl: 216 33% 3%;
  --dr-color-accent-dark-hsl: 39 44% 38%;

  --dr-border-red-opacity: 0.5;
  --dr-border-light-opacity: 0.15;
}

/*
 * Re-derived opacity-aware tokens.
 *
 * These are repeated outside :root so palette classes can override only the
 * * channel/opacity values above while these finished tokens keep working.
 */
:root,
.dr-theme-heritage,
.palette-heritage,
.dr-theme-charcoal,
.palette-charcoal,
.dr-theme-racing-green,
.palette-green,
.palette-racing-green,
.dr-theme-graphite,
.palette-brass,
.palette-graphite {
  --dr-color-navy: hsl(var(--dr-color-navy-hsl));
  --dr-color-navy-deep: hsl(var(--dr-color-navy-deep-hsl));
  --dr-color-burgundy: hsl(var(--dr-color-burgundy-hsl));
  --dr-color-cream: hsl(var(--dr-color-cream-hsl));
  --dr-color-paper: hsl(var(--dr-color-paper-hsl));
  --dr-color-text: hsl(var(--dr-color-text-hsl));
  --dr-color-muted: hsl(var(--dr-color-muted-hsl));
  --dr-color-white: hsl(var(--dr-color-white-hsl));
  --dr-color-black: hsl(var(--dr-color-black-hsl));

  --dr-border-red: hsl(var(--dr-color-burgundy-hsl) / var(--dr-border-red-opacity, 0.45));
  --dr-border-light: hsl(var(--dr-color-white-hsl) / var(--dr-border-light-opacity, 0.16));
  --dr-shadow-soft: 0 24px 70px hsl(var(--dr-color-navy-deep-hsl) / 0.14);

  --dr-bg: var(--dr-color-cream);
  --dr-surface: var(--dr-color-paper);
  --dr-text: var(--dr-color-text);
  --dr-muted: var(--dr-color-muted);
  --dr-primary: var(--dr-color-navy);
  --dr-primary-dark: var(--dr-color-navy-deep);
  --dr-accent: var(--dr-color-burgundy);
  --dr-accent-dark: hsl(var(--dr-color-accent-dark-hsl));
  --dr-border: var(--dr-border-red);
  --dr-white: var(--dr-color-white);
  --dr-black: var(--dr-color-black);
}

/*
 * Transparent background utilities.
 *
 * Usage:
 * class="dr-transparent-bg dr-bg-transparent--burgundy dr-bg-transparent--50"
 */

.dr-transparent-bg {
  position: relative;
  isolation: isolate;
}

.dr-transparent-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: hsl(
    var(--dr-transparent-bg-color, var(--dr-color-navy-hsl))
    /
    var(--dr-transparent-bg-opacity, 0.5)
  );
  pointer-events: none;
}

/* Transparent background color choices. */
.dr-bg-transparent--navy {
  --dr-transparent-bg-color: var(--dr-color-navy-hsl);
}

.dr-bg-transparent--navy-deep {
  --dr-transparent-bg-color: var(--dr-color-navy-deep-hsl);
}

.dr-bg-transparent--burgundy {
  --dr-transparent-bg-color: var(--dr-color-burgundy-hsl);
}

.dr-bg-transparent--cream {
  --dr-transparent-bg-color: var(--dr-color-cream-hsl);
}

.dr-bg-transparent--paper {
  --dr-transparent-bg-color: var(--dr-color-paper-hsl);
}

.dr-bg-transparent--text {
  --dr-transparent-bg-color: var(--dr-color-text-hsl);
}

.dr-bg-transparent--muted {
  --dr-transparent-bg-color: var(--dr-color-muted-hsl);
}

.dr-bg-transparent--white {
  --dr-transparent-bg-color: var(--dr-color-white-hsl);
}

.dr-bg-transparent--black {
  --dr-transparent-bg-color: var(--dr-color-black-hsl);
}

/* Transparent background opacity choices. */
.dr-bg-transparent--10 {
  --dr-transparent-bg-opacity: 0.1;
}

.dr-bg-transparent--15 {
  --dr-transparent-bg-opacity: 0.15;
}

.dr-bg-transparent--20 {
  --dr-transparent-bg-opacity: 0.2;
}

.dr-bg-transparent--25 {
  --dr-transparent-bg-opacity: 0.25;
}

.dr-bg-transparent--35 {
  --dr-transparent-bg-opacity: 0.35;
}

.dr-bg-transparent--40 {
  --dr-transparent-bg-opacity: 0.4;
}

.dr-bg-transparent--50 {
  --dr-transparent-bg-opacity: 0.5;
}

.dr-bg-transparent--60 {
  --dr-transparent-bg-opacity: 0.6;
}

.dr-bg-transparent--65 {
  --dr-transparent-bg-opacity: 0.65;
}

.dr-bg-transparent--75 {
  --dr-transparent-bg-opacity: 0.75;
}

.dr-bg-transparent--85 {
  --dr-transparent-bg-opacity: 0.85;
}

.dr-bg-transparent--90 {
  --dr-transparent-bg-opacity: 0.9;
}