/*
Theme Name: PeachPuffTL Child
Description: A soft peach, coral and leaf-green child theme for PeachPuffTL, built on Fictioneer.
Author: PeachPuffTL
Template: fictioneer
Version: 1.0.0
Text Domain: peachpuff-child
License: GNU General Public License v3.0 or later
License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =============================================================================
   PEACHPUFFTL — brand tokens
   Colors are sampled from the logo: peach #FBAA8F, coral #FD7071,
   leaf #709560, sparkle gold #F8B243, stem brown #784030.
   Dark mode is the Fictioneer default (:root); light mode overrides it.
   ============================================================================= */

:root {
  --pp-peach: #fbaa8f;
  --pp-coral: #fd7071;
  --pp-leaf: #709560;
  --pp-gold: #f8b243;
  --pp-stem: #784030;

  /* Type: Baloo 2 echoes the chunky logo lettering, Nunito keeps long reads soft */
  --ff-base: "Nunito", var(--ff-system);
  --ff-heading: "Baloo 2", "Nunito", var(--ff-system);
  --ff-note: "Nunito", var(--ff-system);
  --ff-nav-item: "Baloo 2", "Nunito", var(--ff-system);
  --ff-site-title: "Baloo 2", "Nunito", var(--ff-system);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-strong: 600;
  --font-weight-strong: 700;
  --font-weight-heading: 700;
  --font-weight-navigation: 600;
  --font-letter-spacing-base: 0em;

  /* Puffy corners */
  --layout-border-radius-large: 24px;
  --layout-border-radius-small: 12px;

  /* Header */
  --header-logo-height: 200px;
  --site-title-text-shadow: none;

  /* Keep the nav bar solid at the top of the page, not only once it sticks */
  --navigation-background-start-opacity: 1;

  /* Selection */
  --text-selection-background: rgb(253 112 113 / 32%);
}

/* =============================================================================
   DARK MODE — warm cocoa with peach accents
   ============================================================================= */

:root {
  --bg-50-free: calc(14deg + var(--hue-rotate)) calc(70% * var(--saturation)) clamp(45%, 90% * var(--darken), 95%);
  --bg-100-free: calc(14deg + var(--hue-rotate)) calc(62% * var(--saturation)) clamp(39%, 78% * var(--darken), 89%);
  --bg-200-free: calc(12deg + var(--hue-rotate)) calc(40% * var(--saturation)) clamp(30%, 60% * var(--darken), 80%);
  --bg-300-free: calc(10deg + var(--hue-rotate)) calc(18% * var(--saturation)) clamp(18%, 36% * var(--darken), 68%);
  --bg-400-free: calc(10deg + var(--hue-rotate)) calc(17% * var(--saturation)) clamp(15%, 30% * var(--darken), 65%);
  --bg-500-free: calc(10deg + var(--hue-rotate)) calc(17% * var(--saturation)) clamp(12.5%, 25% * var(--darken), 62.5%);
  --bg-600-free: calc(10deg + var(--hue-rotate)) calc(18% * var(--saturation)) clamp(10.5%, 21% * var(--darken), 60.5%);
  --bg-700-free: calc(10deg + var(--hue-rotate)) calc(20% * var(--saturation)) clamp(8.5%, 17% * var(--darken), 58.5%);
  --bg-800-free: calc(10deg + var(--hue-rotate)) calc(22% * var(--saturation)) clamp(6.5%, 13% * var(--darken), 56.5%);
  --bg-900-free: calc(10deg + var(--hue-rotate)) calc(28% * var(--saturation)) clamp(4.5%, 9% * var(--darken), 54.5%);
  --bg-950-free: calc(10deg + var(--hue-rotate)) calc(40% * var(--saturation)) clamp(2.5%, 5% * var(--darken), 52.5%);

  --primary-400: #ffc2b0;
  --primary-500: #ffa58f;
  --primary-600: #ff8a78;
  --green-400: #a9cc98;
  --green-500: #8fb97e;
  --green-600: #78a367;

  --pp-glow: rgb(253 112 113 / 14%);

  --navigation-background: hsl(354 36% 25%);
  --navigation-submenu-background: hsl(354 34% 21%);
  --navigation-item-background-hover: hsl(354 38% 31%);
  --navigation-subitem-background-hover: hsl(354 36% 28%);
  --navigation-color: var(--fg-300);
  --navigation-color-hover: var(--fg-100);
  --navigation-subitem-divider: 1px solid hsl(354 30% 30%);

  --button-primary-background: hsl(355 48% 38%);
  --button-primary-background-hover: hsl(355 50% 46%);
  --button-primary-color: var(--fg-200);
  --button-primary-color-hover: var(--fg-100);
  --button-box-shadow: 0 2px 0 0 #00000040;

  --card-label-background: var(--bg-100);
  --card-label-color: var(--fg-inverted);
  --read-ribbon-background: var(--green-500);
  --read-ribbon-color: var(--fg-inverted);
  --checkmark-checked: var(--green-500);
  --bookmark-line: var(--pp-coral);
  --tax-cloud-current: var(--primary-500);
  --page-box-shadow: 0 8px 28px -10px #00000080;
}

:root,
:root .chapter-formatting {
  --fg-100: hsl(calc(20deg + var(--hue-rotate)) max(calc(70% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(96% * var(--font-lightness,1)), 100%));
  --fg-200: hsl(calc(20deg + var(--hue-rotate)) max(calc(50% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(93% * var(--font-lightness,1)), 100%));
  --fg-300: hsl(calc(20deg + var(--hue-rotate)) max(calc(38% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(89% * var(--font-lightness,1)), 100%));
  --fg-400: hsl(calc(18deg + var(--hue-rotate)) max(calc(30% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(85% * var(--font-lightness,1)), 100%));
  --fg-500: hsl(calc(20deg + var(--hue-rotate)) max(calc(22% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(80% * var(--font-lightness,1)), 100%));
  --fg-600: hsl(calc(18deg + var(--hue-rotate)) max(calc(18% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(72% * var(--font-lightness,1)), 100%));
  --fg-700: hsl(calc(15deg + var(--hue-rotate)) max(calc(14% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(66% * var(--font-lightness,1)), 100%));
  --fg-800: hsl(calc(12deg + var(--hue-rotate)) max(calc(10% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(58% * var(--font-lightness,1)), 100%));
  --fg-900: hsl(calc(12deg + var(--hue-rotate)) max(calc(9% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(50% * var(--font-lightness,1)), 100%));
  --fg-950: hsl(calc(12deg + var(--hue-rotate)) max(calc(8% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(44% * var(--font-lightness,1)), 100%));
  --fg-tinted: hsl(calc(18deg + var(--hue-rotate)) max(calc(30% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(78% * var(--font-lightness,1)), 100%));
  --fg-inverted: hsl(calc(10deg + var(--hue-rotate)) max(calc(45% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(8% * var(--font-lightness,1)), 100%));
}

/* =============================================================================
   LIGHT MODE — peach cream with a coral nav and leaf-green status marks
   ============================================================================= */

:root[data-mode="light"] {
  --bg-50-free: calc(20deg + var(--hue-rotate)) calc(100% * var(--saturation)) clamp(49.75%, 99.5% * var(--darken), 99.75%);
  --bg-100-free: calc(20deg + var(--hue-rotate)) calc(100% * var(--saturation)) clamp(49%, 98% * var(--darken), 99%);
  --bg-200-free: calc(18deg + var(--hue-rotate)) calc(90% * var(--saturation)) clamp(48%, 96% * var(--darken), 98%);
  --bg-300-free: calc(17deg + var(--hue-rotate)) calc(76% * var(--saturation)) clamp(46.5%, 93% * var(--darken), 96.5%);
  --bg-400-free: calc(16deg + var(--hue-rotate)) calc(64% * var(--saturation)) clamp(44.5%, 89% * var(--darken), 94.5%);
  --bg-500-free: calc(15deg + var(--hue-rotate)) calc(56% * var(--saturation)) clamp(41.5%, 83% * var(--darken), 91.5%);
  --bg-600-free: calc(355deg + var(--hue-rotate)) calc(62% * var(--saturation)) clamp(26.5%, 53% * var(--darken), 76.5%);
  --bg-700-free: calc(353deg + var(--hue-rotate)) calc(58% * var(--saturation)) clamp(21%, 42% * var(--darken), 71%);
  --bg-800-free: calc(10deg + var(--hue-rotate)) calc(32% * var(--saturation)) clamp(10%, 20% * var(--darken), 60%);
  --bg-900-free: calc(10deg + var(--hue-rotate)) calc(36% * var(--saturation)) clamp(6.5%, 13% * var(--darken), 56.5%);
  --bg-950-free: calc(10deg + var(--hue-rotate)) calc(46% * var(--saturation)) clamp(3%, 6% * var(--darken), 53%);

  --primary-400: #ef6a6c;
  --primary-500: #cb2a3a;
  --primary-600: #952332;
  --green-400: #b5d6a4;
  --green-500: #587a4e;
  --green-600: #43603a;

  --pp-glow: rgb(251 170 143 / 38%);

  --navigation-background: var(--bg-600);
  --navigation-submenu-background: var(--bg-700);
  --navigation-item-background-hover: var(--bg-700);
  --navigation-subitem-background-hover: hsl(353 58% 36%);
  --navigation-color: var(--fg-inverted);
  --navigation-color-hover: #fff;
  --navigation-subitem-divider: 1px solid rgb(255 255 255 / 20%);
  --navigation-drop-shadow: drop-shadow(0 3px 3px rgb(160 40 55 / 28%));

  --button-box-shadow: 0 2px 0 0 rgb(120 30 45 / 28%);

  /* Warm, peach-tinted surfaces instead of grey overlays */
  --card-footer-bg-color: var(--bg-300);
  --infobox-background: var(--bg-300);
  --input-background: var(--bg-300);
  --blockquote-background: hsl(var(--bg-300-free) / 70%);
  --content-li-background-full: hsl(var(--bg-300-free) / 70%);
  --content-li-background-gradient: linear-gradient(to left, hsl(var(--bg-300-free) / 80%) 0%, hsl(var(--bg-300-free) / 80%) 55%, transparent 90%);
  --card-content-li-background-full: var(--bg-200);
  --card-content-li-background-gradient: linear-gradient(to left, var(--bg-200) 0%, var(--bg-200) 50%, transparent 90%);

  --card-label-background: var(--bg-600);
  --card-label-color: var(--fg-inverted);
  --read-ribbon-background: var(--green-500);
  --read-ribbon-color: var(--fg-inverted);
  --checkmark-checked: var(--green-500);
  --bookmark-line: var(--pp-coral);
  --tax-cloud-current: var(--primary-500);

  /* Shadows tinted coral instead of grey */
  --box-shadow-xs: 0 1px 2px 0 rgb(190 70 70 / 16%);
  --box-shadow-s: 0 2px 5px 0 rgb(190 70 70 / 18%);
  --box-shadow: 0 4px 10px -2px rgb(190 70 70 / 22%);
  --box-shadow-m: 0 4px 14px -4px rgb(190 70 70 / 26%), 0 1px 2px rgb(190 70 70 / 12%);
  --box-shadow-l: 0 8px 20px -6px rgb(190 70 70 / 28%), 0 1px 4px -2px rgb(190 70 70 / 20%);
  --box-shadow-xl: 0 10px 26px -8px rgb(190 70 70 / 32%), 0 2px 6px -2px rgb(190 70 70 / 20%);
  --page-box-shadow: 0 10px 34px -12px rgb(190 70 70 / 38%);
}

:root[data-mode="light"],
:root[data-mode="light"] .chapter-formatting {
  --fg-100: hsl(calc(8deg + var(--hue-rotate)) max(calc(55% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(9% * var(--font-lightness,1)), 100%));
  --fg-200: hsl(calc(8deg + var(--hue-rotate)) max(calc(50% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(12% * var(--font-lightness,1)), 100%));
  --fg-300: hsl(calc(8deg + var(--hue-rotate)) max(calc(46% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(15% * var(--font-lightness,1)), 100%));
  --fg-400: hsl(calc(8deg + var(--hue-rotate)) max(calc(42% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(19% * var(--font-lightness,1)), 100%));
  --fg-500: hsl(calc(10deg + var(--hue-rotate)) max(calc(30% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(23% * var(--font-lightness,1)), 100%));
  --fg-600: hsl(calc(10deg + var(--hue-rotate)) max(calc(24% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(30% * var(--font-lightness,1)), 100%));
  --fg-700: hsl(calc(10deg + var(--hue-rotate)) max(calc(18% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(38% * var(--font-lightness,1)), 100%));
  --fg-800: hsl(calc(10deg + var(--hue-rotate)) max(calc(14% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(44% * var(--font-lightness,1)), 100%));
  --fg-900: hsl(calc(10deg + var(--hue-rotate)) max(calc(14% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(56% * var(--font-lightness,1)), 100%));
  --fg-950: hsl(calc(10deg + var(--hue-rotate)) max(calc(14% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(64% * var(--font-lightness,1)), 100%));
  --fg-tinted: hsl(calc(8deg + var(--hue-rotate)) max(calc(40% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(20% * var(--font-lightness,1)), 100%));
  --fg-inverted: hsl(calc(20deg + var(--hue-rotate)) max(calc(100% * (var(--font-saturation) + var(--saturation) - 1)), 0%) clamp(0%, calc(99% * var(--font-lightness,1)), 100%));
}

/* =============================================================================
   COMPONENTS
   ============================================================================= */

/* The logo's soft glow, repeated as a wash behind the page */
:root:not(.minimal) .site {
  background-image: radial-gradient(120% 520px at 50% 0%, var(--pp-glow), transparent 75%);
  background-repeat: no-repeat;
}

.header .custom-logo {
  filter: drop-shadow(0 6px 10px rgb(253 112 113 / 28%));
}

/* Pill tags */
.tag-pill:not(._inline) {
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 11px;
  font-weight: var(--font-weight-semi-strong);
}

/* Titles use the rounded display face */
.card__title,
.chapter__title,
.story__identity h1,
.post__title,
.widget .wp-block-heading,
.widget .widgettitle {
  font-family: var(--ff-heading);
}

/* Inputs: soft rounded fields with a coral focus ring */
:root {
  --input-border-radius: 999px;
}

textarea,
.keyword-input__track {
  border-radius: var(--layout-border-radius-small);
}

input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="url"], [type="number"]):focus,
textarea:focus,
select:focus {
  --input-shadow: 0 0 0 2px var(--primary-500);
  outline: none;
}

/* Keyboard focus */
.user-is-tabbing :focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Text selection in both modes */
::selection {
  background: var(--text-selection-background);
}

/* Progress bar picks up the coral */
.progress__bar {
  background-color: var(--pp-coral);
}

/* Blockquote and infobox get a soft peach edge */
.wp-block-quote:where(:not(.no-theme-style)):not(.is-style-plain)::before,
.wp-block-quote:where(:not(.no-theme-style)):not(.is-style-plain)::after {
  border-color: var(--pp-peach);
}

.infobox {
  border-left: 4px solid var(--pp-peach);
}

/* Footer links warm up on hover */
.footer {
  --footer-link-color-hover: var(--primary-500);
}