/* Theme 4: Sage and Cream -- muted green-sage backgrounds with clay/terracotta accents */

body[data-theme="4"] {
  /* Core surfaces */
  --bg-primary:        #EBF0E8;
  --bg-secondary:      #F8F4EE;
  --bg-card:           #F3F7F1;
  --bg-card-hover:     #E2EBE0;

  /* Borders */
  --border:            rgba(28,38,28,0.10);
  --border-hover:      rgba(28,38,28,0.18);

  /* Text */
  --text-primary:      #1C261C;
  --text-secondary:    #5A6E5A;
  --text-muted:        #7C8C7C;

  /* Accents -- hex */
  --accent-blue:       #BF6B52;
  --accent-purple:     #A65E46;
  --accent-cyan:       #C9A96E;
  --accent-pink:       #C98685;
  --accent-green:      #7D9B76;

  /* Accents -- RGB triples (must match hex companions exactly) */
  --accent-blue-rgb:   191,107,82;
  --accent-purple-rgb: 166,94,70;
  --accent-cyan-rgb:   201,169,110;
  --accent-pink-rgb:   201,134,133;
  --accent-green-rgb:  125,155,118;

  /* Gradients */
  --gradient-main:     linear-gradient(135deg, #BF6B52, #C9A96E, #7D9B76);
  --gradient-subtle:   linear-gradient(135deg, rgba(191,107,82,0.12), rgba(125,155,118,0.12));
  --gradient-glow:     radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(191,107,82,0.06), transparent 40%);

  /* Typography */
  --font-display:      'Fraunces', Georgia, serif;

  /* Texture */
  --grain-opacity:     0.04;

  /* Component tokens */
  --logo-box-bg:       linear-gradient(135deg, #7D9B76, #BF6B52);
  --cta-bg:            #BF6B52;
  --cta-text:          #F3F7F1;
  --shadow-soft:       0 16px 40px rgba(28,38,28,0.10);
  --nav-bg:            rgba(235,240,232,0.85);
  --grid-line:         rgba(28,38,28,0.04);

  /* Hero orbs */
  --orb-1:             rgba(191,107,82,0.16);
  --orb-2:             rgba(125,155,118,0.16);
  --orb-3:             rgba(201,169,110,0.12);
}

/* Scoped tactile touches for Theme 4 only */
body[data-theme="4"] ::selection {
  background: rgba(191,107,82,0.20);
  color: #1C261C;
}

body[data-theme="4"] :focus-visible {
  outline-color: #BF6B52;
}