/* ==========================================================================
   base.css - design tokens, reset and typography
   Block by Block · a field guide to Web3
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   The palette is an "ink on paper" field-guide system: a warm paper ground,
   near-black ink, one structural blue and one signal orange. Dark mode is a
   full re-declaration of the same token names, so no component needs to know
   which theme is active.
   -------------------------------------------------------------------------- */

:root {
  /* Light theme: white, yellow, dark green and black */
  /* Surfaces */
  --paper:        #ffffff;
  --paper-raised: #ffffff;
  --paper-sunken: #f5f4ee;

  /* Ink */
  --ink:          #0b0b09;
  --ink-soft:     #3a3a33;
  --ink-faint:    #76766b;

  /* Lines */
  --rule:         #e6e3d6;
  --rule-strong:  #0b0b09;

  /* Accents */
  --accent:       #14532d;   /* dark green: structure, links, primary actions */
  --accent-soft:  #e3efe6;
  --on-accent:    #ffffff;
  --gold:         #e0a800;   /* yellow highlight: sparkles, underline, hover glow */
  --gold-hi:      #ffd84d;
  --gold-soft:    #fff6cc;
  --glow:         rgba(224, 168, 0, 0.35);
  --signal:       #c2410c;
  --signal-soft:  #fbe6da;
  --verify:       #14532d;
  --verify-soft:  #e3efe6;

  /* One colour per era of the web (the shift section) */
  --era1:         #33332c;   --era1-soft: #f1f0ea;   --era1-fill: #33332c;   --era1-on: #ffffff;
  --era2:         #14532d;   --era2-soft: #e3efe6;   --era2-fill: #14532d;   --era2-on: #ffffff;
  --era3:         #14532d;   --era3-soft: #fff4cc;   --era3-fill: #e9b200;   --era3-on: #0b0b09;

  /* Typography */
  /* Google Sans everywhere; its monospaced sibling only where code and hashes need fixed-width columns */
  --font-display: "Google Sans", "Product Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    var(--font-display);
  --font-code:    "Google Sans Code", "Google Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (min → max between 380px and 1200px viewports) */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.5vw, 2.7rem);
  --step-4:  clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --step-5:  clamp(2.6rem, 1.6rem + 5vw, 5.4rem);

  /* Space scale */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.75rem;
  --space-m:   1.25rem;
  --space-l:   2rem;
  --space-xl:  3.25rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  /* Layout */
  --measure:   66ch;
  --container: 1200px;
  --gutter:    clamp(1rem, 4vw, 2.5rem);
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  160ms;
  --dur-mid:   320ms;
  --dur-slow:  650ms;

  /* Effects */
  --shadow-card: 0 1px 2px rgba(11, 11, 9, 0.04), 0 14px 32px -24px rgba(11, 11, 9, 0.35);
  --shadow-hover: 0 0 0 1px var(--gold), 0 22px 44px -22px var(--glow), 0 10px 22px -18px rgba(11, 11, 9, 0.35);
  --grain-opacity: 0.035;

  color-scheme: light;
}

/* Dark theme.
   The values are declared twice on purpose. The media query makes dark mode
   work with no JavaScript at all, while the attribute lets the toggle
   override the system preference in either direction. Neither can be
   expressed in terms of the other, and a stylesheet is the wrong place to
   depend on a script having run. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0b0b09;
    --paper-raised: #16150f;
    --paper-sunken: #070706;

    --ink:          #f7f2e2;
    --ink-soft:     #c9c2ab;
    --ink-faint:    #8a846f;

    --rule:         #29271e;
    --rule-strong:  #57523f;

    --accent:       #f5c542;
    --accent-soft:  #2b2410;
    --on-accent:    #0b0b09;
    --gold:         #f5c542;
    --gold-hi:      #ffe58a;
    --gold-soft:    #2b2410;
    --glow:         rgba(245, 197, 66, 0.28);
    --signal:       #ff8f5e;
    --signal-soft:  #35211a;
    --verify:       #ffe58a;
    --verify-soft:  #2a2512;

    --era1:         #f7f2e2;   --era1-soft: #1f1d17;   --era1-fill: #f7f2e2;   --era1-on: #0b0b09;
    --era2:         #ffe58a;   --era2-soft: #2a2512;   --era2-fill: #ffe58a;   --era2-on: #0b0b09;
    --era3:         #f5c542;   --era3-soft: #2e2510;   --era3-fill: #f5c542;   --era3-on: #0b0b09;

    --shadow-card: 0 1px 0 var(--rule), 0 18px 36px -28px rgba(0, 0, 0, 0.9);
    --shadow-hover: 0 0 0 1px var(--gold), 0 24px 48px -22px var(--glow), 0 12px 26px -18px rgba(0, 0, 0, 0.9);
    --grain-opacity: 0.05;

    color-scheme: dark;
}
}

[data-theme="dark"] {
  --paper:        #0b0b09;
  --paper-raised: #16150f;
  --paper-sunken: #070706;

  --ink:          #f7f2e2;
  --ink-soft:     #c9c2ab;
  --ink-faint:    #8a846f;

  --rule:         #29271e;
  --rule-strong:  #57523f;

  --accent:       #f5c542;
  --accent-soft:  #2b2410;
  --on-accent:    #0b0b09;
  --gold:         #f5c542;
  --gold-hi:      #ffe58a;
  --gold-soft:    #2b2410;
  --glow:         rgba(245, 197, 66, 0.28);
  --signal:       #ff8f5e;
  --signal-soft:  #35211a;
  --verify:       #ffe58a;
  --verify-soft:  #2a2512;

  --era1:         #f7f2e2;   --era1-soft: #1f1d17;   --era1-fill: #f7f2e2;   --era1-on: #0b0b09;
  --era2:         #ffe58a;   --era2-soft: #2a2512;   --era2-fill: #ffe58a;   --era2-on: #0b0b09;
  --era3:         #f5c542;   --era3-soft: #2e2510;   --era3-fill: #f5c542;   --era3-on: #0b0b09;

  --shadow-card: 0 1px 0 var(--rule), 0 18px 36px -28px rgba(0, 0, 0, 0.9);
  --shadow-hover: 0 0 0 1px var(--gold), 0 24px 48px -22px var(--glow), 0 12px 26px -18px rgba(0, 0, 0, 0.9);
  --grain-opacity: 0.05;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
}

/* A very fine paper grain sits above the background and below the content.
   It is drawn with an SVG turbulence filter, so it costs no image request. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; }
h4 { font-size: var(--step-0); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

strong { font-weight: 600; }

/* Small caps monospace label - used for section numbers, kickers and data keys */
.label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 54ch;
}

.prose { max-width: var(--measure); color: var(--ink-soft); }
.prose + .prose { margin-top: var(--space-m); }

.mono { font-family: var(--font-mono); font-variant-ligatures: none; }

/* Inline term: a word the glossary also defines */
.term {
  border-bottom: 1px dashed var(--ink-faint);
  cursor: help;
  font-weight: 500;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   4. Accessibility helpers
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Honour the operating-system "reduce motion" setting everywhere. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}