/* ==========================================================================
   Michaelene Dawson-Globus Clinical Resource Store — Rainbow Workbook Theme
   Sampled directly from the 237-page Teen EMDR Workbook & Card Decks
   ========================================================================== */

:root {
  /* Sampled Paper & Ink */
  --paper-bg: #FAF7F2;
  --paper-card: #FFFFFF;
  --paper-warm: #F4EFE6;
  --ink-primary: #111315;
  --ink-secondary: #4A4D52;
  --ink-muted: #767A80;
  --border-sketch: #1E2022;
  --border-subtle: #E5DEC9;

  /* Sampled 6-Color Muted Rainbow Palette (Default: Workbook Original) */
  --rainbow-1: #C3907E; /* Dusty Rose / Coral */
  --rainbow-2: #AD7962; /* Warm Terracotta / Clay */
  --rainbow-3: #E6B433; /* Sun Gold / Ochre */
  --rainbow-4: #426973; /* Deep Sage / Teal */
  --rainbow-5: #6A7E95; /* Slate Blue / Periwinkle */
  --rainbow-6: #552D73; /* Deep Plum */

  /* Brand & Action Accents */
  --brand-plum: #552D73;
  --brand-gold: #E6B433;
  --brand-teal: #426973;
  --brand-rose: #C3907E;
  --brand-clay: #704E41;
  --brand-sand: #E7CA8F;

  /* Typography */
  --font-display: 'Fredoka', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-hand: 'Caveat', 'Shadows Into Light', cursive, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

/* Palette Variant 2: Warm Studio Terracotta & Plum */
[data-palette="warm-studio"] {
  --paper-bg: #FDF9F5;
  --paper-warm: #F7EDE4;
  --rainbow-1: #D96B52;
  --rainbow-2: #E09F3E;
  --rainbow-3: #9E2A2B;
  --rainbow-4: #540B0E;
  --rainbow-5: #335C67;
  --rainbow-6: #6D4C7D;
  --brand-plum: #6D4C7D;
  --brand-gold: #E09F3E;
  --brand-teal: #335C67;
}

/* Palette Variant 3: Playful Watercolor Brights (Regulation & Values Deck Vibe) */
[data-palette="playful-brights"] {
  --paper-bg: #F8FAFC;
  --paper-warm: #F1F5F9;
  --rainbow-1: #E11D48;
  --rainbow-2: #EA580C;
  --rainbow-3: #EAB308;
  --rainbow-4: #0D9488;
  --rainbow-5: #2563EB;
  --rainbow-6: #7C3AED;
  --brand-plum: #7C3AED;
  --brand-gold: #EAB308;
  --brand-teal: #0D9488;
}

/* Font Style Presets */
[data-heading-style="marker"] {
  --font-display: 'Fredoka', 'Outfit', sans-serif;
}
[data-heading-style="editorial"] {
  --font-display: 'Fraunces', Georgia, serif;
}
[data-heading-style="clean"] {
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--paper-bg);
  color: var(--ink-primary);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.font-display-marker {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.font-handwritten {
  font-family: var(--font-hand);
}

/* ==========================================================================
   Signature Workbook Motif 1: 6-Segment Rainbow Brush Rule
   ========================================================================== */
.rainbow-brush-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 100%;
  height: 8px;
  margin-top: 6px;
  margin-bottom: 12px;
}

.rainbow-brush-bar span {
  display: block;
  height: 100%;
  border-radius: 999px 40px 999px 40px / 40px 999px 40px 999px;
  transform: rotate(-0.6deg);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.rainbow-brush-bar span:nth-child(1) { background-color: var(--rainbow-1); transform: rotate(-0.8deg); }
.rainbow-brush-bar span:nth-child(2) { background-color: var(--rainbow-2); transform: rotate(0.5deg); }
.rainbow-brush-bar span:nth-child(3) { background-color: var(--rainbow-3); transform: rotate(-0.4deg); }
.rainbow-brush-bar span:nth-child(4) { background-color: var(--rainbow-4); transform: rotate(0.7deg); }
.rainbow-brush-bar span:nth-child(5) { background-color: var(--rainbow-5); transform: rotate(-0.5deg); }
.rainbow-brush-bar span:nth-child(6) { background-color: var(--rainbow-6); transform: rotate(0.4deg); }

/* Single Wobbly Brush Underline */
.brush-underline {
  position: relative;
  display: inline-block;
}
.brush-underline::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -4px;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--rainbow-1) 0%,
    var(--rainbow-2) 20%,
    var(--rainbow-3) 40%,
    var(--rainbow-4) 60%,
    var(--rainbow-5) 80%,
    var(--rainbow-6) 100%
  );
  border-radius: 999px;
  opacity: 0.88;
}

/* ==========================================================================
   Signature Workbook Motif 2: Wobbly Hand-Drawn Cards & Borders
   ========================================================================== */
.sketch-card {
  background-color: var(--paper-card);
  border: 2px solid var(--ink-primary);
  border-radius: 18px 22px 19px 24px / 22px 18px 24px 19px;
  box-shadow: 4px 5px 0px rgba(17, 19, 21, 0.9);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sketch-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 8px 0px rgba(17, 19, 21, 0.95);
}

.sketch-card-static {
  background-color: var(--paper-card);
  border: 2px solid var(--ink-primary);
  border-radius: 18px 22px 19px 24px / 22px 18px 24px 19px;
  box-shadow: 4px 5px 0px rgba(17, 19, 21, 0.9);
}

.sketch-btn {
  border: 2px solid var(--ink-primary);
  border-radius: 12px 15px 13px 16px / 15px 12px 16px 13px;
  box-shadow: 3px 3px 0px var(--ink-primary);
  transition: all 0.15s ease;
  font-weight: 700;
}

.sketch-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 5px 0px var(--ink-primary);
}

.sketch-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--ink-primary);
}

/* ==========================================================================
   Signature Workbook Motif 3: Notebook Binder Hole-Punch Margin
   ========================================================================== */
.notebook-page {
  position: relative;
  padding-left: 2.25rem !important;
}

.notebook-page::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 12px;
  width: 8px;
  background-image: radial-gradient(circle, #B8B2A6 2.5px, transparent 3px);
  background-size: 8px 22px;
  background-repeat: repeat-y;
  opacity: 0.75;
  pointer-events: none;
}

body.hide-notebook-holes .notebook-page {
  padding-left: 1.5rem !important;
}

body.hide-notebook-holes .notebook-page::before {
  display: none;
}

/* ==========================================================================
   Signature Workbook Motif 4: 6-Color Rotating Prompt Dots
   ========================================================================== */
.rainbow-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(17, 19, 21, 0.25);
}

.rainbow-dot-1 { background-color: var(--rainbow-1); }
.rainbow-dot-2 { background-color: var(--rainbow-2); }
.rainbow-dot-3 { background-color: var(--rainbow-3); }
.rainbow-dot-4 { background-color: var(--rainbow-4); }
.rainbow-dot-5 { background-color: var(--rainbow-5); }
.rainbow-dot-6 { background-color: var(--rainbow-6); }

/* Values Card Double-Rainbow Border Frame */
.values-double-frame {
  position: relative;
  border: 2.5px solid var(--ink-primary);
  padding: 6px;
  background: #fff;
}
.values-double-frame-inner {
  border: 2.5px solid transparent;
  border-image: linear-gradient(
    135deg,
    var(--rainbow-1),
    var(--rainbow-3),
    var(--rainbow-4),
    var(--rainbow-6)
  ) 1;
  height: 100%;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--paper-warm);
}
::-webkit-scrollbar-thumb {
  background: var(--rainbow-5);
  border-radius: 999px;
}