/* IDO — base: reset, RTL page, type classes (TYPE.md), layout container, focus, helpers. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--color-deco-green); color: var(--color-text-primary); }

/* ---- Type classes (Figma text styles) ---- */
.t-h1, .t-h1-contact, .t-h2, .t-display, .t-display-words, .t-display-s, .t-index {
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0;
}
.t-h1         { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.t-h1-contact { font-size: var(--fs-h1-contact); line-height: var(--lh-h1-contact); }
.t-h2         { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.t-display    { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 600; }
.t-display-words { font-size: var(--fs-display-words); line-height: var(--lh-display-words); font-weight: 600; }
.t-display-s  { font-size: var(--fs-display-s); line-height: var(--lh-display-s); font-weight: 600; }
.t-index      { font-size: var(--fs-index); line-height: var(--lh-index); font-weight: 600; color: var(--color-ink-300); }
.t-h1-en, .t-h1-en-list { font-family: var(--font-en); font-weight: 400; text-transform: uppercase; }
.t-h1-en      { font-size: var(--fs-h1-en); line-height: var(--lh-h1-en); }
.t-h1-en-list { font-size: var(--fs-h1-en-list); line-height: var(--lh-h1-en-list); }
.t-h3, .t-statement-hero, .t-statement, .t-statement-sm { font-family: var(--font-heading); font-weight: 500; }
.t-h3         { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.t-statement-hero { font-size: var(--fs-statement-hero); line-height: var(--lh-statement-hero); }
.t-statement  { font-size: var(--fs-statement); line-height: var(--lh-statement); }
.t-statement-sm { font-size: var(--fs-statement-sm); line-height: var(--lh-statement-sm); }
.t-p          { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-p); line-height: var(--lh-p); }
.t-small      { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-small); }
.t-label      { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: 0.3px; }
.t-button     { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-button); line-height: var(--lh-button); }
.t-label-en   { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label-en); line-height: var(--lh-label-en); letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }

/* Headings and statements balance their lines; paragraphs avoid a lonely last word (Ido's rule). */
.t-h1, .t-h1-contact, .t-h2, .t-h3 { text-wrap: balance; }
/* Statements keep Figma's own line breaks (normal wrap); lonely last words are prevented with   in the markup. */
.t-p, .t-small { text-wrap: pretty; }

/* Colour runs inside one sentence (copy notation [[…]] / {{…}}) */
.accent { color: var(--color-brand-text); }   /* red words = brand/text #c90037 on every size (Ido 2026-10-19: AA contrast, kept consistent); watermelon stays for fills */
.accent-text { color: var(--color-brand-text); }   /* red in small text (AA) */
.dim { color: var(--color-text-muted); }
.dim-disabled { color: var(--color-text-muted); }   /* the hero's grey words: text/muted (5.1:1) on every size (Ido 2026-10-19) */
.muted { color: var(--color-text-muted); }
.secondary { color: var(--color-text-secondary); }
.nowrap { white-space: nowrap; }

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Icons and shapes (sprite: /assets/ido/icons.svg) ---- */
.icon { width: 24px; height: 24px; flex: none; }
svg { stroke-width: 2px; } /* sprite icons: non-scaling 2 px stroke unless a component sets its own */
.shape { flex: none; overflow: visible; }

/* ---- Focus + helpers ---- */
[hidden] { display: none !important; } /* the hidden attribute always wins over component display rules */
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.sr-only {
  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; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: var(--space-4); top: var(--space-4); z-index: 100;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

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