/* Tryggly — warm light relight of the deepwater template.
 *
 * deepwater ships a dark marine canvas; the Tryggly brief asks for a calm
 * Scandinavian home publication — warm paper, forest-green structure, sage
 * calm, and one restrained apricot spark. Every component in the template
 * reads its colour from a --dw-* token, so redefining those tokens here
 * (this file loads after the template's app.css) re-skins the whole site.
 * The few places that hardcode darkness — footer, elevation shadows, the
 * hero/CTA glows, text selection — are relit explicitly below. Tokens only;
 * no literal hex leaks into a component rule.
 */

:root {
  /* Brand palette — brand/identity.md */
  --tg-paper: #f7f6f0;
  --tg-white: #ffffff;
  --tg-ink: #1d2d29;
  --tg-forest: #163f36;
  --tg-sage: #e8efe6;
  --tg-apricot: #f2bd99;
  --tg-muted: #56675f;
  --tg-border: #d8dfd6;
  --tg-link: #245d49;
  --tg-link-soft: #2e6f58;

  /* Relight: remap the template's semantic tokens onto the brand palette.
     The template treats "ember" as its single action colour — here that is
     forest green (buttons, active nav, kicker labels, stat suffixes); "glow"
     is the link colour. */
  --dw-deep: var(--tg-paper);
  --dw-panel: var(--tg-white);
  --dw-ink: var(--tg-ink);
  --dw-glow: var(--tg-link);
  --dw-glow-soft: var(--tg-link-soft);
  --dw-ember: var(--tg-forest);
  --dw-dis: var(--tg-muted);
  --dw-line: var(--tg-border);

  /* The template's theme.json applies these preset tokens directly to global
     text/background (e.g. body { color }); the --dw-* aliases above only cover
     components that opt in. Remap the presets too, or inherited text (the hero
     H1, prose) keeps the dark theme's light-on-light contrast. */
  --wp--preset--color--base: var(--tg-paper);
  --wp--preset--color--surface: var(--tg-white);
  --wp--preset--color--contrast: var(--tg-ink);
  --wp--preset--color--primary: var(--tg-link);
  --wp--preset--color--primary-soft: var(--tg-link-soft);
  --wp--preset--color--accent: var(--tg-forest);
  --wp--preset--color--muted: var(--tg-muted);
  --wp--preset--color--line: var(--tg-border);

  /* Light-theme elevation: soft, forest-tinted, low-alpha — never black. */
  --dw-shadow-soft: 0 1px 2px rgba(22, 63, 54, 0.05),
    0 14px 30px -20px rgba(22, 63, 54, 0.16);
  --dw-shadow-lift: 0 2px 6px rgba(22, 63, 54, 0.07),
    0 26px 54px -30px rgba(22, 63, 54, 0.2);

  color-scheme: light;
}

/* Page ground and its top bloom — a warm sage light, not a cool marine one.
   theme.json prints body colour/background as literal hex (not var), so the
   text colour must be set on the element here, not only via the preset token —
   otherwise the hero H1 and prose inherit the dark theme's light ink. */
body {
  color: var(--tg-ink);
  background-color: var(--tg-paper);
  background-image: radial-gradient(
    62% 40rem at 50% -14rem,
    color-mix(in srgb, var(--tg-sage) 62%, transparent),
    transparent 72%
  );
}

/* theme.json also literals heading and link colours per element (both were the
   dark theme's light values). Set them on the elements; component buttons, nav
   and footer links are class-scoped and keep their own colours over these. */
h1, h2, h3, h4, h5, h6 {
  color: var(--tg-ink);
}
a:not(.wp-element-button) {
  color: var(--tg-link);
}

/* Text selection — a warm apricot tint on paper. */
::selection {
  background: color-mix(in srgb, var(--tg-apricot) 45%, var(--tg-paper));
  color: var(--tg-ink);
}

/* The single apricot spark: the tick that opens every section stays warm
   while the label itself carries the forest structure. Slightly longer and
   softer than the template's hairline so the warmth registers. */
.dw-kicker__tick {
  background: var(--tg-apricot);
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
}

/* Hero seabed → a warm editorial wash (apricot meeting sage), the brief's
   "warm editorial composition", instead of the template's green/blue haze. */
.dw-hero__glow {
  background:
    radial-gradient(
      42% 60% at 28% 42%,
      color-mix(in srgb, var(--tg-apricot) 32%, transparent),
      transparent 70%
    ),
    radial-gradient(
      48% 64% at 74% 56%,
      color-mix(in srgb, var(--tg-sage) 72%, transparent),
      transparent 72%
    );
  filter: blur(48px);
}

/* CTA band glow — the same warmth, fainter. */
.dw-cta__glow {
  background: radial-gradient(
    46% 60% at 50% 0%,
    color-mix(in srgb, var(--tg-apricot) 24%, transparent),
    transparent 72%
  );
}

/* Footer — the sheltered base. One deliberate forest block anchors the page
   and carries the "shelter/doorway" cue from the brand, with light text. */
.dw-footer {
  background: var(--tg-forest);
  border-top: 1px solid color-mix(in srgb, var(--tg-forest) 55%, #000);
}
.dw-footer__wordmark {
  color: var(--tg-paper);
}
.dw-footer__tagline,
.dw-footer__note,
.dw-footer__head,
.dw-footer__copy {
  color: color-mix(in srgb, var(--tg-sage) 80%, var(--tg-forest));
}
.dw-footer__links a {
  color: color-mix(in srgb, var(--tg-paper) 90%, var(--tg-forest));
}
.dw-footer__links a:hover {
  color: var(--tg-apricot);
}
.dw-footer__base {
  border-top-color: color-mix(in srgb, var(--tg-paper) 16%, transparent);
}
/* The footer ghost wordmark is an ink-on-dark tint in the template; on the
   forest base it must be a faint light watermark instead. */
.dw-footer__ghost {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tg-paper) 12%, transparent),
    transparent 92%
  );
  -webkit-background-clip: text;
  background-clip: text;
}