/* ============================================================
   DRE GLOBAL ELEMENTS — DISCS + ARROWS
   Scope:
   - Visual rendering only
   - No layout
   - No behaviour
   - No semantic content
============================================================ */

:root{
  /* =========================
     NUMBER DISCS (default)
  ========================= */
  --dre-disc-size: 28px;
  --dre-disc-color: #18A5DD;

  /* =========================
     LETTER DISCS
  ========================= */
  --dre-letter-disc-size: 22px;
  --dre-letter-disc-color: #9AA0A8;

  /* =========================
     Shared geometry
  ========================= */
  --dre-disc-border: 2px;
  --dre-disc-radius: 999px;

  /* Typography */
  --dre-disc-font-weight: 800;
  --dre-disc-font-size: 0.95rem;

  /* Arrow typography */
  --dre-arrow-size: 1.1rem;

  /* Feedback colours */
  --dre-green: #3ebe4e;
  --dre-grey: #4F535D;
  --dre-white: #ffffff;
  --dre-blue: #18A5DD;
}



/* ============================================================
   DISC BASE (NUMBER + LETTER)
============================================================ */
.dre-disc-number::before,
.dre-disc-letter::before{
  display:flex;
  align-items:center;
  justify-content:center;

  width:var(--dre-disc-size);
  height:var(--dre-disc-size);

  border-radius:var(--dre-disc-radius);
  border:var(--dre-disc-border) solid currentColor;

  background:var(--dre-white);
  color:var(--dre-disc-color);

  font-weight:var(--dre-disc-font-weight);
  font-size:var(--dre-disc-font-size);
  line-height:1;

  user-select:none;
  pointer-events:none;
}

/* ============================================================
  NUMBER DISC POSITIONING
============================================================ */
.dre-disc-number{
  display:inline-flex;
  width:var(--dre-disc-size);
  height:var(--dre-disc-size);
  align-items:center;
  justify-content:center;
}


/* ============================================================
   DISC FEEDBACK APPEARANCE (NO CONTENT)
============================================================ */
.dre-disc--correct::before{
  border-color:var(--dre-green);
  color:var(--dre-green);
}

.dre-disc--incorrect::before{
  border-color:var(--dre-grey);
  color:var(--dre-grey);
}

/* ============================================================
   TICKS AND CROSSES
============================================================ */
.dre-disc-letter.dre-disc--correct::before{
  content: "✓";
  font-weight: 900;
}

.dre-disc-letter.dre-disc--incorrect::before{
  content: "✕";
  font-weight: 900;
}

/* ============================================================
   DISC OVERRIDE
============================================================ */
.dre-disc-letter{
  --dre-disc-size: var(--dre-letter-disc-size);
  --dre-disc-color: var(--dre-letter-disc-color);
}
/* ============================================================
   ARROWS (GLYPH ONLY)
============================================================ */
.dre-arrow{
  font-size:var(--dre-arrow-size);
  color:var(--dre-grey);
  line-height:1;
  user-select:none;
}

/* Disabled appearance (state applied by component JS) */
.dre-arrow.is-disabled{
  opacity:0.5;
}

/* ============================================================
   RESPONSIVE TOKEN ADJUSTMENT (GLOBAL)
============================================================ */
@media (max-width:640px){
  :root{
    --dre-disc-size:24px;
    --dre-disc-font-size:0.9rem;
  }
}