/* ============================================================
   OpenDSA: Reading — Product Theme
   Identità: accessibile, luminosa, gamificata, motivazionale
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root[data-product="opendsa"] {
  --color-base: #f6fbff;
  --color-surface: #ffffff;
  --color-elevated: #ffffff;
  --color-text: #172033;
  --color-text-muted: #526173;
  --color-border: #dbeafe;
  --color-accent: #2196f3;
  --color-accent-strong: #1565c0;
  --color-accent-soft: rgba(33, 150, 243, .13);
  --color-accent-shadow: rgba(33, 150, 243, .30);
  --color-on-accent: #ffffff;
  --color-band: linear-gradient(135deg, #eaf6ff, #fff8d8);
  --color-band-text: #172033;
  --font-ui: "Open Sans", Inter, system-ui, sans-serif;
}

/* Override per font più leggibile / accessibile */
[data-product="opendsa"] body {
  font-family: var(--font-ui);
  letter-spacing: .01em;
}

[data-product="opendsa"] .hero {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(76,175,80,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,215,0,.06) 0%, transparent 50%),
    var(--color-base);
}

[data-product="opendsa"] .hero-title {
  background: linear-gradient(135deg, #1565c0, #2196f3, #4caf50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mock window con accento educativo */
[data-product="opendsa"] .mock-toolbar span:nth-child(1) { background: #e57373; }
[data-product="opendsa"] .mock-toolbar span:nth-child(2) { background: #ffd54f; }
[data-product="opendsa"] .mock-toolbar span:nth-child(3) { background: #81c784; }

[data-product="opendsa"] .mock-bars i:nth-child(1) { background: rgba(33,150,243,.18); }
[data-product="opendsa"] .mock-bars i:nth-child(2) { background: rgba(76,175,80,.15); width: 55%; }
[data-product="opendsa"] .mock-bars i:nth-child(3) { background: rgba(255,215,0,.20); width: 70%; }

/* Slide con bordo luminoso */
[data-product="opendsa"] .slide-card.is-active {
  border-color: rgba(33,150,243,.18);
}
[data-product="opendsa"] .slide-title {
  color: var(--color-accent-strong);
}

/* Feature card hover glow */
[data-product="opendsa"] .feature-card:hover {
  border-color: rgba(33,150,243,.2);
  box-shadow: 0 12px 38px rgba(33,150,243,.12);
}

/* Uzero band con sfondo caldo */
[data-product="opendsa"] .uzero-band {
  background: linear-gradient(135deg, #eaf6ff 0%, #fff8d8 100%);
  color: #172033;
  border-color: #dbeafe;
}

/* Badge colori tematici */
[data-product="opendsa"] .badge {
  border-color: #dbeafe;
  background: rgba(33,150,243,.06);
  color: #1565c0;
}

/* Open card sfumatura */
[data-product="opendsa"] .open-card {
  background: linear-gradient(180deg, #f0f9ff, #ffffff);
  border-color: #dbeafe;
}

/* Problem card */
[data-product="opendsa"] .problem-card {
  background: linear-gradient(180deg, #fffde7, #ffffff);
  border-color: #fff8d8;
}