/* EddyReady.id — base styles
   "Signal Green Executive": dark-mode-default editorial system.

   Element-level defaults only. Components live in components.css.
   Every value comes from tokens.css or the tables in docs/DESIGN-SYSTEM.md.
   No raw hex, no invented spacing.

   Hard rules carried from the design system:
     - --color-surface-alt never carries text (3.37:1 measured, non-text only)
     - text on --color-primary or --color-accent fills is --color-text-ink
     - --color-primary is interaction, --color-accent is static marking */

/* Reset ------------------------------------------------------------------ */

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

body,
h1,
h2,
h3,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

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


/* Base ------------------------------------------------------------------- */
/* Dark by default. This is not a theme toggle: the system has one dark
   family throughout, so there is no light palette to fall back to. */

body {
  background-color: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


/* Typography ------------------------------------------------------------- */
/* Space Grotesk carries every size. Hierarchy comes from size, weight, and
   tracking rather than from mixing faces. Tracking is proportional (em), so
   the optical tightness survives responsive scaling.

   Element mapping, following the role column of the section 3 table:
     .display-xl  hero statement      (opt-in; not bound to a tag)
     h1           major opener        display-lg
     h2           section title       headline
     h3           sub-heading         label */

.display-xl {
  font-size: var(--size-display-xl);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: var(--tracking-xl);
}

h1 {
  font-size: var(--size-display-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-lg);
}

h2 {
  font-size: var(--size-headline);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-md);
}

h3 {
  font-size: var(--size-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-sm);
}

/* Headings break more evenly than the browser default, which otherwise
   orphans a single word on the last line. Matters more here: at negative
   tracking an orphan is very visible. */
.display-xl,
h1,
h2,
h3 {
  text-wrap: balance;
}

.body-lg {
  font-size: var(--size-body-lg);
  line-height: 1.5;
}

small,
.caption {
  font-size: var(--size-caption);
  line-height: 1.5;
}

/* Prose is capped at a readable line length. A maximum, so paragraphs inside
   narrower containers are untouched. Set on the element rather than an opt-in
   class so a new page cannot forget it. */
p {
  max-width: var(--measure-body);
}

p + p {
  margin-top: var(--space-2);
}

/* The one second face. Eyebrows, index numerals, metadata. Amber, because
   these are static marking rather than interaction. */
.eyebrow,
.index-numeral {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  color: var(--color-accent);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.eyebrow::before {
  content: "// ";
}

.index-numeral {
  font-variant-numeric: tabular-nums;
}

.text-muted {
  color: var(--color-text-muted);
}


/* Links ------------------------------------------------------------------ */
/* Light green: interaction. Underlined always, so the link is not signalled
   by colour alone. Hover thickens the rule rather than changing hue, because
   the system defines no second interaction colour. */

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--motion-duration) var(--motion-easing);
}

a:hover {
  text-decoration-thickness: 2px;
}


/* Focus ------------------------------------------------------------------ */
/* --color-border-strong is the system's focus colour. Measured 11.17:1 on
   canvas and 8.06:1 on surface, so one ring works on every ground. */

:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 2px;
}


/* Skip link -------------------------------------------------------------- */
/* Lets keyboard users jump past the navigation. Hidden until focused.
   Ink on a primary fill, per the hard rule: never white on light green. */

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-primary);
  color: var(--color-text-ink);
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}


/* Layout ----------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Single column or two-up. Never three-across: section 7 is explicit, and
   the list-driven sections must not become card grids. */
.layout-two-up {
  display: grid;
  gap: var(--gutter);
}

/* Grounds. Canvas is the page; surface is for sections that need to lift
   away from it. Never surface-alt, which fails as a text ground. */
.section--surface {
  background-color: var(--color-surface);
}


/* Section rhythm --------------------------------------------------------- */
/* Two rhythms, alternating. Standard sections carry --space-6; feature
   sections carry --space-7 and are used for the hero, the intro statement
   band, and the closing contact band.

   The governing rule, from DESIGN-SYSTEM.md section 4: no more than three
   standard sections may run consecutively without a feature section between
   them. CSS cannot enforce a rule about sequence, so it is checked in review
   and by design-guard. */

.section {
  padding-block: var(--space-4);
}

.section--feature {
  padding-block: var(--space-5);
}


/* Responsive ------------------------------------------------------------- */
/* Mobile-first, min-width only, so every boundary belongs to exactly one
   bucket. Behaviour follows the table in DESIGN-SYSTEM.md section 7.

   Display sizes are derived from their tokens with a multiplier rather than
   restated as raw px, so the tokens stay the single source of truth:
     display-xl  0.43 -> 0.6 -> 1     (48px -> 67px -> 112px)
     display-lg  0.5  -> 0.7 -> 1     (36px -> 50px -> 72px) */

.display-xl {
  font-size: calc(var(--size-display-xl) * 0.43);
}

h1 {
  font-size: calc(var(--size-display-lg) * 0.5);
}

@media (min-width: 640px) {
  .display-xl {
    font-size: calc(var(--size-display-xl) * 0.6);
  }

  h1 {
    font-size: calc(var(--size-display-lg) * 0.7);
  }
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--gutter);
  }

  .section {
    padding-block: var(--space-6);
  }

  .layout-two-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .display-xl {
    font-size: var(--size-display-xl);
  }

  h1 {
    font-size: var(--size-display-lg);
  }

  .section--feature {
    padding-block: var(--space-7);
  }
}


/* Motion preference ------------------------------------------------------ */
/* Section 8: all motion respects the operating system setting. */

@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;
  }
}