/* public/css/styles.css */

:root {
  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --system-ui-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono",
    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Consolas", "Courier New",
    monospace;

  /* Radius */
  --radius3: 3px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
}

[data-theme="light"] {
  /* Backgrounds */
  --coal1: #fbfdfc;
  --coal2: #f7f9f8;
  /* Interactive components */
  --coal3: #eef1f0;
  --coal4: #e6e9e8;
  --coal5: #dfe2e0;
  /* Borders and separators */
  --coal6: #d7dad9;
  --coal7: #cbcfcd;
  --coal8: #b8bcba;
  /* Solid colors */
  --coal9: #868e8b;
  --coal10: #7c8481;
  /* Accessible text */
  --coal11: #5f6563;
  --coal12: #1a211e;

  /* Alpha colors */
  /* Backgrounds */
  --coalA1: #00804004;
  --coalA2: #00402008;
  /* Interactive components */
  --coalA3: #002d1e11;
  --coalA4: #001f1519;
  --coalA5: #00180820;
  /* Borders and separators */
  --coalA6: #00140d28;
  --coalA7: #00140a34;
  --coalA8: #000f0847;
  /* Solid colors */
  --coalA9: #00110b79;
  --coalA10: #00100a83;
  /* Accessible text */
  --coalA11: #000a07a0;
  --coalA12: #000805e5;
}

[data-theme="dark"] {
  /* Backgrounds */
  --coal1: #101211;
  --coal2: #171918;
  /* Interactive components */
  --coal3: #202221;
  --coal4: #272a29;
  --coal5: #2e3130;
  /* Borders and separators */
  --coal6: #373b39;
  --coal7: #444947;
  --coal8: #5b625f;
  /* Solid colors */

  --coal9: #63706b;
  --coal10: #717d79;
  /* Accessible text */
  --coal11: #adb5b2;
  --coal12: #eceeed;

  /* Alpha colors */
  /* Backgrounds */
  --coalA1: #00000000;
  --coalA2: #f0f2f108;
  /* Interactive components */
  --coalA3: #f3f5f412;
  --coalA4: #f2fefd1a;
  --coalA5: #f1fbfa22;
  /* Solid colors */
  --coalA6: #edfbf42d;
  --coalA7: #edfcf73c;
  --coalA8: #ebfdf657;
  /* Solid colors */
  --coalA9: #dffdf266;
  --coalA10: #e5fdf674;
  /* Accessible text */
  --coalA11: #f4fefbb0;
  --coalA12: #fdfffeed;
}

* {
  box-sizing: inherit;
}

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  height: 100%; /* needed for the sticky footer */
  font-family: var(--system-ui);
  color: var(--coal11);
  margin: 0;
  padding: 0;
  background-color: var(--coal1);
}

/* a wrapper to make the footer sticky */
.page-wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

a {
  color: var(--coal9);
}
a:hover {
  color: var(--coal10);
}
textarea {
  all: unset;
  display: block;
  color: var(--coal11);
  background-color: var(--coal5);
  border: none;
  border-radius: var(--radius3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
}
pre {
  font-family: var(--system-ui-mono);
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
}
code {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 130px;
  padding: var(--space-3);
  background-color: var(--coal5);
}

.header {
  display: flex;
  align-items: center;
  justify-content: baseline;
  background-color: var(--coal3);
  padding: 10px 30px;
}

nav {
  margin: 0 var(--space-4);
}

main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  border-radius: var(--radius3);
  margin: 10px auto;
}

section {
  background-color: var(--coal3);
  padding: 20px;
  margin: 10px;
  min-width: 320px;
  flex-grow: 1;
  border-radius: var(--radius3);
}

footer {
  background-color: var(--coal3);
  text-align: center;
  padding: 10px 0;
  width: 100%;
}

button {
  all: unset;
  box-sizing: border-box;
  user-select: none;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--system-ui);
  text-align: center;

  padding: var(--space-2);
  border-radius: var(--radius3);

  margin: var(--space-1) var(--space-2) var(--space-2) 0;
}

button.primary {
  color: var(--coal1);
  background-color: var(--coal11);
}

button.primary:hover {
  background-color: var(--coal10);
}

button.primary:active {
  background-color: var(--coal9);
}

button.secondary {
  color: var(--coal11);
  background-color: var(--coal4);
}

button.secondary:hover {
  background-color: var(--coal5);
}

button.secondary:active {
  background-color: var(--coal4);
}

/* theme toggle button */
button.toggle {
  margin-left: auto; /* pull right the last flexbox child */
}

/* theme toggle icon */
.circle-icon {
  display: inline-block;
  position: relative;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: 50%;
  overflow: hidden;
}
.circle-icon:after,
.circle-icon:before {
  content: "";
  position: absolute;
  height: 100%;
}
.circle-icon:after {
  background: #fff;
  left: 0;
  width: 45%;
}
.circle-icon:before {
  background: #000;
  right: 0;
  width: 55%;
}

/* animated logo */
.logo {
  display: flex;
  align-items: center;
  justify-content: baseline;
  font-family: var(--system-ui-mono);
  font-size: 24px;
  width: 200px;
}

.logo-link {
  color: var(--coal11);
  text-decoration: none;
}
.logo-link:hover {
  color: var(--coal12);
}
.logo-link:hover .cursor {
  background-color: var(--coal12);
}

.cursor {
  display: inline-block;
  background-color: var(--coal11);
}
/* animated logo */