/* ═══════════════════════════════════════════════════════════════════
   Inner Stance design tokens
   Base: extracted from https://assessment.innerstance.com (2026-10-02).
   Colour + type updated (2026-10-28) to the INN 2.0 style of
   https://online.innerstance.com/straight-line-leadership/ :
   pure ink background, no grey surfaces, yellow accent kept from the assessment,
   Instrument Serif headlines, Instrument Sans body.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Colour: dark (default) */
  --color-bg-dark: #161615;
  --color-surface-dark: #161615;   /* was #282826: no grey surfaces */
  --color-panel-dark: #1c1c1b;     /* ink-2 */
  --color-text-dark: #f4f4f2;
  --color-text-dark-muted: #a6a6a6;
  --color-accent-dark: #ffc600;    /* assessment yellow */
  --color-on-accent-dark: #161615;
  --color-border-dark: rgba(244,244,242,.14); /* line-dark */

  /* Colour: light ("paper") bands */
  --color-bg-light: #e8e8e8;
  --color-surface-light: #dededd;
  --color-panel-light: #d5d5d3;
  --color-text-light: #161615;
  --color-text-light-muted: #63635e;
  --color-accent-light: #c1a840;
  --color-on-accent-light: #161615;
  --color-border-light: #cbcbc6;

  --color-focus: #ffc600;
  --color-ink: #161615;
  --color-paper: #f4f4f2;
  --color-stone: #e8e8e8;
  --color-mist: #a6a6a6;
  --color-dim: #6f6f6b;
  --line-dark: rgba(244,244,242,.14);
  --line-light: rgba(22,22,21,.14);

  /* Type */
  --font-display: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fw-title: 500;

  --fs-caption: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-small:   clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --fs-body:    clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --fs-h6:      clamp(1.05rem, 1.00rem + 0.25vw, 1.20rem);
  --fs-h5:      clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --fs-h4:      clamp(1.40rem, 1.28rem + 0.60vw, 1.80rem);
  --fs-h3:      clamp(1.70rem, 1.50rem + 1.00vw, 2.35rem);
  --fs-h2:      clamp(2.10rem, 1.75rem + 1.75vw, 3.20rem);
  --fs-h1:      clamp(2.70rem, 2.10rem + 3.00vw, 4.60rem);

  --lh-display: 1.05;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0em;
  --ls-caps: 0.03em;

  /* Space + layout */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --section-py: clamp(3rem, 2.0rem + 5vw, 6rem);
  --container-narrow: 56rem;
  --container-wide: 79rem;
  --col-gap: clamp(40px, 6vw, 88px);
  --measure: 68ch;
  --gutter: clamp(1rem, 0.6rem + 1vw, 1.5rem);

  /* Shape */
  --radius: 0;
  --radius-btn: 3px;
  --radius-btn-x: 3px;
  --radius-card: 10px;
  --radius-md: 3px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-thick: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Depth */
  --scrim: linear-gradient(to top,
    rgba(8,8,7,.94) 0%, rgba(8,8,7,.78) 26%,
    rgba(8,8,7,.34) 58%, rgba(8,8,7,.05) 100%);
  --shadow-card: 0 1px 2px rgba(0,0,0,.04);
  --shadow-hover: 0 2px 10px rgba(0,0,0,.05);
  --z-base: 0;
  --z-content: 1;
  --z-grain: 40;

  /* Motion */
  --duration: 180ms;
  --duration-slow: 540ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* screenIn / introIn / heroIn */
  --ease-draw: cubic-bezier(0.22, 1, 0.36, 1);       /* signature stroke draw */
}

/* Semantic aliases (dark is default, as on the assessment) */
:root,
[data-theme="dark"] {
  --color-bg: var(--color-bg-dark);
  --color-surface: var(--color-surface-dark);
  --color-panel: var(--color-panel-dark);
  --color-text: var(--color-text-dark);
  --color-text-muted: var(--color-text-dark-muted);
  --color-accent: var(--color-accent-dark);
  --color-on-accent: var(--color-on-accent-dark);
  --color-border: var(--color-border-dark);
}