/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this file may be
reproduced, modified or stored in a retrieval system, or transmitted in any form or by any
means, electronic, mechanical, photocopying, recording or otherwise, without the prior
written permission of Toptronic® Limited.
For copyright inquiries: jacques@toptronic.com

Generated/Updated on: 2026-08-06T19:30:00+1000

styles_001.css — file 1 of 6 (loaded FIRST; cascade order IS the architecture, no @import)

WHAT this file does:
  1. Defines every "design token" (colors, spacing, sizes, shadows, speeds) as named
     variables at the top of the page, so the whole site shares one set of values.
  2. Resets the browser's built-in styles so every browser starts from the same blank page.
  3. Sets the basic look of text: headings, paragraphs, links, lists, code.

WHY it works this way (for Ryan, 14, and Ava, 9):
  Think of tokens like a box of labeled crayons. Instead of remembering "the yellow is
  #F0E010" everywhere, we write the name once at the top — var(--clr-yellow) — and every
  file after this one just asks for "the yellow". Want to change the yellow one day?
  Change ONE line here and the whole site updates. That is the whole trick.
  The reset is like wiping a whiteboard clean before drawing: browsers each draw things
  a little differently, so we erase their guesses first and draw everything ourselves.
*/

/* ============================================================================
   SECTION 1 — RESERVED @font-face SLOT
   ----------------------------------------------------------------------------
   v1 uses system fonts only (see --font-body below): zero downloads, instant text.
   When we later self-host Inter/Archivo woff2 (same upgrade path as PLWS Session
   0026), the @font-face rules go RIGHT HERE, before the tokens, and only the two
   --font-* variables below need to change. Nothing else in the site touches fonts.
   ========================================================================== */

/* @font-face { font-family: 'Inter'; ... }  ← future self-hosted fonts live here */

/* ============================================================================
   SECTION 2 — DESIGN TOKENS (:root custom properties)
   One named value per design decision. Design doc §1 is the source of truth.
   ========================================================================== */

:root {

  /* ---- 2.1 Colors: dark theme (the default — the badge black stage) -------- */
  --clr-bg:         #0A0A0A;  /* page background — the badge black */
  --clr-surface:    #141414;  /* cards, header, footer */
  --clr-surface-2:  #1C1C1C;  /* raised surfaces: hovered cards, code blocks */
  --clr-text:       #F5F5F5;  /* body & heading text on dark (18.2:1 on bg) */
  --clr-muted:      #A6A6A6;  /* secondary text, captions on dark (9.1:1) */
  --clr-yellow:     #F0E010;  /* brand yellow: buttons, accents, links (14.5:1) */
  --clr-yellow-hover: #FFF440; /* hover lift for yellow elements */
  --clr-red:        #D02010;  /* brand red: DECORATIVE SPARK ONLY (3.7:1 — never
                                 body text on dark; arc, underline, bullet, or
                                 ≥24px display type only — design §1.3) */
  --clr-border:     #262626;  /* card borders on dark */
  --clr-hairline:   #1F1F1F;  /* 1px separators and rules on dark */
  --clr-ink:        #0A0A0A;  /* text placed ON yellow surfaces (14.5:1) */

  /* ---- 2.2 Colors: light sections (future Learn/About long-form) ------------
     Warm paper, not clinical white, so the flip from dark is gentle. Bright
     yellow is NEVER text on paper (0.8:1 — fails hard); it may only be graphic
     fill. Tokens are declared here (Ava rule: everything named once, up top) and
     APPLIED by .section--light in styles_004.css. */
  --clr-paper:        #F7F5EF;  /* light section background */
  --clr-paper-2:      #FFFFFF;  /* cards on paper */
  --clr-ink-text:     #141414;  /* body text on light (16.9:1) */
  --clr-ink-muted:    #5A5A5A;  /* secondary text on light (7.0:1) */
  --clr-ink-yellow:   #6E6200;  /* AA-safe yellow-tinged labels/links on light (5.7:1) */
  --clr-paper-border: #E2DED2;  /* borders on light */
  --clr-paper-code:   #EFEDE4;  /* code blocks on paper (design §3.5) */

  /* ---- 2.3 Spacing scale (8px base) ------------------------------------------
     Rhythm rule: sections breathe --sp-8 on mobile, --sp-9 on desktop.
     Cards are padded --sp-5. Named steps stop "random pixel soup". */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- 2.4 Radius scale ------------------------------------------------------
     --r-4 echoes the logo badge's rounded-square ratio (~22%) — a deliberate,
     restrained brand nod used on the hero panel / featured card only. */
  --r-1: 4px;     /* chips, tags */
  --r-2: 8px;     /* buttons, inputs */
  --r-3: 12px;    /* cards */
  --r-4: 20px;    /* feature card, hero panel (the brand-nod radius) */
  --r-pill: 999px; /* language switcher, pills */

  /* ---- 2.5 Shadows (dark theme = low, warm shadows; no neon) ----------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);                 /* resting card */
  --sh-2: 0 4px 16px rgba(0, 0, 0, .5);                /* hovered card */
  --sh-3: 0 8px 32px rgba(0, 0, 0, .6);                /* hero panel, modals */
  --sh-yellow: 0 0 0 1px rgba(240, 224, 16, .35),
               0 4px 24px rgba(240, 224, 16, .12);     /* primary CTA glow — subtle */

  /* ---- 2.6 Type scale (base 16px; design §1.7) --------------------------------
     Big enough for Jacques (63) and Ava (9): body is 17px, never below 15px. */
  --fs-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);  /* 40→72px, hero h1 only (0034) */
  --fs-statement: clamp(1.875rem, 3vw + 0.5rem, 2.5rem); /* 30→40px: the statement
     size that fills the gap between H2 and H1 — where the trust message lives
     (session 0034, typography review finding F6) */
  --fs-h1: 2.5rem;        /* 40px — page titles */
  --fs-h2: 1.875rem;      /* 30px — section titles */
  --fs-h3: 1.375rem;      /* 22px — card titles */
  --fs-body-l: 1.1875rem; /* 19px — lead paragraphs */
  --fs-body: 1.0625rem;   /* 17px — default text */
  --fs-small: 0.9375rem;  /* 15px — captions, meta (never smaller) */
  --fs-eyebrow: 0.8125rem;/* 13px — uppercase labels, +0.08em tracking */
  --fs-button: 1rem;      /* 16px — buttons */

  /* ---- 2.7 Font stacks (v1: system fonts — no downloads, French diacritics
     à â ç é è ê ë î ï ô ù û ü ÿ are fully covered; CJK fallbacks are extended
     by the :lang() guards in styles_006.css) */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  /* ---- 2.8 Motion tokens (PLWS family; design §1.8) ---------------------------
     Nothing on this site animates longer than 500ms. Ever. */
  --t-fast: 150ms;  /* color / hover swaps */
  --t-med: 300ms;   /* transforms, card lifts */
  --t-slow: 500ms;  /* theme flips — the longest anything may take */
  --ease: cubic-bezier(.2, .6, .2, 1);

  /* ---- 2.9 Z-index ladder (who sits on top of whom) --------------------------- */
  --z-base: 0;
  --z-sticky: 100;  /* header */
  --z-overlay: 200; /* dropdowns, mobile nav */
  --z-modal: 300;
  --z-skip: 400;    /* skip-to-content link — always topmost */

  /* ---- 2.10 Layout measures ---------------------------------------------------- */
  --measure: 68ch;      /* max line length for comfortable reading */
  --header-h: 72px;     /* sticky header height — NEVER hides on scroll */
  --touch: 44px;        /* minimum touch target (WCAG) — buttons use 48px */
}

/* ============================================================================
   SECTION 3 — CSS RESET (wipe the whiteboard clean)
   Every browser guesses margins, sizes and box math a little differently.
   We erase those guesses so OUR tokens are the only voice.
   ========================================================================== */

/* Border-box everywhere: padding and borders live INSIDE the declared size,
   so a 300px card is 300px — not 300px plus surprise padding. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins from the text and layout elements we style ourselves. */
body, h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote, pre, fieldset {
  margin: 0;
}

/* Lists lose their bullets by default; components that want markers re-add them. */
ul, ol {
  padding: 0;
  list-style: none;
}

/* Page root: full height, smooth anchor scrolling (reduced-motion net in
   styles_006.css turns smooth scrolling OFF for visitors who ask for that). */
html {
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* stop iOS from inflating text on rotation */
}

/* Body: the dark stage. font-size comes from --fs-body (17px) so Ava and
   Jacques read comfortably without zooming. */
body {
  min-height: 100vh;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;              /* gives French accents breathing room */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Media: never overflow their container, keep their shape. */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements do not inherit fonts by default — make them. */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* Buttons: strip native chrome; our .btn styles (styles_003.css) do the work. */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Tables: collapse borders so hairline rules behave predictably. */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Hidden attribute always wins over display rules. */
[hidden] {
  display: none !important;
}

/* ============================================================================
   SECTION 4 — BASE TYPOGRAPHY (design §2)
   Headings differentiate by WEIGHT (700) and tight letter-spacing (-0.02em),
   not a second font family — keeps v1 lean.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--clr-text);
  letter-spacing: -0.02em;
  text-wrap: balance;             /* no lonely words on the last line */
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.03em;   /* display-size tightening (session 0034) */
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

/* Paragraphs: `pretty` avoids awkward short last lines. */
p {
  text-wrap: pretty;
}

/* Lead paragraphs (hero subline, page intros) get the larger size. */
.lead {
  font-size: var(--fs-body-l);
}

/* Small print: captions and meta — never below 15px (design §2). */
small,
.small {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--clr-muted);
}

/* Eyebrow: the little yellow shout above a heading.
   UPPERCASE + wide tracking on Latin; the CJK guards in styles_006.css
   neutralize the tracking for Chinese/Japanese/Korean where letter-spacing
   breaks the script's rhythm. */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.10em;   /* wider tracking reads more deliberate (0034) */
  color: var(--clr-yellow);       /* 14.5:1 on dark — AA by a wide margin */
  margin-bottom: var(--sp-3);
}

/* Links: yellow on dark, underlined on hover only inside prose (nav, buttons
   and cards style their own links). Color swaps take --t-fast (150ms). */
a {
  color: var(--clr-yellow);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: var(--clr-yellow-hover);
}

/* Inline emphasis. */
strong, b {
  font-weight: 700;
}

/* Code: mono stack is reserved for code and prompt snippets (TPEE context). */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Block code sample: raised dark surface, comfortable padding, scrolls
   horizontally instead of breaking the layout. */
pre {
  font-family: var(--font-mono);
  background-color: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  font-size: var(--fs-small);
}

/* Blockquote: a quiet left rule; light sections recolor it (styles_004.css). */
blockquote {
  border-left: 3px solid var(--clr-yellow);
  padding-left: var(--sp-4);
  color: var(--clr-muted);
}

/* Horizontal rule: a hairline, nothing louder. */
hr {
  border: none;
  border-top: 1px solid var(--clr-hairline);
  margin: var(--sp-6) 0;
}

/* Selection: brand yellow with ink text — readable and on-brand. */
::selection {
  background-color: var(--clr-yellow);
  color: var(--clr-ink);
}

/* ============================================================================
   SECTION 5 — UTILITIES
   Small reusable helpers. Kept few on purpose: components live in 002–005.
   ========================================================================== */

/* .prose — the reading column. Centers long text and caps it at 68 characters
   per line, the width where eyes track comfortably (Jacques-tested). Child
   spacing creates a steady reading rhythm. */
.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--sp-4);
}

.prose > p + p {
  margin-top: var(--sp-4);
}

.prose h2 {
  margin-top: var(--sp-7);
}

.prose h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

/* .prose links are real reading links: always underlined so they read as
   links even without color vision. */
.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* .prose lists get their markers back (the reset removed them globally). */
.prose ul {
  list-style: disc;
  padding-left: var(--sp-5);
}

.prose ol {
  list-style: decimal;
  padding-left: var(--sp-5);
}

.prose li + li {
  margin-top: var(--sp-2);
}

/* .nums — tabular figures: every digit takes the same width, so numbers in
   prices, stats and spec tables line up in clean columns instead of dancing. */
.nums {
  font-variant-numeric: tabular-nums;
}

/* .visually-hidden — for screen-reader-only text: present in the page,
   invisible on screen. (The skip link uses its own show-on-focus pattern in
   styles_002.css.) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* .container — the shared centered page column. Sections put their content
   inside this so everything lines up on the same left/right edges. */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* External-link marker (session 0034, UX finding F6): links that leave this
   site get a small ↗ so the exit is always a choice, never a surprise.
   margin-inline-start flips by itself in RTL — no extra rule needed. */
a[href^="https://tpee.app"]::after,
a[href^="https://www.toptronic.com"]::after,
a[href^="https://www.jacquesbotte.com"]::after {
  content: "↗";
  font-size: 0.8em;
  margin-inline-start: 2px;
}

/* End of styles_001.css — tokens, reset, base type, utilities.
   Next: styles_002.css (header, nav, language switcher, footer). */