/* ============================================================
   Neurostars — Light theme overrides
   Sobrescreve os tokens do Tabacaria Central com uma paleta
   cinza-azul-claro inspirada na fotomicrografia do neurônio.
   ============================================================ */

:root {
  /* ---------- Surfaces (light) ---------- */
  --noir:        #C6D2E0;   /* deepest "void" — now a pale blue-slate */
  --ink:         #EAEFF4;   /* primary background — soft blue-grey   */
  --ink-2:       #FFFFFF;   /* card / panel — clean white            */
  --ink-3:       #F3F6FA;   /* hover surface                          */
  --ink-4:       #D9E2EC;   /* borders                                */

  /* ---------- Text on light surfaces ---------- */
  --marfim:      #16222F;   /* primary text (deep navy-slate)        */
  --pergaminho:  #F8FBFD;   /* "paper" — flashcard front             */
  --pergaminho-2:#EEF3F8;   /* flashcard back                         */
  --niebla:      #6B7B8F;   /* tertiary muted                         */

  /* ---------- Blues (new spine of the brand) ---------- */
  --ouro-pale:   #6FA0CC;   /* light blue accent                      */
  --ouro:        #2E6AA0;   /* primary blue (was gold)                */
  --ouro-deep:   #1A436B;   /* deep blue                              */
  --ouro-antigo: #4A82B5;   /* mid blue                               */

  /* ---------- Browns repurposed as slate-blue greys ---------- */
  --tabaco-1:    #7A8FA8;
  --tabaco-2:    #4D617A;
  --tabaco-3:    #2C3E55;
  --mogno:       #3A4F69;
  --mogno-deep:  #1E2F44;

  /* ---------- Verde no longer used; keep tokens valid ---------- */
  --verde-fundo: #3A4F69;
  --verde-mid:   #5A7390;
  --verde-claro: #4A82B5;

  /* ---------- Semantic ---------- */
  --bg:           var(--ink);
  --bg-elevated:  var(--ink-2);
  --bg-sunken:    #DEE6EF;
  --bg-paper:     var(--pergaminho);
  --bg-paper-2:   var(--pergaminho-2);

  --fg:           #16222F;
  --fg-2:         #3E4F65;
  --fg-3:         #7A8B9F;
  --fg-on-paper:  #16222F;
  --fg-on-paper-2:#3E4F65;

  --accent:       #2E6AA0;
  --accent-pale:  #4A82B5;
  --accent-deep:  #1A436B;

  --line:         rgba(46, 106, 160, 0.20);
  --line-strong:  rgba(46, 106, 160, 0.45);
  --line-paper:   rgba(22, 34, 47, 0.15);

  /* ---------- Shadows (lighter) ---------- */
  --shadow-1: 0 1px 2px rgba(22, 34, 47, 0.06);
  --shadow-2: 0 6px 18px rgba(22, 34, 47, 0.08);
  --shadow-3: 0 24px 60px -16px rgba(22, 34, 47, 0.20);
  --shadow-gold-glow: 0 0 0 1px rgba(46, 106, 160, 0.35),
                     0 0 22px rgba(46, 106, 160, 0.18);
  --shadow-inset-vignette: inset 0 0 80px rgba(22, 34, 47, 0.05);

  /* ---------- Rules ---------- */
  --rule-thin:   1px solid var(--line);
  --rule:        1px solid var(--line-strong);
  --rule-gold:   1px solid var(--accent);
  --rule-double: 3px double var(--accent);
}

/* ============================================================
   Specific patches — places that previously assumed a dark bg
   ============================================================ */

body {
  background:
    radial-gradient(120% 80% at 50% -10%,
      rgba(46, 106, 160, 0.10) 0%,
      rgba(234, 239, 244, 0) 60%),
    var(--ink) !important;
  color: var(--fg);
}

/* Topbar — frosted light */
.topbar {
  background: rgba(234, 239, 244, 0.78) !important;
  border-bottom: 1px solid var(--line);
}
.topbar--floating {
  background: rgba(234, 239, 244, 0.42) !important;
}
.topbar__name { color: var(--marfim); }
.topbar__nav a { color: var(--fg-3); }
.topbar__nav a:hover { color: var(--marfim); }
.topbar__nav a.is-active { color: var(--accent); }

/* Eyebrow / titles use accent (blue) */
.eyebrow-gold { color: var(--accent); }
.page-title { color: var(--marfim); }
.page-lead { color: var(--fg-2); }
.section-head { border-bottom: 1px solid var(--line); }
.section-head h2 { color: var(--marfim); }

/* Buttons */
.btn {
  color: var(--marfim);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.55);
}
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(46, 106, 160, 0.06);
}
.btn--primary {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}
.btn--primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #FFFFFF;
}
.btn--ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--line-strong);
  color: var(--marfim);
  background: rgba(46, 106, 160, 0.04);
}

/* Inputs */
.input, .textarea {
  background: #FFFFFF;
  color: var(--marfim);
  border: 1px solid var(--line);
}
.input:focus, .textarea:focus {
  border-color: var(--accent);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(46, 106, 160, 0.08);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }

/* Cards */
.deck-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.deck-card:hover {
  border-color: var(--accent);
  background: #FFFFFF;
  box-shadow: var(--shadow-2);
}
.deck-card__title { color: var(--marfim); }
.deck-card__desc  { color: var(--fg-3); }
.deck-card__count { color: var(--accent); }
.deck-card__foot {
  border-top: 1px solid var(--line);
  color: var(--fg-3);
}
.deck-card__foot .go { color: var(--accent); }
.deck-card--new { color: var(--fg-3); border-style: dashed; background: rgba(255,255,255,0.5); }
.deck-card--new:hover { color: var(--accent); border-color: var(--accent); }
.deck-card--new .plus { color: var(--accent); }

/* Toast */
.toast {
  background: var(--marfim);
  color: #FFFFFF;
  border: 1px solid var(--accent);
}

/* ============================================================
   LANDING — light treatment
   ============================================================ */
.landing { background: var(--ink); }
.landing__title { color: var(--marfim); }
.landing__title .star { color: var(--accent); }
.landing__script { color: var(--accent-pale); }
.landing__lead { color: var(--fg-2); }
.landing__rule {
  background: linear-gradient(90deg, var(--accent), transparent);
}
.landing__eyebrow { color: var(--accent); }
.landing__eyebrow::before { background: var(--accent); }
.landing__meta { color: var(--fg-3); }
.landing__meta .dot { background: var(--accent); }

.landing__art { background: #E8F1FA; }
.landing__art::before {
  /* inner frame line */
  border-color: rgba(46, 106, 160, 0.30);
}
.landing__art::after {
  /* MUCH softer vignette — the image is already light */
  background:
    radial-gradient(110% 80% at 50% 50%, transparent 50%, rgba(22, 34, 47, 0.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(22, 34, 47, 0.04));
}
.landing__art img {
  /* drop the screen blend; use natural color */
  mix-blend-mode: normal;
  filter: contrast(1.02) saturate(1.05);
  opacity: 1;
}
.landing__art-tag {
  color: var(--accent);
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
.landing__art-tag .lat {
  color: var(--marfim);
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

/* ============================================================
   HOME — light path cards
   ============================================================ */
.home-hero h1 { color: var(--marfim); }
.home-hero p { color: var(--fg-2); }
.ornament-row { color: var(--accent); }
.ornament-row::before { background: linear-gradient(90deg, transparent, var(--accent)); }
.ornament-row::after  { background: linear-gradient(90deg, var(--accent), transparent); }

.path-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.path-card:hover {
  border-color: var(--accent);
  background: #FFFFFF;
  box-shadow: var(--shadow-2);
}
.path-card::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.path-card__num { color: var(--accent); }
.path-card__glyph { color: var(--accent); }
.path-card__title { color: var(--marfim); }
.path-card__desc  { color: var(--fg-3); }
.path-card__cta   { color: var(--accent); }

/* ============================================================
   STUDY — flashcard on light theme
   ============================================================ */
.study__deckname { color: var(--marfim); }
.study__counter  { color: var(--accent); }
.study__progress { background: var(--ink-4); }
.study__progress-bar { background: var(--accent); }

.flashcard__face {
  background: #FFFFFF;
  color: var(--marfim);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 24px 50px -12px rgba(22, 34, 47, 0.18),
    0 6px 16px rgba(22, 34, 47, 0.08);
  background-image: none;
}
.flashcard__face--back {
  background: #F4F8FC;
  background-image: none;
}
.flashcard__face::before {
  border: 1px solid rgba(46, 106, 160, 0.18);
}
.flashcard__tag { color: var(--accent); opacity: 1; }
.flashcard__tag::before, .flashcard__tag::after {
  color: var(--accent-pale);
}
.flashcard__content { color: var(--marfim); }
.flashcard__face--back .flashcard__content { color: var(--tabaco-3); }
.flashcard__footnum { color: var(--accent-pale); opacity: 0.8; }

.study__nav-btn {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  color: var(--fg-2);
}
.study__nav-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.study__flip-btn {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(46, 106, 160, 0.25);
}
.study__flip-btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.study__done h2 { color: var(--marfim); }
.study__done p { color: var(--fg-2); }
.study__done .glyph { color: var(--accent); }

/* ============================================================
   CREATE / EDIT — light card editor
   ============================================================ */
.card-editor {
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.card-editor__num { color: var(--accent); }
.field__label { color: var(--fg-3); }

/* ============================================================
   IMPORT — light dropzone
   ============================================================ */
.dropzone {
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed var(--line-strong);
}
.dropzone.is-drag {
  border-color: var(--accent);
  background: rgba(46, 106, 160, 0.04);
}
.dropzone__glyph { color: var(--accent); }
.dropzone__title { color: var(--marfim); }
.dropzone__desc  { color: var(--fg-3); }

.import-result {
  background: #FFFFFF;
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-2);
}
.import-result h3 { color: var(--accent); }
.import-result p  { color: var(--fg-2); }

.import-error {
  background: rgba(200, 50, 50, 0.06);
  border: 1px solid rgba(200, 50, 50, 0.4);
  color: #B22A2A;
}

/* Empty states */
.empty { color: var(--fg-3); }
.empty .glyph { color: var(--accent); }

/* ============================================================
   MOBILE MENU — light theme
   ============================================================ */
.mobile-overlay { background: rgba(22, 34, 47, 0.45); }
.mobile-menu {
  background: #FFFFFF;
  border-left: 1px solid var(--line);
}
.mobile-menu__brand-name { color: var(--marfim); }
.mobile-menu__link { color: var(--fg-2); border-bottom-color: var(--line); }
.mobile-menu__link:hover { color: var(--accent); background: var(--ink-3); }
.mobile-menu__link.is-active { color: var(--accent); }
.mobile-menu__arrow { color: var(--accent); }
.topbar__hamburger span { background: var(--marfim); }

/* ============================================================
   SHUFFLE TOGGLE — light theme
   ============================================================ */
.shuffle-toggle {
  border-color: var(--line);
  color: var(--fg-3);
  background: rgba(255, 255, 255, 0.6);
}
.shuffle-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.shuffle-toggle.is-on {
  background: rgba(46, 106, 160, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   DIFFICULTY BUTTONS — light theme
   ============================================================ */
.difficulty-btn--hard {
  background: rgba(200, 50, 80, 0.07);
  border-color: rgba(200, 50, 80, 0.4);
  color: #C03250;
}
.difficulty-btn--hard:hover {
  background: rgba(200, 50, 80, 0.14);
  border-color: #C03250;
  color: #A0203A;
}
.difficulty-btn--good {
  background: rgba(46, 106, 160, 0.07);
  border-color: rgba(46, 106, 160, 0.35);
  color: var(--accent);
}
.difficulty-btn--good:hover {
  background: rgba(46, 106, 160, 0.13);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.difficulty-btn--easy {
  background: rgba(30, 120, 70, 0.07);
  border-color: rgba(30, 120, 70, 0.35);
  color: #1E7846;
}
.difficulty-btn--easy:hover {
  background: rgba(30, 120, 70, 0.13);
  border-color: #1E7846;
  color: #165830;
}

/* ============================================================
   SESSION STATS DONE SCREEN — light theme
   ============================================================ */
.study__done-stat--hard {
  background: rgba(200, 50, 80, 0.06);
  border-color: rgba(200, 50, 80, 0.3);
  color: #C03250;
}
.study__done-stat--good {
  background: rgba(46, 106, 160, 0.06);
  border-color: rgba(46, 106, 160, 0.3);
  color: var(--accent);
}
.study__done-stat--easy {
  background: rgba(30, 120, 70, 0.06);
  border-color: rgba(30, 120, 70, 0.3);
  color: #1E7846;
}

/* ============================================================
   RATING BADGE — light theme
   ============================================================ */
.flashcard__rating-badge--hard  { color: #C03250; }
.flashcard__rating-badge--good  { color: var(--accent); }
.flashcard__rating-badge--easy  { color: #1E7846; }

/* ============================================================
   CARD IMAGE SECTION — light theme
   ============================================================ */
.card-img-add {
  border-color: var(--line-strong);
  color: var(--fg-3);
}
.card-img-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.card-img-thumb { border-color: var(--line); }
.card-img-remove {
  border-color: rgba(200, 50, 80, 0.3);
  color: #C03250;
}
.card-img-remove:hover {
  background: rgba(200, 50, 80, 0.08);
  border-color: #C03250;
}

/* ============================================================
   SESSION BAR — light theme
   ============================================================ */
.session-bar {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--line);
}
.session-bar__id {
  color: var(--accent);
  background: rgba(46, 106, 160, 0.08);
  border-color: rgba(46, 106, 160, 0.25);
}
.session-bar__reset {
  border-color: rgba(200, 50, 80, 0.3);
  color: #C03250;
}
.session-bar__reset:hover {
  background: rgba(200, 50, 80, 0.08);
  border-color: #C03250;
}