/* Hegetic design tokens: one file, used by the site, the sector pages, the portfolio and the offer.
   Colours from the brand concept (p.6), extended with the neutrals an interface needs. Spacing and type follow the
   logo's rule: each step is the previous one × φ (1.618). Fonts: Source Sans 3 (the wordmark's face, Greek included),
   Source Serif 4 italic for the human voice, JetBrains Mono for system and data moments.
   Load with:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300..900&family=Source+Serif+4:ital,opsz,wght@1,8..60,300..600&family=JetBrains+Mono:wght@400;500&display=swap"> */
:root {
  /* brand colours (p.6) */
  --ink: #0E1117;        /* wordmark, headlines, dark sections */
  --ember: #FF5A2B;      /* the node: one accent, solid shapes and the one action per view. Never text on plaster. */
  --plaster: #EDEEEA;    /* background, pages */
  --stone: #8A919C;      /* captions on ink, large utility text */
  --aegean: #2F5D7C;     /* construction grid and labels only */

  /* interface neutrals (added) */
  --paper: #F6F6F3;      /* raised surface on plaster */
  --line: #D8D9D4;       /* hairlines on plaster */
  --grid: rgba(47, 93, 124, .10);   /* the Aegean grid, as a background */
  --stone-text: #5D646F; /* small text on plaster (AA: 5.1:1; Stone is only 2.7:1 there) */
  --ink-2: #161A22;      /* card on ink */
  --ink-3: #222833;      /* raised card on ink, hairlines on ink */
  --ink-line: rgba(237, 238, 234, .12);
  --ember-glow: rgba(255, 90, 43, .16);
  --ok: #3FA672;         /* system status "live" only */

  /* type */
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* φ scale (px): 6 · 10 · 16 · 26 · 42 · 68 · 110 · 178 */
  --s1: 6px; --s2: 10px; --s3: 16px; --s4: 26px; --s5: 42px; --s6: 68px; --s7: 110px; --s8: 178px;
  --t-xs: 12px; --t-s: 14px; --t-m: 17px; --t-l: 21px;
  --t-xl: clamp(26px, 2.4vw, 34px);
  --t-2xl: clamp(34px, 4.2vw, 56px);
  --t-3xl: clamp(42px, 6.8vw, 96px);
  --t-4xl: clamp(56px, 11vw, 178px);

  --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-xl: 26px; --pill: 999px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 42px);

  /* motion: calm, decisive. Nothing bounces. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s; --t-mid: .42s; --t-slow: .68s;
}

/* ---------- sector worlds (2026-10-22) ----------
   Each sector brand has its own ground, deep, mid and light colour, a motif and a shape language. Ember stays the
   node in every sector. Set data-sector="stays|keys|ledger|care|shield" on any element to switch it into that world;
   components read --s-ground, --s-deep, --s-mid, --s-light and the shape radii --s-media, --s-card, --s-btn.
   Text pairs: deep on ground ≥ 7.7:1, light on deep ≥ 6.7:1. Mid is for motif lines only. */
:root {
  --stays-ground: #EFE7D8; --stays-deep: #0F4C5C; --stays-mid: #5E8F8F; --stays-light: #CFE3DE;   /* sand · sea · shallows · foam */
  --keys-ground: #E8ECE7;  --keys-deep: #24453A;  --keys-mid: #7E9A8B;  --keys-light: #D3DFD5;    /* draft · cypress · sage · lichen */
  --ledger-ground: #F3EEDF; --ledger-deep: #1F3864; --ledger-mid: #7F95BD; --ledger-light: #D9E1EF; /* cream · ledger blue · rule · ruled */
  --care-ground: #ECEBF4;  --care-deep: #463C7A;  --care-mid: #958CC4;  --care-light: #DAD5EE;     /* mist · calm · lilac · haze */
  --shield-ground: #0E1117; --shield-deep: #161A22; --shield-mid: #3D6B4A; --shield-light: #8BD17C; /* night · console · gate · signal */
}
[data-sector="stays"]  { --s-ground: var(--stays-ground);  --s-deep: var(--stays-deep);  --s-mid: var(--stays-mid);  --s-light: var(--stays-light);  --s-media: 999px 999px 18px 18px; --s-card: 22px; --s-btn: 999px; }
[data-sector="keys"]   { --s-ground: var(--keys-ground);   --s-deep: var(--keys-deep);   --s-mid: var(--keys-mid);   --s-light: var(--keys-light);   --s-media: 3px; --s-card: 3px; --s-btn: 3px; }
[data-sector="ledger"] { --s-ground: var(--ledger-ground); --s-deep: var(--ledger-deep); --s-mid: var(--ledger-mid); --s-light: var(--ledger-light); --s-media: 0; --s-card: 0; --s-btn: 0; }
[data-sector="care"]   { --s-ground: var(--care-ground);   --s-deep: var(--care-deep);   --s-mid: var(--care-mid);   --s-light: var(--care-light);   --s-media: 32px; --s-card: 32px; --s-btn: 999px; }
[data-sector="shield"] { --s-ground: var(--shield-ground); --s-deep: var(--shield-deep); --s-mid: var(--shield-mid); --s-light: var(--shield-light); --s-media: 8px; --s-card: 8px; --s-btn: 6px; }