@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700&family=Quicksand:wght@500;700&display=swap");

:root[data-theme="infantil"]{
  color-scheme: dark;

  --ink:      #2B1E3D;
  --panel:    #3A2A56;
  --paper:    #FFF6E5;
  --paper-dim:#F5DFB8;
  --muted:    #B9A6D6;
  --red-ink:  #E23B6B;
  --gold-ink: #FF8A3D;
  --extra-ink:#2FA88C;
  --line:     #4E3A70;
  --canvas-grid-line: var(--bg-panel);
  --font-ui:  "Baloo 2", "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-type:"Baloo 2", "Quicksand", var(--font-ui);

  --text-size: 26px;
  --height: 28px;
  --line-height: var(--height);

  --tile-radius: 7px;

  --effect-3d: 1;

  --tile-locked: #6B4F94;
  --tile-active: #FF8A3D;
  --tile-text:   #FFF6E5;

  --bg:        var(--ink);
  --bg-panel:  var(--panel);
  --text:      var(--paper);
  --border:    var(--line);
  --canvas-bg: #241831;

  --bg-gradient: var(--bg);

  --accent-ink: #FFB25E;
  --online-ink: #35C29A;
  --found-bg: rgba(255,138,61,0.14);
  --card-shadow: 0 2px 6px rgba(20,10,30,.4);
  --card-shadow-hover: 0 4px 14px rgba(20,10,30,.5);
  --badge-shadow: 0 1px 2px rgba(20,10,30,.35);
  --log-divider: var(--muted);
  --log-divider-width: 1px;
  --log-divider-style: solid;

  --modal-bg:          #3A2A56;
  --modal-ink:         var(--paper);
  --modal-muted:       #D8C7F0;
  --modal-hint:        #B9A6D6;
  --modal-accent:      var(--gold-ink);
  --modal-accent-text: #2B1E3D;
}

:root[data-theme="infantil"].day-mode{
  color-scheme: light;

  --bg:        #FFF9EE;
  --bg-panel:  #FFE9C7;
  --text:      #2B1E3D;
  --border:    #FFB25E;
  --canvas-bg: #FFF1D6;

  --bg-gradient: var(--bg);

  --tile-locked: #F6D9A8;
  --tile-active: var(--gold-ink);

  --line:      #F0C88A;
  --canvas-grid-line: #F0C88A;
  --tile-text: #2B1E3D;

  --muted:        #8C6FAE;
  --accent-ink:   #D9660A;
  --online-ink:   #159873;
  --card-shadow: 0 2px 5px rgba(160,90,20,.18);
  --card-shadow-hover: 0 4px 12px rgba(160,90,20,.24);
  --badge-shadow: 0 1px 2px rgba(160,90,20,.14);
  --extra-ink:    #1C8A73;
  --repeated-ink: #A6853F;
  --log-divider:  var(--muted);

  /* Mesma identidade das peças que caem no Letris (--tile-active/--gold-ink,
     #FF8A3D — igual em noite e dia). --found-bg herdado da noite usava essa
     cor a 14%, opacidade baixa demais pra aparecer contra o painel de dia
     (#FFE9C7), que é um pêssego da mesma família de matiz do laranja —
     precisa de mais opacidade, não de trocar de cor, pra destacar a palavra
     achada sem perder a identidade visual da peça. */
  --found-bg: rgba(255,138,61,0.35);

  --modal-bg:          #FFF6E5;
  --modal-ink:         #2B1E3D;
  --modal-muted:       #7A5C9E;
  --modal-hint:        #A98CC7;
  --modal-accent:      var(--accent-ink);
  --modal-accent-text: #FFF6E5;
}
