/* Ideatives family: shared DNA tokens.
 * Consumed by ideatives.com and fullstack.consulting via tokens/{ideatives,fullstack}.css.
 * Brand values never live here. */
:root {
  /* Role contract: every brand file MUST fill these. `initial` = unfilled (guaranteed-invalid). */
  --surface: initial;     /* page ground */
  --surface-alt: initial; /* cards, bands */
  --ink: initial;         /* headings, body text */
  --ink-2: initial;       /* secondary text: leads, card text */
  --muted: initial;       /* labels, eyebrows, meta; also link underlines and control borders (>= 3:1) */
  --rule: initial;        /* 1px dividers; decorative only, never a sole cue */
  --accent: initial;      /* actions: links, CTA fill. Ink on both brands; the family colour never marks an action */
  --on-accent: initial;   /* text on an accent fill */
  --focus: initial;       /* focus ring; >= 3:1 on surface and surface-alt */
  --family: initial;      /* family colour, wine: FSC dot + top edge, Ideatives header band + favicon tile. Fill/mark only, never thin text on dark */
  --family-on: initial;   /* text, links and focus on a --family or --band fill */
  --band: initial;        /* footer band fill; see .band below */
  --radius: initial;      /* control/card corner radius */
  --font-display: initial;
  --weight-display: initial;
  --tracking-display: initial;

  /* Spacing: 8px base, 4px half-step only below 8 */
  --space-1: 0.25rem; /*   4 */
  --space-2: 0.5rem;  /*   8 */
  --space-3: 1rem;    /*  16 */
  --space-4: 1.5rem;  /*  24 */
  --space-5: 2rem;    /*  32 */
  --space-6: 3rem;    /*  48 */
  --space-7: 4rem;    /*  64 */
  --space-8: 6rem;    /*  96 */
  --space-9: 8rem;    /* 128 */

  /* Layout */
  --wrap: 90rem;                          /* 1440 */
  --gutter: clamp(1.5rem, 8vw, 7.5rem);   /* 24 -> 120 */
  --measure: 65ch;
  --measure-lead: 44ch;
  --measure-heading: 20ch;

  /* Type: major third (1.25) on 16px. Brands pick steps; no off-scale sizes. */
  --step--1: 0.8rem;    /* 12.8 labels, eyebrows */
  --step-0: 1rem;       /* 16   body */
  --step-1: 1.25rem;    /* 20   lead, h3 */
  --step-2: 1.5625rem;  /* 25   h2 small screens */
  --step-3: 1.953rem;   /* 31.25 h2 */
  --step-4: 2.441rem;   /* 39.06 h1 small screens */
  --step-5: 3.052rem;   /* 48.83 */
  --step-6: 3.815rem;   /* 61.04 h1 desktop */

  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-features: "cv05" 1, "ss01" 1;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --lh-body: 1.6;
  --lh-heading: 1.15;
  --lh-display: 1.05;
  --tracking-heading: -0.02em;
  --tracking-caps: 0.08em;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-ui: 150ms;
  --dur-reveal: 300ms;

  /* Layers */
  --z-header: 10;
  --z-overlay: 100;
  --z-skip: 1000;

  /* Interaction */
  --tap-min: 44px;
  --focus-width: 2px;
  --focus-offset: 3px;

  /* System C "Ledger": shared ruled header/footer + numbered sections */
  --ledger-cols: 25fr 20fr 17fr 15fr;  /* desktop cell starts 120 / 520 / 840 / 1100 inside the wrap */
  --ledger-line: var(--muted);         /* not --rule: at ~1.2:1 the frame disappears at a glance */
}

/* Ledger header/footer: cells split by 1px --ledger-line. Borders, not fills, so the frame survives forced colours. */
.ledger {
  display: grid;
  grid-template-columns: var(--ledger-cols);
  border-block: 1px solid var(--ledger-line);
}
.ledger > * + * { border-inline-start: 1px solid var(--ledger-line); }

/* Sections open on a full-width rule; number in the meta column, content from column 2. */
section {
  display: grid;
  grid-template-columns: var(--ledger-cols);
  border-top: 1px solid var(--ledger-line);
}
.section-no {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.content { grid-column: 2 / -1; }

@media (max-width: 48rem) {
  :root { --ledger-cols: 1fr auto; } /* wordmark cell + Menu cell */
  .content { grid-column: 1 / -1; }
}

/* Wine band (footer on both sites, Ideatives header): every foreground role maps to --family-on,
 * so ink, links, focus and ledger lines stay legible on the fill. --ledger-line is re-set because
 * it was resolved against :root's --muted. */
.band {
  background: var(--band);
  color: var(--family-on);
  --ink: var(--family-on);
  --ink-2: var(--family-on);
  --muted: var(--family-on);
  --accent: var(--family-on);
  --on-accent: var(--band);
  --focus: var(--family-on);
  --ledger-line: var(--family-on);
}

/* Focus: never removed (inputs included); color from brand. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* Reduced motion: everything off, smooth scroll included. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-ui: 0ms; --dur-reveal: 0ms; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}