/* =====================================================================
   base.css — reset, design tokens (CSS variables) and global layout.
   Minimalist, text-first, fixed measure. Theme overrides in theme.css.
   ===================================================================== */

/* ---- Tokens (dark = default) ---------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Neutral dark base tones (pure grey, untinted). */
  --bg:            #0f0f0f;
  --bg-elev:       #1a1a1a;
  --bg-elev-2:     #242424;
  --fg:            #e9e9e9;
  --fg-muted:      #9a9a9a;
  --fg-faint:      #5a5a5a;
  --border:        #242424;
  --border-strong: #363636;

  /* Flexoki accents — dark uses the 400 variants. */
  --red:     #D14D41;
  --orange:  #DA702C;
  --yellow:  #D0A215;
  --green:   #879A39;
  --cyan:    #3AA99F;
  --blue:    #4385BE;
  --purple:  #8B7EC8;
  --magenta: #CE5D97;

  /* Brand/links stay monochrome (resolved from --fg shades). */
  --accent:        var(--fg);
  --accent-press:  var(--fg-muted);
  --accent-2:      var(--fg-muted);
  --accent-3:      var(--fg-faint);
  --link:          var(--fg);
  --link-hover:    var(--fg-muted);

  --radius:        10px;
  --radius-sm:     6px;

  /* Fixed measures (max-widths) */
  --measure:       46rem;     /* ~720px — text column + navbar */
  --measure-wide:  100rem;    /* graph break-out width (bigger = larger text) */

  /* Graph node DOTS are coloured (by type); labels stay monochrome. */
  --node-milestone:        var(--magenta);
  --node-section:          var(--blue);
  --node-step:             var(--orange);
  --node-label:            var(--fg);
  --node-sublabel:         var(--fg-muted);
  --edge:                  color-mix(in srgb, var(--fg) 22%, transparent);
  --edge-hover:            var(--fg);
  --graph-bg:              transparent;

  /* Callouts: info=blue, astuce=green, attention=orange, piège=red, note=purple.
     Backgrounds are the accent at low alpha (works on both themes). */
  --callout-info-bd:      var(--blue);
  --callout-astuce-bd:    var(--green);
  --callout-attention-bd: var(--orange);
  --callout-piege-bd:     var(--red);
  --callout-note-bd:      var(--purple);
  --callout-info-bg:      color-mix(in srgb, var(--callout-info-bd) 15%, var(--bg));
  --callout-astuce-bg:    color-mix(in srgb, var(--callout-astuce-bd) 15%, var(--bg));
  --callout-attention-bg: color-mix(in srgb, var(--callout-attention-bd) 15%, var(--bg));
  --callout-piege-bg:     color-mix(in srgb, var(--callout-piege-bd) 15%, var(--bg));
  --callout-note-bg:      color-mix(in srgb, var(--callout-note-bd) 15%, var(--bg));

  --code-bg:       #161616;
  --code-border:   #242424;

  --nav-bg:        rgba(15, 15, 15, .45);
  --grid-dot:      rgba(255, 255, 255, .07);   /* image-frame canvas grid */
}

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background-color .2s ease, color .2s ease;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
code, pre, kbd { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---- Measure (the one fixed column) --------------------------------- */
.measure { max-width: var(--measure); margin-inline: auto; padding-inline: 1.25rem; }
.measure-wide { max-width: var(--measure-wide); margin-inline: auto; padding-inline: 1.25rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---- Pill navbar ---------------------------------------------------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 50;
  padding: .9rem 1.25rem;
}
.navbar {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .45rem .55rem .45rem 1.25rem;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(7px) saturate(1.3);
  backdrop-filter: blur(7px) saturate(1.3);
  border: 1px solid var(--border);
  border-radius: 999px;   /* stadium: semicircle on each end */
}
.brand {
  font-weight: 700; font-size: 1rem; letter-spacing: -.02em; color: var(--fg);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--fg); }
.brand b { color: var(--accent); font-weight: 700; }
.nav-menu { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav-link {
  color: var(--fg-muted); font-size: .92rem; font-weight: 500;
  padding: .35rem .75rem; border-radius: 999px; white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--fg); text-decoration: none; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.nav-link.is-disabled { color: var(--fg-faint); cursor: not-allowed; pointer-events: none; }

/* Burger (mobile only) */
.nav-burger {
  margin-left: auto; display: none; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border); color: var(--fg);
}
.nav-burger .icon-close { display: none; }

@media (max-width: 640px) {
  .nav-burger { display: grid; }
  .navbar { position: relative; }
  .nav-menu {
    position: absolute; top: calc(100% + .5rem); right: 0; left: 0;
    margin-left: 0; flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .5rem; display: none;
  }
  .navbar.is-open .nav-menu { display: flex; }
  .navbar.is-open .nav-burger .icon-open { display: none; }
  .navbar.is-open .nav-burger .icon-close { display: block; }
  .nav-menu .nav-link { padding: .6rem .75rem; font-size: 1rem; }
  .nav-menu .theme-toggle { align-self: flex-start; margin-top: .25rem; }
}

/* ---- Theme toggle --------------------------------------------------- */
.theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--fg);
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-grid; place-items: center; transition: border-color .2s, background .2s;
}
.theme-toggle:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: 999px;
  font-weight: 600; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { color: var(--bg); background: var(--fg-muted); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-ghost:hover { color: var(--fg); background: var(--bg-elev); }

/* ---- Page shell ----------------------------------------------------- */
main { padding-top: 1.5rem; padding-bottom: 4rem; }

/* ---- Footer --------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 4rem;
  padding: 2rem 0; color: var(--fg-muted); font-size: .9rem;
}
.site-footer .row { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.site-footer a { color: var(--fg-muted); }
.site-footer a:hover { color: var(--fg); }
.site-footer .spacer { margin-left: auto; }

/* ---- Landing (text only) -------------------------------------------- */
.landing { padding-top: 2rem; }
.landing h1 { font-size: 2rem; margin-bottom: 1.5rem; }   /* match .tut-title */
.landing .lede { color: var(--fg); }
.landing .lede > * + * { margin-top: 1.1rem; }
.landing .lede p { font-size: 1.02rem; color: var(--fg); }  /* match .prose p */
.landing .lede a { text-decoration: underline; text-underline-offset: 2px; }
.landing-cta { margin-top: 2.5rem; }
.landing-cta .btn { display: flex; width: 100%; justify-content: center; }

/* ---- Visually-hidden ------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}