/* --- CLAYMORPHISM EXACT SPEC OVERRIDE https://www.setproduct.com/blog/claymorphism-design-guide --- */

/* Root tokens mapped to your guide */
:root {
  --bg-app: #F7F5FB;
  --r-card: 33px;

  --surface-lavender: #B8A6FF;  /* primary cards, hero blocks */
  --surface-sky:      #9EC9F0;  /* info, secondary cards */
  --surface-mint:     #7DD4A8;  /* success, positive stats */
  --surface-peach:    #FFB59E;  /* warm cards, highlights */
  --surface-pink:     #F5B8D0;  /* accent, playful cards */
  --surface-lemon:    #F5D77A;  /* attention rows, badges */

  --action-primary:   #FF7A6B;  /* coral: confirm, start, play */
  --action-on:        #FFFFFF;  /* label on coral, ratio >= 4.5 */
  --status-active:    #7DD4A8;  /* green pill */
  --status-pending:   #F5D77A;  /* yellow pill */
  --status-archived:  #C9B5FF;  /* muted lavender pill */

  --text-strong: #2E2A3F;
  --text-muted: #6B6580;

  /* Card Surface Fill Colors */
  --card-lavender: #C8B6FF; 
  --card-mint:     #80E3B7; 
  --card-peach:    #FFCFB3; 
  --card-sky:      #9EE2FF; 
  --card-coral:    #FF8A7A; 
  --card-lemon:    #FFF099; 
  --card-rose:     #FFB3D9; 
  --card-teal:     #7DE8E3; 
  --card-pink:     #FF75C3; 
  --card-yellow:   #FFD13B; 
  --card-periwinkle: #A3B8FF;
  --card-apricot:    #FFB580;
  --card-lime:       #BBEA70;
  --card-lilac:      #E2A9F3;

  /* Hue-Matched Drop Shadows (Bottom-Right Glow) */
  --shadow-lavender: rgba(110, 80, 220, 0.35);
  --shadow-mint:     rgba(40, 175, 120, 0.35);
  --shadow-peach:    rgba(235, 120, 80, 0.35);
  --shadow-sky:      rgba(40, 150, 220, 0.35);
  --shadow-coral:    rgba(230, 70, 60, 0.35);
  --shadow-lemon:    rgba(210, 170, 30, 0.35);
  --shadow-rose:   rgba(230, 80, 160, 0.35);
  --shadow-teal:   rgba(30, 165, 160, 0.35);
  --shadow-pink:     rgba(230, 40, 150, 0.35);
  --shadow-yellow:   rgba(220, 150, 10, 0.35);
  --shadow-periwinkle: rgba(70, 95, 230, 0.35);
  --shadow-apricot:    rgba(235, 110, 50, 0.35);
  --shadow-lime:       rgba(130, 190, 30, 0.35);
  --shadow-lilac:      rgba(170, 70, 200, 0.35);  

  /* Inner Depth Inset Shadows (Bottom-Right Rim) */
  --inset-lavender:  rgba(90, 60, 190, 0.25);
  --inset-mint:      rgba(30, 140, 95, 0.25);
  --inset-peach:     rgba(200, 95, 60, 0.25);
  --inset-sky:       rgba(30, 120, 180, 0.25);
  --inset-coral:     rgba(180, 50, 40, 0.25);
  --inset-lemon:     rgba(180, 140, 20, 0.25);  
  --inset-rose:    rgba(190, 50, 130, 0.25);
  --inset-teal:    rgba(20, 130, 125, 0.25);
  --inset-pink:      rgba(190, 20, 120, 0.25);
  --inset-yellow:    rgba(180, 120, 0, 0.25); 
  --inset-periwinkle:  rgba(50, 75, 200, 0.25);
  --inset-apricot:     rgba(200, 85, 30, 0.25);
  --inset-lime:        rgba(100, 160, 20, 0.25);
  --inset-lilac:       rgba(140, 40, 170, 0.25);   

  --card-disabled: #D8DCF0;
  --shadow-disabled: rgba(160, 165, 185, 0.25);
  --inset-disabled:  rgba(130, 135, 155, 0.2);
  --text-disabled:   #8C92A4;

}

/* Standalone color modifiers (usable on any element) */
.is-lavender {
  --card-bg: var(--surface-lavender);
  --card-shadow: var(--shadow-lavender);
  --card-inset: var(--inset-lavender);
}

.is-mint {
  --card-bg: var(--surface-mint);
  --card-shadow: var(--shadow-mint);
  --card-inset: var(--inset-mint);
}

.is-peach {
  --card-bg: var(--surface-peach);
  --card-shadow: var(--shadow-peach);
  --card-inset: var(--inset-peach);
}

.is-sky {
  --card-bg: var(--surface-sky);
  --card-shadow: var(--shadow-sky);
  --card-inset: var(--inset-sky);
}

.is-coral {
  --card-bg: var(--action-primary);
  --card-shadow: var(--shadow-coral);
  --card-inset: var(--inset-coral);
}

.is-lemon {
  --card-bg: var(--surface-lemon);
  --card-shadow: var(--shadow-lemon);
  --card-inset: var(--inset-lemon);
}

.is-rose {
  --card-bg: var(--card-rose);
  --card-shadow: var(--shadow-rose);
  --card-inset: var(--inset-rose);
}

.is-teal {
  --card-bg: var(--card-teal);
  --card-shadow: var(--shadow-teal);
  --card-inset: var(--inset-teal);
}

.is-pink {
  --card-bg: var(--card-pink);
  --card-shadow: var(--shadow-pink);
  --card-inset: var(--inset-pink);
}

.is-yellow {
  --card-bg: var(--card-yellow);
  --card-shadow: var(--shadow-yellow);
  --card-inset: var(--inset-yellow);
}

.is-periwinkle {
  --card-bg: var(--card-periwinkle);
  --card-shadow: var(--shadow-periwinkle);
  --card-inset: var(--inset-periwinkle);
}

.is-apricot {
  --card-bg: var(--card-apricot);
  --card-shadow: var(--shadow-apricot);
  --card-inset: var(--inset-apricot);
}

.is-lime {
  --card-bg: var(--card-lime);
  --card-shadow: var(--shadow-lime);
  --card-inset: var(--inset-lime);
}

.is-lilac {
  --card-bg: var(--card-lilac);
  --card-shadow: var(--shadow-lilac);
  --card-inset: var(--inset-lilac);
}

/* Page Background & Typography */
body {
  background-color: var(--bg-app) !important;
  color: var(--text-strong) !important;
  font-family: 'Fredoka', 'Nunito', sans-serif !important;
}

/* Header Section Card */
.profile-avatar-container {
  background-color: #F5D77A !important;
  border-radius: 28px !important;
  padding: 32px 24px !important;
  box-shadow: 
    8px 8px 24px rgba(209, 176, 69, 0.4),
    -8px -8px 24px rgba(255, 255, 255, 0.8),
    inset 4px 4px 8px rgba(255, 255, 255, 0.6),
    inset -6px -6px 12px rgba(209, 176, 69, 0.35) !important;    
}

/* Header Text */
.profile-name {
  color: #3A2E39 !important; /* Soft deep plum/chocolate */
  background: transparent !important; /* Removes white card background */
  box-shadow: none !important;
  padding: 0 !important;
  margin: 12px auto 0 !important;
  display: block !important;
  font-weight: 700 !important;
  
  /* Reset old neon/stroke properties */
  -webkit-text-stroke: 0 !important;
  
  /* Inner bevel/emboss effect to merge with yellow surface */
  text-shadow: 
    1px 2px 2px rgba(255, 255, 255, 0.8), /* Top-left highlight */
    -1px -1px 2px rgba(209, 176, 69, 0.5) !important; /* Bottom-right shadow depth */
}

.profile-bio {
  color: #2E2A3F !important;
  opacity: 0.8 !important;
  margin-top: 12px !important;
}

/* Avatar with soft 3D clay frame */
.profile-avatar {
  display: block !important;
  width: 120px;
  height: 120px;
  margin: 0 auto 16px auto !important;
  border: 3px solid #2e2a3f75 !important;
  box-shadow: 
    4px 6px 16px rgba(209, 176, 69, 0.35),
    inset 2px 2px 4px rgba(255, 255, 255, 0.6) !important;    
}

/* Category Titles */
.group-title {
  display: block;  
  text-align: center;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Link Cards */
.link-item {
  background-color: var(--card-bg, var(--card-lavender)) !important;
  border-radius: var(--r-card) !important;
  border: none !important;
  clip-path: none !important;
  padding: 20px 24px !important;
  
  box-shadow:
    6px 10px 18px var(--card-shadow, var(--shadow-lavender)),
    inset 2px 3px 6px rgba(255, 255, 255, 0.65),
    inset -3px -5px 10px var(--card-inset, var(--inset-lavender))
    !important;
    
  transition: transform 140ms ease, box-shadow 140ms ease !important;
}

.link-item:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    8px 14px 24px var(--card-shadow, var(--shadow-lavender)),
    inset 2px 3px 6px rgba(255, 255, 255, 0.8),
    inset -3px -5px 10px var(--card-inset, var(--inset-lavender))
    !important;
}

.link-item:active {
  transform: scale(0.97) !important;
  box-shadow:
    3px 5px 9px var(--card-shadow, var(--shadow-lavender)),
    inset 1px 1.5px 3px rgba(255, 255, 255, 0.65),
    inset -1.5px -2.5px 5px var(--card-inset, var(--inset-lavender))
    !important;
}

/* Card Typography */
.link-text {
  color: var(--text-strong) !important;
  font-weight: 700 !important;
}

.link-description {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}


/* Claymorphism style for tooltips (::after pseudo-element) */
.link-item::after {
  background: var(--text-strong) !important;
  color: #FFFFFF !important;
  font-family: 'Fredoka', 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  padding: 4px 12px !important;
  top: -8px !important;
  right: 16px !important;
  
  /* Soft neutral clay shadow */
  box-shadow: 
    2px 4px 10px rgba(46, 42, 63, 0.25),
    inset 1px 1px 2px rgba(255, 255, 255, 0.4) !important;
}


.link-icon-container {
  color: #F7F5FB !important; /* Off-white tint matching page background */
  filter: drop-shadow(0 2px 4px rgba(46, 42, 63, 0.35)) !important;  
  opacity: .8;
}

.link-item.is-todo {
  color: var(--text-disabled) !important;
  opacity: 0.75;
  background-color: var(--card-disabled) !important;
  --card-shadow: var(--shadow-disabled);
  --card-inset: var(--inset-disabled);

}


/* Status Badges (Coming Soon) */
.todo-badge {
  background-color: #F5D77A !important; /* Yellow pill */
  color: var(--text-strong) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  padding: 4px 10px !important;
  box-shadow: 2px 4px 8px rgba(180, 140, 0, 0.2) !important;
}

@media (min-width: 576px) {
  .content-grid {
    background-color: #FFFFFF !important; 
    border-radius: 28px !important;
    padding: 32px !important;
    
    /* Soft neutral clay shadow recipe */
    box-shadow: 
      8px 8px 24px rgba(160, 165, 180, 0.2),
      -8px -8px 24px rgba(255, 255, 255, 0.9),
      inset 4px 4px 8px rgba(255, 255, 255, 0.8),
      inset -6px -6px 12px rgba(160, 165, 180, 0.12) !important;
  }

  /* Standard category headings for white background */
  .group-title {
    color: var(--text-strong) !important;
    opacity: 1 !important;
  }
}

@media (min-width: 576px) {
  .content-grid {
    position: relative !important;
  }

  .content-grid::after {
    content: '' !important;
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 90px !important;
    height: 90px !important;
    background: url('../img/clay-bee.png') no-repeat center / contain !important;
    pointer-events: none !important; /* Non-blocking for clicks */
    z-index: 2 !important;
  }
}