/*
 * 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.
 */

/*
WIP: light/dark theme
WIP: layers (reset, layout...)
WIP: themable with good variables set (and functions to derive colors?) at page level? At "component" level?
WIP: view transitions?
WIP: body margin as variable (fix responsive santa layout?)
*/

:root {
  --texture-noise: radial-gradient(circle, rgba(0, 0, 0, 0.05) 2px, transparent 0);

  /* Hazy Greys in https://www.flerlagetwins.com/2021/06/datafam-colors-color-palette.html */
  --dadscoupe: #2C4A52;
  --juniperberries: #537072;
  --tranquility: #8E9B97;
  --modern-ivory: #E4EBDB;

  /* Exemple avec la palette "Feu de Camp" */
  --primary: var(--juniperberries);
  --primary-light: color-mix(in srgb, var(--primary), white 40%);
  --primary-dark: color-mix(in srgb, var(--primary), black 20%);
  --secondary: var(--tranquility);
  --accent: var(--dadscoupe);
  --accent-light: color-mix(in srgb, var(--accent), white 40%);
  --accent-dark: color-mix(in srgb, var(--accent), black 20%);
  --bg-secondary: color-mix(in srgb, var(--bg), black 5%);

  --bg: var(--modern-ivory);
  --bg-light: color-mix(in srgb, var(--bg), white 40%);
  --bg-dark: color-mix(in srgb, var(--bg), black 20%);
  --bg-secondary: var(--dadscoupe);
  --bg-secondary-light: color-mix(in srgb, var(--bg-secondary), white 40%);
  --bg-secondary-dark: color-mix(in srgb, var(--bg-secondary), black 20%);
  --title: var(--primary);
  --link-light: var(--modern-ivory);
  --link-dark: var(--juniperberries);
  --font-color-light: white;
  --font-color-dark: black;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ::view-transition-old(root) {
  animation: 1s ease-out both fade-out;
} */

/* ::view-transition-new(root) {
  animation: 2s ease-in both fade-in;
} */

::view-transition-old(header) {
  animation: 1s ease-in both slide-up;
}
::view-transition-new(header) {
  animation: 1s ease-out both slide-down;
}

/* @keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
} */
/* @keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
} */

@keyframes slide-up {
  from { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  to { transform: translateY(-50px); }
}
@keyframes slide-down {
  from { transform: translateY(-50px); }
  50% { transform: translateY(-50px); }
  to { transform: translateY(0); }
}


html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--title);
  text-shadow: 1px 1px 1px var(--bg-secondary-light);
  margin-top: 0;
  margin-bottom: 0.5em;
}

a {
  color: var(--link-dark);
  text-decoration: none;
  &:hover {
    color: var(--link-hover);
    text-decoration: underline;
  }
}

body {
  font-family: var(--font-family);
  color: var(--font-color-dark);
  line-height: 1.6;
  background-color: var(--bg);
  /* background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg) 28%); */
  background:
      linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent),
      var(--texture-noise) center / 7px 7px,
      var(--bg);

  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;

  > header {
    view-transition-name: header;

    margin: 0 1em;
    padding: 0 0.5em;
    border-radius: 0 0 0.5em 0.5em;
    color: var(--font-color-light);
    background-color: var(--bg-secondary);
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-secondary-dark) 100%);
    box-shadow: 0 0 0.2em 0.1em gray;
    /* font-family: 'Courier New', Courier, monospace; */
    display: grid;
    grid-template-columns: 1fr auto;
    a { color: var(--modern-ivory); }

    > h1 {
      align-self: center;
      font-size: 1.2em;
      margin: 0;
      color: var(--modern-ivory);
    }
    
    > nav {
      font-size: 0.8em;
      align-self: center;
      text-align: center;
    }
  }

  > main {
    padding: 1em 2em;
    overflow-x: auto;
  }

  > footer {
    background-color: var(--bg-secondary);
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-secondary-dark) 100%);
    font-size: 0.8em;
    text-align: center;
    margin: 1em 1em 0 1em;
    padding: 0.2em;
    border-radius: 0.5em 0.5em 0 0;
    box-shadow: 0 0 0.2em 0.1em gray;
    color: var(--font-color-light);
    a { color: var(--modern-ivory); }
  }
}