/* Light Mode (Explicit) */
html.light {
  --bg: #fdfdfd;
  --text-primary: rgba(13, 15, 16, 0.85);
  --text-secondary: rgba(13, 15, 16, 0.4);
  --text-tertiary: rgba(13, 15, 16, 0.24);
  --border: rgba(13, 15, 16, 0.1);
  --selection: rgba(13, 15, 16, 0.08);
  --code-bg: rgba(13, 15, 16, 0.04);
  --mark: #f3ffc4;

  --slider-thumb: #0D0F10;
  --slider-track: #c8c8c8;
  --slider-thumb-hover: #323232;
}

/* Dark Mode (Explicit) */
html.dark {
  --bg: #0D0F10;
  --text-primary: rgba(253, 253, 253, 0.9);
  --text-secondary: rgba(253, 253, 253, 0.4);
  --text-tertiary: rgba(253, 253, 253, 0.24);
  --border: rgba(253, 253, 253, 0.1);
  --selection: rgba(253, 253, 253, 0.08);
  --code-bg: rgba(253, 253, 253, 0.04);
  --mark: #545b37;

  --slider-thumb: #fdfdfd;
  --slider-track: #3c3c3c;
  --slider-thumb-hover: #aeaeae;
}


html, body {
  --grey-100: #FAFAFA;
  --grey-200: #E1E1E1;
  --grey-300: #C8C8C8;
  --grey-400: #AFAFAF;
  --grey-500: #969696;
  --grey-600: #7D7D7D;
  --grey-700: #646464;
  --grey-800: #4B4B4B;
  --grey-900: #323232;
  --grey-1000: #1A1A1A;

  --blue-100: #F5FCFF;
  --blue-200: #C4EDFE;
  --blue-300: #93DFFD;
  --blue-400: #62D0FC;
  --blue-500: #32C2FB;
  --blue-600: #05B1F5;
  --blue-700: #048EC5;
  --blue-800: #036B94;
  --blue-900: #024763;
  --blue-1000: #012432;

  --char-100: #FCFEF5;
  --char-200: #F0FBC7;
  --char-300: #E3F898;
  --char-400: #D7F569;
  --char-500: #CAF23A;
  --char-600: #BCEB0F;
  --char-700: #96BD0C;
  --char-800: #718E09;
  --char-900: #4C5F06;
  --char-1000: #263003;

  --red-100: #FFF5F8;
  --red-200: #FCC6D4;
  --red-300: #FA96B1;
  --red-400: #F8668D;
  --red-500: #F6376A;
  --red-600: #EF0B48;
  --red-700: #C0093A;
  --red-800: #90072B;
  --red-900: #60051D;
  --red-1000: #31020F;

  --turq-100: #F5FFFE;
  --turq-200: #C4FEF8;
  --turq-300: #93FDF2;
  --turq-400: #62FCEC;
  --turq-500: #32FBE7;
  --turq-600: #05F5DD;
  --turq-700: #04C5B1;
  --turq-800: #039485;
  --turq-900: #026359;
  --turq-1000: #01322D;

  --brand-blue: var(--blue-600);
  --brand-char: var(--char-500);
  --brand-red:  var(--red-600);
  --brand-turq: var(--turq-600);


  margin: 0;
  padding: 0;
  font-family: inter-variabe, sans-serif;
  
  color: var(--text-primary);
  background-color: var(--bg);

  --font-size-s: 0.8125rem;
  --font-size-m: 0.9375rem;
  --font-size-l: 1.0625rem;

  --font-weight-light: 350;
  --font-weight-regular: 400;
  --font-weight-bold: 500;


  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular)
}




* {
  box-sizing: border-box;
}


/* Mobile-first: Stack vertically */
.soopergrid-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

h1 {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
}

.sec-desc {
  font-style: italic;
  font-size: 0.8em;
  color: var(--text-secondary);
  margin-top:0.25rem;
}


/* UI CONTROLS ------------------------------------------------------------- */
/* Mobile-first: Full width */
#ui {
  width: 100%;
  max-width: 600px;
  padding: 1rem;
  margin: 0;
}

.grid-logo {
  margin-left: 0.75rem;
  max-width: 180px;
  height: auto;
}

/* Logo bar with theme toggle */
.logo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.logo-bar .btn-sm {
  width: auto;
}

.ui-controls {
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

#artboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  padding: 1rem;
  order: -1; /* Artboard appears first on mobile */
}

#canvasWrapper {
  width: 100%;
  max-width: 90vw;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#canvasWrapper canvas {
  max-width: 100%;
  height: auto !important;
}

.input-element {
  padding: 0.5rem 0;
}

.input-element-switches {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}


.input-element-sep {
  padding-top: 0.0125rem;
  padding-bottom: 0.25rem;
  text-align: center;
  font-style: italic;
  color: var(--text-secondary);
}

/* SLIDER ------------------------------------------------------------------ */
input[type=range].slider {
  width: 240px;
  margin: 1rem 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range].slider:focus {
  outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
  background: var(--slider-track);
  border: 0px solid rgba(0, 0, 0, 0);
  border: 0;
  width: 100%;
  height: 10px;
  cursor: pointer;
}
input[type=range].slider::-webkit-slider-thumb {
  margin-top: -7px;
  width: 24px;
  height: 24px;
  background: var(--slider-thumb);
  border: 0px solid rgba(0, 0, 0, 0);
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
  background: var(--slider-track);
}
input[type=range].slider::-moz-range-track {
  background: var(--slider-track);
  border: 0px solid rgba(0, 0, 0, 0);
  border: 0;
  width: 100%;
  height: 10px;
  cursor: pointer;
}
input[type=range].slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--slider-thumb);
  border: 0px solid rgba(0, 0, 0, 0);
  border: 0;
  cursor: pointer;
}
input[type=range].slider::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 12px 0;
  color: transparent;
  width: 100%;
  height: 10px;
  cursor: pointer;
}
input[type=range].slider::-ms-fill-lower {
  background: var(--slider-track);
  border: 0px solid rgba(0, 0, 0, 0);
  border: 0;
}
input[type=range].slider::-ms-fill-upper {
  background: var(--slider-track);
  border: 0px solid rgba(0, 0, 0, 0);
  border: 0;
}
input[type=range].slider::-ms-thumb {
  width: 24px;
  height: 24px;
  background: var(--slider-thumb);
  border: 0px solid rgba(0, 0, 0, 0);
  border: 0;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range].slider:focus::-ms-fill-lower {
  background: var(--slider-track);
}
input[type=range].slider:focus::-ms-fill-upper {
  background: var(--slider-track);
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the vertical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range].slider {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}


/* Add hover effects to slider thumbs */
input[type=range].slider:hover::-webkit-slider-thumb {
  background: var(--slider-thumb-hover);
  /* opacity: 0.8; */
}

input[type=range].slider:hover::-moz-range-thumb {
  background: var(--slider-thumb-hover);
  /* opacity: 0.8; */
}

input[type=range].slider:hover::-ms-thumb {
  background: var(--slider-thumb-hover);
  /* opacity: 0.8; */
}

/* Optional: Also add hover effect to the track */
/* input[type=range].slider:hover::-webkit-slider-runnable-track {
  background: var(--grey-400);
}

input[type=range].slider:hover::-moz-range-track {
  background: var(--grey-400);
} */

input[type=range].slider:hover::-ms-fill-lower,
input[type=range].slider:hover::-ms-fill-upper {
  background: var(--grey-400);
}

/* END SLIDER -------------------------------------------------------------- */


/* #recurseVal, #cellPadVal {
  width: 40px;
} */

button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  height: 1.5rem;
  width: 100%;
  border-radius: 0;
  font-size: 0.75rem;
  border: none;
  margin-bottom: 0.5rem;
}

/* Light mode: black buttons with white text/icons */
html.light button {
  background-color: var(--grey-1000);
  color: var(--grey-100);
}

html.light button:hover {
  background-color: var(--red-700);
  cursor: pointer;
}

/* Dark mode: white buttons with black text/icons */
html.dark button {
  background-color: var(--grey-100);
  color: var(--grey-1000);
  border: 1px solid var(--border);
}

html.dark button:hover {
  background-color: var(--red-700);
  cursor: pointer;
}

details summary {
  cursor: pointer;
}
details {
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

#recurseAmtWrapper, #padAmtWrapper, #numClrsAmtWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#recurseVal, #rngNumColorsVal, #cellPadVal {
  width: 2rem;
  height: 1.5rem;
  margin-left: 1.5rem;
  color: var(--primary-text);
  background-color: var(--bg);
}

#recurseVal, #cellPadVal, #rngNumColorsVal {
  border: 0;
  font-size: 1rem;
  font-weight: bold;
}

summary {
  display: flex;
  list-style: none;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem;
  font-family: figtree, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  padding-left: 0.5rem;
  background-color: var(--border);
  color: var(--text-primary);
  width: 100%;
}

summary::after {
  content: "▶"; /* Default icon for collapsed state (e.g., right-pointing triangle) */
  margin-right: 0.5rem;
  transition: transform 0.4s ease-in-out; /* Smooth transition for rotation */
}

details[open] summary::after {
  content: "▼"; /* Icon for expanded state (e.g., down-pointing triangle) */
}

input[type="text"] {
  /* background-color: var(--grey-200); */
  color: var(--grey-1000);
  border-radius: 0;
  margin-bottom: 0.5rem;
}

.canvas-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.canvas-actions button {
  width:auto;
  font-weight: bold;
}

.download-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: no-wrap;
}

.download-actions * {
  margin-right: 0;
}

.seed-display {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 0.5rem;
}

.seed-display label {
  font-size: 0.875rem;
  color: var(--grey-800);
  white-space: nowrap;
}

.seed-display input {
  font-size: .9rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--grey-400);
  border-radius: 4px;
  background-color: var(--grey-100);
  color: var(--grey-900);
  width: 7.5rem;
  text-align: center;
  cursor: pointer;
}

.seed-display input:focus {
  outline: 2px solid var(--blue-600);
  outline-offset: 1px;
}


.inset-btn {
  margin-right: 0.5rem;
  display: block;
  justify-content: center;
  align-items: center;
}


.settings-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.align-to-bot {
  align-items: flex-end;
}

.btn-sm {
  padding: 0.25rem;
}

.seed-display .btn-sm {
  margin-top: 0.4375rem;
}
 

/* Custom switch styling for checkboxes */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 50px;
  height: 25px;
  background-image: url('data/images/switch-off.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  border: none;
  outline: none;
  margin: 0;
  vertical-align: middle;
}

input[type="checkbox"]:checked {
  background-image: url('data/images/switch-on.png');
}

input[type="checkbox"]:focus {
  outline: 2px solid var(--blue-300);
  outline-offset: 2px;
}

input[type="checkbox"]:hover {
  opacity: 0.8;
}

select {
  width: 95%;
  font-size: .9rem;
  margin-top: 0.25rem;
}

/* ========================================================================
   RESPONSIVE BREAKPOINTS
   ======================================================================== */

/* Tablet: 768px and up */
@media (min-width: 768px) {
  .soopergrid-container {
    flex-direction: column;
    align-items: center;
  }

  #artboard {
    width: 100%;
    max-width: 800px;
    padding: 2rem;
    order: -1;
  }

  #canvasWrapper {
    max-width: 700px;
  }

  #ui {
    width: 100%;
    max-width: 700px;
    padding: 1.5rem;
    margin: 1rem 0;
  }

  .grid-logo {
    max-width: 240px;
  }

  .canvas-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 700px;
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .soopergrid-container {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
  }

  #artboard {
    width: 60%;
    max-width: none;
    padding-top: 3rem;
    order: 0;
  }

  #canvasWrapper {
    max-width: 90%;
  }

  #ui {
    width: 40%;
    max-width: 500px;
    padding: 1rem;
    margin: 1rem;
  }

  .grid-logo {
    padding-top: 1rem;
    max-width: 240px;
  }

  .canvas-actions {
    width: 100%;
    max-width: 50rem;
    gap: 0.75rem;
  }
}

/* Large Desktop: 1440px and up */
@media (min-width: 1440px) {
  #artboard {
    width: 50%;
  }

  #ui {
    width: 30%;
    max-width: 550px;
  }
}