/* Fonts (Open Sans + Overpass Mono) are self-hosted via the @fonts directive in the
   page <head> (configured in vite.config.js) — no external font CDN import needed. */

/* ──────────────────────────────────────────────────────────────────────────
   Theme system (light / dark)

   Every colour on the page comes from a custom property declared here, so both
   this file AND the inline <style> in welcome.blade.php share one source of
   truth (this file loads first, so :root is defined before the inline rules
   reference it).

   The light palette is the default; the dark palette applies automatically when
   the OS prefers dark (@media (prefers-color-scheme: dark)). There is no manual
   toggle — the scheme follows the visitor's system setting.

   Variables are named by ROLE, not by colour. A few light hexes (#222222,
   #F4F7F5, #fff) each play two opposite roles — e.g. #222222 is both the dark
   header background AND the light-mode content text — so they map to different
   variables that flip in opposite directions (or not at all) in dark mode.

   The header is intentionally dark in BOTH themes, so its colours are theme
   invariant and have no dark override. Only the content surface, links, form
   controls, and accents change between light and dark.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* The page ships both palettes; the UA renders form controls, scrollbars and
     the default canvas to match whichever the OS prefers. */
  color-scheme: light dark;

  /* Page-level "behind" colour (overscroll), selection, and form errors. */
  --color-accent-pink: #FF1053;

  /* Theme-invariant header (dark surface in both light and dark mode). */
  --color-header-bg: #222222;
  --color-header-heading: #F4F7F5;
  --color-header-subheading: #A7A2A9;
  /* Muted header text (greetings + weekday). Kept subtle but lightened to clear
     4.5:1 on the #222 header — the old #575A5E (especially at opacity 0.5)
     failed WCAG AA. The opacity:0.5 that used to dim these was removed. */
  --color-header-muted: #8b8e92;

  /* Content surface — flips to dark in dark mode. */
  --color-bg: #F4F7F5;
  --color-text: #222222;

  /* Links / accents. */
  --color-accent: #3454D1;
  --color-accent-hover: #5e77da;

  /* Form controls & code blocks. */
  --color-surface: #fff;   /* input / textarea / pre background */
  --color-border: #222222; /* input / pre border */
  --color-on-accent: #fff; /* text/icon sitting on an accent fill (buttons, skip-link) */
}

/* Dark palette. Applied when the OS prefers dark — there is no manual toggle. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #16181d;
    --color-text: #e6e6e6;
    --color-accent: #6f8bff;        /* lightened for contrast on the dark surface */
    --color-accent-hover: #93a8ff;
    --color-surface: #1f232b;       /* input / pre background, lighter than --color-bg */
    --color-border: #3a4150;        /* visible border on the dark surface */
    --color-on-accent: #16181d;     /* dark text — readable on the lightened accent/pink fills (~5.9:1) */
  }
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  background-color: var(--color-accent-pink);
  color: var(--color-on-accent);
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body::selection {
  background: var(--color-accent-pink); }

body::-moz-selection {
  background: var(--color-accent-pink); }

a {
  color: var(--color-accent);
  text-decoration: none; }

a:hover {
  border-bottom: 3px solid var(--color-accent);
  cursor: pointer; }

/* Reserve the scrollbar's space so the layout doesn't jump when it appears. */
html {
  scrollbar-gutter: stable; }

/* Clear, high-contrast keyboard focus indicator for every interactive element.
   :focus-visible keeps it for keyboard/AT users without showing a ring on
   mouse click. The offset lifts it off the accent-filled buttons and links. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px; }

strong {
  font-weight: 700; }

header {
  height: 100vh;
  min-height: 350px;
  background-color: var(--color-header-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1; }
  header .header__container {
    width: 70%;
    margin: auto; }
    header .header__container h1 {
      display: block;
      font-weight: 700;
      font-size: 3em;
      color: var(--color-header-heading); }
      header .header__container h1 span.wrap {
        display: block;
        font-weight: 300;
        font-size: 0.45em;
        color: var(--color-header-subheading); }
    header .header__container .header__welcomes {
      color: var(--color-header-muted);
      margin-top: 50px;
      margin-bottom: -80px;
      font-family: "Overpass Mono", monospace;
      line-height: 0.7em; }
      header .header__container .header__welcomes span {
        display: block;
        margin-bottom: 10px; }
        header .header__container .header__welcomes span a:hover {
          border: 0;
          color: var(--color-accent-hover); }
  header .header__date {
    position: absolute;
    right: 20px;
    top: 15px;
    font-family: "Overpass Mono", monospace;
    text-transform: lowercase;
    color: var(--color-header-muted); }

.content {
  min-height: 100vh;
  padding: 50px 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: center; }
  .content .content__wrap {
    width: 70%;
    margin: auto; }

pre {
  font-family: "Overpass Mono", monospace;
  font-size: 12px; }

/*# sourceMappingURL=main.css.map */
