/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --black: #242424;
  --red: #D46A6A;
  --green: #7aba78;
  --yellow: #F8D204;
  --blue: #0185c6;
  --magenta: #72408F;
  --cyan: #28B8BF;
  --white: #ffffff;
  --black-1: #0c141f;
  --red-1: #FFAAAA;
  --green-1: #0a6847;
  --yellow-1: #FCD434;
  --blue-1: #485492;
  --magenta-1: #9168AB;
  --cyan-1: #4EC5CB;
  --white-1: #f9fffa;


  --bg: #eeeeee;
  --bg-contrast: #d6d6d6;
  --bg-dark: var(--white-1);
  --bg-table: var(--white);
  --card-bg: var(--white);
  --input-bg: var(--white-1);
  --input-disabled-bg: #d7e3d8;
  --fg: var(--black);
  --fg-contrast: #393939;
  --fg-dark: var(--black-1);
  --fg-light: #444444;

  --danger: #D54F4F;
  --link-color: var(--blue);
  --outline-color: var(--color-accent);
  --border-color: #888;
  --border-radius: 6px;

  --navbar-underline-color: var(--yellow);
  --navbar-underline-color-active: var(--black);

  /* @see https://www.canva.com/design/DAGEylAsed8/4L8ptPRpsNdTNHg4KCUZjw/edit */
  --color-brand: #0a6847;
  --color-accent: #7aba78;

  /* @see https://www.sarasoueidan.com/ */
  --body-background-color: #fff;
  --color-highlight: #F8D204;
  --color-code: hsl(260, 95%, 95%);
  --secondary-text-color: #5a5a5a;
  --supporting-text-color: #aaa;
  --body-background-color: #fff;
  --text-color: #111;
  --link-color: inherit;
  --shadow-color: #666;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--black);
    --bg-contrast: var(--white);
    --bg-dark: var(--black-1);
    --bg-table: #1B1B1B;
    --card-bg: #1B1B1B;
    --fg: var(--white);
    --fg-contrast: var(--black);
    --fg-dark: var(--white-1);
    --fg-light: #bbbbbb;

    --link-color: var(--yellow);
    --border-color: #ccc;

    --navbar-underline-color: var(--white-1);
    --navbar-underline-color-active: var(--blue);
  }
}

body {
  font-style: normal;
  font-size: 16px;
  line-height: 130%;
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;

  background-color: var(--bg);
  color: var(--fg);
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: serif;
  font-weight: 300;
}

a,
a:visited {
  color: var(--link-color, blue);
}

a[data-turbo-method="delete"] {
  --underline-color: var(--red, "#FF0000");
  color: var(--danger, "#AA0000");
}

p {
  margin: 0 0 1rem;
}

ul {
  list-style: disc;
  margin: 0;
  padding-left: 1em;
}

figure {
  margin: 0;

  figcaption {
    text-align: justify;
  }
}

img {
  margin: 1em auto;
  max-width: 90vw;
}

dl dt {
  font-style: italic;
  border-left: 3px dotted var(--border-color);
  padding: 0.25em 0.5em;
}

#notice {
  background-color: var(--green);
  color: var(--white);
  padding: 1rem 0;
}

#alert {
  background-color: var(--red);
  color: var(--white);
  padding: 1rem 0;
}

.actions {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end;
  margin-top: 1em;
}

@media (min-width: 640px) {
  figure {
    margin: 1rem 2.5rem;
  }
}