/*======================================================================
  ColorADD — Full stylesheet (drop-in) for a truly colour-blind-friendly
  theme.  Includes:
  • Variable override (keeps your existing CSS intact)
  • Header / UI adjustments
  • Official pictogram utilities (.c-red, .c-green, …)
  • Screen-reader labels & contrast fixes
======================================================================*/

/*──────────────────────────────────────────────────────────────────────
  1  TOKENS — override only variables (light palette)
  ─────────────────────────────────────────────────────────────────────*/
body[data-tema="coloradd"]{
  /* global */
  --bg:            #ffffff;
  --bg-color:      #ffffff;
  --text-color:    #000000;

  /* highlight (ColorADD “▲” red) */
  --accent:        #c0392b;
  --accent-dk:     #a02e22;
  --light-accent:  #fff4e1;          /* subtle cards */

  /* links / buttons / borders */
  --link-color:    var(--accent);
  --button-bg:     var(--accent);
  --button-text:   #ffffff;
  --border-color:  #444;

  /* header / footer */
  --header-bg:     #ffffff;
  --footer-bg:     #fffbea;
  --footer-text:   #000000;

  /* shadows */
  --shadow:        0 4px 14px rgba(0,0,0,.10);
  --shadow-hov:    0 8px 28px rgba(0,0,0,.15);
}

/*──────────────────────────────────────────────────────────────────────
  2  HEADER (dashed underline + high-contrast links)
  ─────────────────────────────────────────────────────────────────────*/
body[data-tema="coloradd"] .topo{
  background:var(--header-bg);
  border-bottom:4px dashed var(--accent);
  box-shadow:none;
}
body[data-tema="coloradd"] .topo::after{display:none}         /* remove gradient */
body[data-tema="coloradd"] .logo a,
body[data-tema="coloradd"] .menu a{color:#000;font-weight:600}
body[data-tema="coloradd"] .menu a:hover{color:var(--accent)}

/*──────────────────────────────────────────────────────────────────────
  3  THEME-SWITCH ICONS (display official glyph stored in data-symbol)
  ─────────────────────────────────────────────────────────────────────*/
body[data-tema="coloradd"] .modos-icones button{
  background:#fff;color:#000;border:2px dashed #000;
  width:38px;height:38px;border-radius:50%;font-size:1.25rem;
  position:relative;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .25s,transform .25s;
}
body[data-tema="coloradd"] .modos-icones button::after{
  /* pictogram passed from HTML e.g. data-symbol="▲" */
  content:attr(data-symbol);
  position:absolute;top:4px;right:7px;font-weight:700;font-size:13px;
}
body[data-tema="coloradd"] .modos-icones button:hover{
  background:#f39c12;color:#000;transform:scale(1.1);
}
body[data-tema="coloradd"] .modos-icones button:focus{
  outline:3px dashed #444;outline-offset:2px;
}

/*──────────────────────────────────────────────────────────────────────
  4  BLOCKS WITH OWN BACKGROUND
  ─────────────────────────────────────────────────────────────────────*/
body[data-tema="coloradd"] .dupla-face .designer{background:#fff4e1;color:#000}
body[data-tema="coloradd"] .dupla-face .coder   {background:#f9f9f9;color:#000}
body[data-tema="coloradd"] .centro-imagem .frase,
body[data-tema="coloradd"] .lado{color:#000}

/* cards / resumos */
body[data-tema="coloradd"] .card,
body[data-tema="coloradd"] .resumo-bloco{
  background:#fefefe;color:#111;border:2px dashed #444;
}

/* buttons */
body[data-tema="coloradd"] .btn,
body[data-tema="coloradd"] .btn-mini{
  background:var(--button-bg);color:var(--button-text);font-weight:700;
}
body[data-tema="coloradd"] .btn:hover,
body[data-tema="coloradd"] .btn-mini:hover{
  background:#f39c12;color:#000;
}

/* footer */
body[data-tema="coloradd"] .rodape{
  background:var(--footer-bg);color:var(--footer-text);
  border-top:4px dashed var(--accent);box-shadow:none;
}
body[data-tema="coloradd"] .icones-sociais a{color:#111}
body[data-tema="coloradd"] .icones-sociais a:hover{color:var(--accent)}

/*──────────────────────────────────────────────────────────────────────
  5  SCREEN-READER-ONLY HELPER
  ─────────────────────────────────────────────────────────────────────*/
.sr-only{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/*──────────────────────────────────────────────────────────────────────
  6  COLORADD  GLYPH UTILITIES  (.c-red, .c-green, …)
  ─────────────────────────────────────────────────────────────────────*/
[class^="c-"]::after,
[class*=" c-"]::after{
  font-family:"Arial",sans-serif;font-weight:700;margin-left:.35em;
  color:#000;                                   /* flips in dark-mode */
}

/* primárias */
.c-red::after    {content:"▲";}   /* Red  */
.c-blue::after   {content:"▼";}   /* Blue */
.c-yellow::after {content:"／";}  /* Yellow */

/* secundárias / mistas */
.c-orange::after {content:"▲／";} /* Orange  */
.c-green::after  {content:"▼／";} /* Green   */
.c-purple::after {content:"▲▼";} /* Purple  */

/* neutros */
.c-black::after  {content:"■";}
.c-white::after  {content:"□";}

/* dark-mode → símbolo branco para contraste */
@media(prefers-color-scheme:dark){
  [class^="c-"]::after,
  [class*=" c-"]::after{color:#fff}
}

/* optional outline for low-vision focus */
[class^="c-"],[class*=" c-"]{outline:2px dashed transparent;outline-offset:2px}
[class^="c-"]:focus-visible,[class*=" c-"]:focus-visible{outline-color:#555}

/*──────────────────────────────────────────────────────────────────────
  7  EXAMPLE LEGEND  (if you keep a colour key on the page)
  ─────────────────────────────────────────────────────────────────────*/
.legenda-cores{font-size:14px;margin-top:20px}
.legenda-cores .cor{
  display:inline-block;width:22px;height:22px;border:1px solid #ccc;
  vertical-align:middle;margin-right:6px;position:relative;
}
.legenda-cores .cor::after{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#000;
}

/* background swatches + glyph overlay */
.legenda-cores .red   {background:#d32f2f}.red::after   {content:"▲"}
.legenda-cores .blue  {background:#1976d2}.blue::after  {content:"▼"}
.legenda-cores .yellow{background:#fdd835}.yellow::after{content:"／"}
.legenda-cores .green {background:#388e3c}.green::after {content:"▼／"}
.legenda-cores .orange{background:#f57c00}.orange::after{content:"▲／"}
.legenda-cores .purple{background:#7b1fa2}.purple::after{content:"▲▼"}
.legenda-cores .black {background:#000}.black::after    {content:"■";color:#fff}
.legenda-cores .white {background:#fff}.white::after    {content:"□";color:#000}

/*──────────────────────────────────────────────────────────────────────
  8  Dark-mode tokens (if user’s OS is dark)
  ─────────────────────────────────────────────────────────────────────*/
@media(prefers-color-scheme:dark){
  body[data-tema="coloradd"]{
    --bg:#111;--bg-color:#111;--text-color:#f1f1f1;
    --header-bg:#222;--footer-bg:#222;--footer-text:#e1e1e1;
    --light-accent:#1e1e1e;
    --shadow:0 4px 14px rgba(0,0,0,.55);
  }
  body[data-tema="coloradd"] .card,
  body[data-tema="coloradd"] .resumo-bloco{
    background:#1a1a1a;border-color:#555;color:#eaeaea;
  }
  body[data-tema="coloradd"] .modos-icones button{
    background:#222;color:#eaeaea;border-color:#eaeaea;
  }
}

/*──────────────────────────────────────────────────────────────────────
  9  Responsiveness
  ─────────────────────────────────────────────────────────────────────*/
@media(max-width:768px){
  body[data-tema="coloradd"] .header-flex{flex-direction:column;text-align:center}
  body[data-tema="coloradd"] .menu ul{flex-direction:column;gap:1rem;margin-top:.8rem}
  body[data-tema="coloradd"] .dupla-face{flex-direction:column;text-align:center}
  body[data-tema="coloradd"] .resumos{grid-template-columns:1fr}
}