/* =============================================================================
   DEWDROP CHILD THEME
   Palette taken from the Dewdrop TL logo and background:
     frost   #E6EEF8   page   #F8FAFD   water  #2FA8E8
     ocean   #2478CF   navy   #14172B   leaf   #6FBF4A
     bow     #5BC0F5   bunny  #F08AA5   gold   #FFC23D
   Note: Customizer hue/saturation/lightness sliders are overridden by this file.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   LIGHT MODE
   ----------------------------------------------------------------------------- */

:root[data-mode=light] {
  --theme-color-base: 213 60 95;

  /* Background scale (50 = lightest, 950 = darkest navy for shadows) */
  --bg-50-free:  210 60% 99%;
  --bg-100-free: 212 55% 97.5%;
  --bg-200-free: 213 60% 95%;
  --bg-300-free: 212 55% 91%;
  --bg-400-free: 212 50% 87%;
  --bg-500-free: 212 45% 81%;
  --bg-600-free: 212 30% 58%;
  --bg-700-free: 214 32% 42%;
  --bg-800-free: 216 40% 27%;
  --bg-900-free: 218 45% 19%;
  --bg-950-free: 220 55% 12%;

  /* Surfaces */
  --body-bg-color: var(--bg-400);
  --site-bg-color: var(--bg-200);
  --page-bg-color: #f8fafd;
  --card-bg-color: #fff;
  --card-frame-border-color: #cfdef0;
  --layout-lineart-color: hsl(218 40% 30% / 15%);
  --hr-dots-color: #a9c0de;

  /* Navigation */
  --navigation-background: #fff;
  --navigation-submenu-background: #eaf1fa;
  --navigation-item-background-hover: #dce8f6;
  --navigation-subitem-background-hover: #cfdff2;
  --navigation-color: #2a3550;
  --navigation-color-hover: #14172b;
  --navigation-subitem-divider: 1px solid #c2d5ec;

  /* Accent: water blue */
  --primary-400: #5bc0f5;
  --primary-500: #2fa8e8;
  --primary-600: #1a73c9;
  --inline-link-color-hover: #1a73c9;
  --widget-link-color-hover: #2fa8e8;

  /* Leaf green and soft red */
  --green-400: #a6dc8c;
  --green-500: #6fbf4a;
  --green-600: #4f9f30;
  --red-400: #f78f9c;
  --red-500: #ee5f77;
  --red-600: #d6405b;

  /* Buttons */
  --button-primary-background: #2478cf;
  --button-primary-background-hover: #1b62b3;
  --button-primary-background-disabled: #b4cdea;
  --button-primary-color: #fff;
  --button-primary-color-hover: #fff;
  --button-quick-background: #2478cf;
  --button-quick-background-hover: #1b62b3;
  --button-suggestion-background: #4a97dd;
  --button-suggestion-background-hover: #2478cf;
  --button-secondary-border: 1px solid #c2d5ec;
  --button-secondary-border-hover: 1px solid #2fa8e8;
  --button-secondary-background-hover: #e6eef8;
  --button-active-background: #1b62b3;

  /* Tabs, pagination, filters */
  --tab-background: #e6eef8;
  --tab-background-active: #2478cf;
  --tab-color: #2f4468;
  --tab-color-hover: #14172b;
  --filter-reel-background: #e6eef8;
  --filter-reel-background-active: #2478cf;
  --filter-reel-color: #2f4468;
  --pagination-background: #e6eef8;
  --pagination-background-current: #2478cf;
  --pagination-color: #2f4468;
  --pagination-color-hover: #14172b;

  /* Misc UI */
  --input-token-background: #2478cf;
  --popup-menu-background: #1e3a5f;
  --popup-menu-background-hover: #2c4f7c;
  --micro-menu-background: #1e3a5f;
  --tooltip-background: #1e3a5f;
  --notice-default-background: #1e3a5f;
  --progress-bar-background: #2fa8e8;
  --read-ribbon-background: #2fa8e8;
  --read-ribbon-color: #fff;
  --scrollbar-thumb: #2fa8e8;

  /* Badges and bookmarks */
  --badge-author-background: #f5a524;
  --badge-supporter-background: #f08aa5;
  --badge-moderator-background: #2fa8e8;
  --bookmark-color-alpha: #9fb4cc;
  --bookmark-color-beta: #ffc23d;
  --bookmark-color-gamma: #6fbf4a;
  --bookmark-color-delta: #ee6f8a;
}

/* Text colors, also applied inside chapter text */
:root[data-mode=light],
:root[data-mode=light] .chapter-formatting {
  --fg-100: hsl(228 45% 7%);
  --fg-200: hsl(228 40% 10%);
  --fg-300: hsl(228 34% 13%);
  --fg-400: hsl(228 30% 17%);
  --fg-500: hsl(228 24% 23%);
  --fg-600: hsl(225 16% 31%);
  --fg-700: hsl(222 12% 40%);
  --fg-800: hsl(218 10% 46%);
  --fg-900: hsl(218 10% 53%);
  --fg-950: hsl(218 10% 59%);
  --fg-tinted: hsl(226 32% 16%);
  --fg-inverted: hsl(210 60% 99%);
}

/* -----------------------------------------------------------------------------
   DARK MODE ("dewdrop night": deep navy with soft blue accents)
   ----------------------------------------------------------------------------- */

:root {
  --theme-color-base: 218 30 12;

  --bg-50-free:  218 24% 36%;
  --bg-100-free: 218 24% 29%;
  --bg-200-free: 218 25% 23%;
  --bg-300-free: 218 26% 19%;
  --bg-400-free: 218 27% 16%;
  --bg-500-free: 218 28% 14%;
  --bg-600-free: 218 28% 12.5%;
  --bg-700-free: 218 29% 11%;
  --bg-800-free: 218 30% 9.5%;
  --bg-900-free: 220 35% 7%;
  --bg-950-free: 222 45% 4%;

  --primary-400: #9ad8fa;
  --primary-500: #6cc4f5;
  --primary-600: #4aaeea;

  --green-400: #94c96f;
  --green-500: #7fb85a;
  --green-600: #6fa84b;

  --button-primary-background: #2478cf;
  --button-primary-background-hover: #3a8fe4;
  --button-primary-color: #fff;
  --button-primary-color-hover: #fff;
  --button-quick-background: #2478cf;
  --button-quick-background-hover: #3a8fe4;
  --button-quick-color: #fff;
  --button-quick-color-hover: #fff;

  --badge-author-background: #f5a524;
  --badge-supporter-background: #f08aa5;
  --bookmark-color-beta: #ffc23d;
  --bookmark-color-delta: #f08aa5;
}

:root:not([data-mode=light]),
:root:not([data-mode=light]) .chapter-formatting {
  --fg-100: hsl(212 60% 97%);
  --fg-200: hsl(212 45% 93%);
  --fg-300: hsl(213 35% 89%);
  --fg-400: hsl(214 30% 85%);
  --fg-500: hsl(214 28% 81%);
  --fg-600: hsl(215 25% 75%);
  --fg-700: hsl(215 20% 69%);
  --fg-800: hsl(216 15% 63%);
  --fg-900: hsl(216 12% 56%);
  --fg-950: hsl(216 10% 50%);
}

/* -----------------------------------------------------------------------------
   EXTRA SOFT TOUCHES (safe, optional)
   ----------------------------------------------------------------------------- */

::selection {
  background: #b7dcf8;
  color: #0f2540;
}

:root[data-mode=light] .main__background {
  border-radius: 6px;
  box-shadow: 0 6px 24px hsl(218 50% 30% / 14%);
}

:root[data-mode=light] a:focus-visible,
:root[data-mode=light] button:focus-visible {
  outline: 2px solid #2fa8e8;
  outline-offset: 2px;
}