/* ============================================================
   payraw.ca — main.css
   Design tokens, reset, base typography, layout primitives.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --color-bg:          #0a0a0a;
  --color-fg:          #fafafa;
  --color-muted:       #888888;
  --color-quiet:       #aaaaaa;
  --color-accent-red:  #cc2936;
  --color-accent-yellow: #f5b400;
  --color-border:      #222222;

  /* Type families */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (fluid where it matters) */
  --fs-wordmark:     clamp(4rem, 14vw, 10rem);
  --fs-positioning:  clamp(1.5rem, 3vw, 2.25rem);
  --fs-frontier:     clamp(0.875rem, 1.2vw, 1rem);
  --fs-headline:     clamp(2rem, 4vw, 3.25rem);
  --fs-body:         1rem;
  --fs-body-serif:   1.125rem;
  --fs-label:        0.75rem;
  --fs-small:        0.8125rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  5rem;
  --space-10: 6rem;
  --space-11: 8rem;
  --space-12: 10rem;

  /* Layout */
  --content-max:     1200px;
  --content-narrow:  640px;
  --gutter:          clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   180ms;
  --duration-base:   320ms;
  --duration-slow:   600ms;

  /* Section rhythm */
  --section-pad-y:        clamp(5rem, 10vw, 10rem);
  --section-pad-y-mobile: clamp(4rem, 12vw, 6rem);
}

/* ---------- Reset (modern, minimal) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- Base ---------- */
html, body {
  background: var(--color-bg);
  color: var(--color-fg);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "ss01";
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: var(--color-accent-red);
  color: var(--color-fg);
}

:focus-visible {
  outline: 2px solid var(--color-accent-yellow);
  outline-offset: 3px;
}

/* ---------- Layout primitives ---------- */
.section {
  padding: var(--section-pad-y) var(--gutter);
}

@media (max-width: 768px) {
  .section { padding: var(--section-pad-y-mobile) var(--gutter); }
}

.section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ---------- Shared: section sub-block label ---------- */
/* The visual through-line: small uppercase gray label on every Work sub-block */
.subblock {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: var(--space-11) 0;
}

.subblock:first-of-type { padding-top: 0; }

.subblock__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-6);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Temporary scaffolding visual aid ----------
   Faint outlines so the empty section shells are visible during build.
   Will be removed once each section is populated.
   ----------------------------------------------------- */
.section:empty,
.subblock:not(:has(*:not(.subblock__label))) {
  min-height: 30vh;
  border-top: 1px dashed var(--color-border);
}

.section--hero:empty { min-height: 100vh; }
.footer:empty { min-height: 80px; border-top: 1px dashed var(--color-border); }