/* ============================================================
   Geo Pattern — CSS
   Bauhaus-style geometric pattern generator
   ============================================================ */

/* --- Theme: integrates with Carbon Design System --- */
/* Dark theme (g100) — fallback when no custom colors via data attrs */
html.cds--g100 .geo-container {
  --geo-bg: var(--cds-field, #1a1a2e);
  --geo-color1: var(--cds-link-text-color, #e85d26);
  --geo-color2: var(--app-text-foreground, #f0e68c);
  --geo-color3: var(--cds-link-text-color, #e85d26);
}

/* Light theme (g10) */
html.cds--g10 .geo-container {
  --geo-bg: var(--cds-field, #f5f5f0);
  --geo-color1: var(--cds-link-text-color, #e85d26);
  --geo-color2: var(--app-text-foreground, #1a1a1a);
  --geo-color3: var(--cds-link-text-color, #e85d26);
}

/* --- Container --- */
.geo-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--geo-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Grid wrapper (centered inside container) --- */
.geo-grid {
  display: grid;
  gap: 0;
}

/* --- Cell --- */
.geo-cell {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   Shape primitives
   ============================================================ */

/* Full square — fills the entire cell */
.geo-shape-square {
  width: 100%;
  height: 100%;
  background: var(--geo-color);
}

/* Full circle */
.geo-shape-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--geo-color);
}

/* Semicircle — default points UP (flat bottom).
   Rotate via inline transform for other orientations. */
.geo-shape-semi {
  width: 100%;
  height: 50%;
  background: var(--geo-color);
  border-radius: 9999px 9999px 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: center bottom;
}

/* We use a wrapper so rotation keeps it inside the cell */
.geo-shape-semi-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Quarter circle — default: top-left corner filled. */
.geo-shape-quarter {
  width: 100%;
  height: 100%;
  background: var(--geo-color);
  border-radius: 0 0 100% 0;
}

/* ============================================================
   Concentric overlay
   ============================================================ */

.geo-concentric {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-concentric-ring {
  position: absolute;
  border: 1.5px solid var(--geo-color2);
  box-sizing: border-box;
}

.geo-concentric-ring.is-circle {
  border-radius: 50%;
}