/* skui-rose.css  warm rose / blush light theme
   soft petal pinks and warm whites, deep burgundy accent,
   delicate micro-dot pattern on body,
   elegant editorial serif typography */

@import url('./light.css');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,400&display=swap');

:root {
  --bg-void:    hsl(340, 16%, 66%);
  --bg-deep:    hsl(335, 12%, 73%);
  --bg-base:    hsl(330, 10%, 84%);
  --bg-raised:  hsl(325, 8%, 89%);
  --bg-float:   hsl(320, 6%, 92%);
  --bg-hover:   hsl(310, 5%, 96%);

  --surf-t:     hsl(325, 8%, 91%);
  --surf-b:     hsl(335, 12%, 78%);
  --surf-btn-t: hsl(315, 6%, 96%);
  --surf-btn-b: hsl(335, 14%, 65%);

  --text-primary:   hsl(340, 22%, 14%);
  --text-secondary: hsl(335, 16%, 32%);
  --text-muted:     hsl(330, 10%, 52%);
  --text-inverse:   #ffffff;
  --text-link:      hsl(340, 65%, 38%);

  /* deep burgundy / crimson accent */
  --blue-t:    hsl(345, 72%, 52%);
  --blue-b:    hsl(340, 80%, 36%);
  --blue-lit:  hsl(350, 75%, 62%);
  --blue-dim:  hsl(338, 70%, 24%);

  /* dusty rose highlight */
  --secondary-t:    hsl(355, 60%, 60%);
  --secondary-b:    hsl(348, 55%, 44%);
  --secondary-lit:  hsl(2, 65%, 68%);
  --secondary-glow: rgba(200, 60, 80, 0.22);

  --danger-t:  #d83030;
  --danger-b:  #a81818;
  --success-t: #2e8858;
  --success-b: #1e6040;
  --warn-t:    #b87018;
  --warn-b:    #8a5010;

  --border-hi:  rgba(255, 255, 255, 0.60);
  --border-lo:  rgba(120, 40, 60, 0.18);
  --border-mid: rgba(120, 40, 60, 0.10);

  --shadow-sm:    0 1px 3px rgba(100,30,50,0.14), 0 1px 0 rgba(255,255,255,0.65);
  --shadow-md:    0 3px 12px rgba(100,30,50,0.16), 0 1px 4px rgba(100,30,50,0.09);
  --shadow-lg:    0 8px 32px rgba(100,30,50,0.20), 0 2px 8px rgba(100,30,50,0.12);
  --shadow-inset: inset 0 2px 6px rgba(100,30,50,0.10), inset 0 1px 0 rgba(255,255,255,0.55);

  --bevel-hi: inset 0 1px 0 rgba(255, 255, 255, 0.68);
  --bevel-lo: inset 0 -1px 0 rgba(120, 40, 60, 0.14);

  --font-sans:    'Source Serif 4', 'Georgia', serif;
  --font-mono:    'Cascadia Code', 'Consolas', monospace;
  --font-display: 'Playfair Display', 'Georgia', serif;
}

/* micro-dot pattern + warm rose gradient */
body {
  background-color: hsl(330, 10%, 84%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='0.9' fill='rgba(180,60,80,0.09)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 65% 40% at 22% 5%,  rgba(220,160,170,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 78% 92%, rgba(190,130,145,0.18) 0%, transparent 60%),
    linear-gradient(150deg,
      hsl(330,12%,83%) 0%,
      hsl(325,10%,86%) 35%,
      hsl(320,8%,88%)  65%,
      hsl(330,11%,82%) 100%
    );
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

body::before { opacity: 0.03; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(255,255,255,0.65);
  letter-spacing: 0.005em;
}

h5, h6 { font-family: var(--font-sans); font-weight: 600; text-shadow: none; }

p {
  color: var(--text-secondary);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

a { color: var(--text-link); }
a:hover { color: var(--blue-b); }

/* burgundy accent on primary button */
.btn--primary {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,0.30)  0%,
      rgba(255,255,255,0.10) 49%,
      transparent            50%,
      rgba(0,0,0,0.06)       100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  border: 1px solid rgba(80,10,30,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(80,10,30,0.22),
    0 3px 10px rgba(100,20,40,0.28),
    0 1px 3px rgba(100,20,40,0.18);
  color: white;
}

.btn--primary:hover { filter: brightness(1.08); }

.btn--secondary {
  background-color: var(--secondary-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,0.28)  0%,
      rgba(255,255,255,0.08) 49%,
      transparent            50%,
      rgba(0,0,0,0.06)       100%
    ),
    linear-gradient(180deg, var(--secondary-t) 0%, var(--secondary-b) 100%);
  border: 1px solid rgba(90,20,40,0.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(80,10,30,0.22),
    0 3px 10px rgba(180,40,60,0.24),
    0 0 12px var(--secondary-glow);
  color: white;
}

.btn--secondary:hover { filter: brightness(1.08); }

/* ghost in rose palette */
.btn--ghost {
  color: var(--text-secondary);
  border: 1px solid rgba(120,40,60,0.22);
  background: rgba(255,255,255,0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 0 1px 3px rgba(100,30,50,0.10);
}

.btn--ghost:hover { color: var(--text-primary); background: rgba(255,255,255,0.72); }

/* tab active  burgundy pill */
.tab--active,
.tab[aria-selected="true"] {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,0.30)  0%,
      rgba(255,255,255,0.10) 49%,
      transparent            50%,
      rgba(0,0,0,0.06)       100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  border-color: rgba(80,10,30,0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(80,10,30,0.20),
    0 2px 8px rgba(100,20,40,0.24);
  color: white;
  text-shadow: 0 1px 2px rgba(60,10,20,0.45);
}

.tab--active::after,
.tab[aria-selected="true"]::after { display: none; }

.list-item--active {
  background: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.08) 49%,
      transparent 50%,
      rgba(0,0,0,0.05) 100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  color: white;
  border-color: rgba(80,10,30,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 7px rgba(100,20,40,0.22);
  text-shadow: 0 1px 2px rgba(60,10,20,0.40);
}

/* checkbox / radio  burgundy fill */
input[type="checkbox"]:checked + .checkbox-box {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 49%, transparent 50%, rgba(0,0,0,0.05) 100%),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  border-color: rgba(80,10,30,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 3px rgba(100,20,40,0.22);
}

input[type="radio"]:checked + .radio-dot {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 49%, transparent 50%),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  border-color: rgba(80,10,30,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 3px rgba(100,20,40,0.22);
}

input:checked ~ .toggle-track {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 49%, transparent 50%, rgba(0,0,0,0.05) 100%),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  border-color: rgba(80,10,30,0.40);
}

mark { background: rgba(180,50,70,0.18); color: hsl(338,80%,30%); }

blockquote {
  border-left-color: var(--blue-b);
  background: linear-gradient(90deg, rgba(180,50,70,0.07) 0%, transparent 100%);
}

.progress__fill {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.10) 49%, transparent 50%, rgba(255,255,255,0.04) 100%),
    linear-gradient(90deg, var(--blue-b), var(--blue-t));
  box-shadow: 0 0 5px rgba(160,30,55,0.35);
}

.tab--active-secondary::after { background: linear-gradient(90deg, var(--secondary-b), var(--secondary-t)); }