/* Whitespace — brand tokens
   ─────────────────────────────────────────────────────────────────────
   The single definition of the brand's CSS custom properties for the
   skill folder. SKILL.md §5–§7 document these values; example.html and
   index.html link this file instead of repeating them. Change a value
   here, then mirror it in SKILL.md (and in the component library's
   foundations/_tokens.scss, which carries the same palette). */

/* ── Fonts ── */
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Regular-subset.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-SemiBold-subset.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  /* Serif italic — the quote voice in long-form text only (SKILL.md §7) */
  font-family: "Suisse Works";
  src: url("fonts/SuisseWorks-RegularItalic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ── Brand palette ── */
  --color-ws-blue:    #215da6;
  --color-ws-orange:  #ff5100;
  --color-ws-yellow:  #f7b018;
  --color-ws-gray:    #f5f5f5;
  --color-logo-space: rgba(0, 0, 90, 0.1); /* logo counter-forms — never white */

  /* ── Extended grays ── */
  --color-white:     #ffffff;
  --color-white-80:  rgba(255, 255, 255, 0.8);
  --color-grey-100:  #f5f5f5;
  --color-grey-200:  #d9d9d9;
  --color-grey-300:  #8c8c8c;
  --color-grey-400:  #404040;
  --color-dark:      #212121;

  /* ── Theme palettes (OKLCH-normalised 2026-08-12: one hue per family,
        equal lightness per step across families — L 92.2 / 81.6 / 69.2 /
        48.4 / 23.6) ── */
  --color-green-dawn:      #d4ebe6;
  --color-green-morning:   #9fcec5;
  --color-green-afternoon: #62ac9f;
  --color-green-evening:   #006e62;
  --color-green-nightfall: #002520;

  --color-purple-dawn:      #e7e3ed;
  --color-purple-morning:   #c7bed3;
  --color-purple-afternoon: #a395b3;
  --color-purple-evening:   #67567b;
  --color-purple-nightfall: #27123b;

  --color-beige-dawn:      #e6e6dc;
  --color-beige-morning:   #c4c4b9;
  --color-beige-afternoon: #9d9d93;
  --color-beige-evening:   #5f5f56;
  --color-beige-nightfall: #1f1f17;

  /* ── 2026 additions (whitespace.se redesign) ── */
  --color-ink:        #06231e; /* the site's primary dark: text, buttons, dark plates */
  --color-brown:      #6a5239; /* paired with purple in one homepage entrance */
  --color-cappuccino: #d6c3b0; /* lighter brown — neutral gradient scheme */

  /* ── Semantic ── */
  --color-bg:          #ffffff;
  --color-bg-subtle:   var(--color-ws-gray);
  --color-text:        #111111;
  --color-text-muted:  #5d6265;
  --color-border:      #e6e6e6;
  --color-border-dark: #b3b3b3;
  --color-divider:     #e6e6e6;

  /* ── Typography ── */
  --font-sans:  "Suisse Intl", system-ui, -apple-system, sans-serif;
  --font-serif: "Suisse Works", Georgia, "Times New Roman", serif;

  /* UI / marketing scale (SKILL.md §6) */
  --size--2: clamp(0.78rem,  0.75rem + 0.18vw, 0.88rem);
  --size--1: clamp(0.94rem,  0.88rem + 0.30vw, 1.10rem);
  --size-0:  clamp(1.13rem,  1.03rem + 0.45vw, 1.38rem);
  --size-1:  clamp(1.35rem,  1.22rem + 0.67vw, 1.72rem);
  --size-2:  clamp(1.62rem,  1.43rem + 0.96vw, 2.15rem);
  --size-3:  clamp(1.94rem,  1.67rem + 1.35vw, 2.69rem);
  --size-4:  clamp(2.33rem,  1.96rem + 1.86vw, 3.36rem);
  --size-5:  clamp(1.80rem,  1.29rem + 2.54vw, 4.20rem);

  /* Long-form / prose scale (SKILL.md §7) */
  --prose-max:          45rem;
  --prose-size-body:    clamp(1rem,      0.94rem + 0.24vw, 1.125rem);
  --prose-size-lead:    clamp(1.0625rem, 0.98rem + 0.36vw, 1.25rem);
  --prose-size-h2:      clamp(1.125rem,  0.9525rem + 0.72vw, 1.6875rem);
  --prose-size-h3:      var(--prose-size-lead);
  --prose-size-small:   0.9375rem;
  --prose-leading-body: 1.6;
  --prose-leading-lead: 1.5;
  --prose-leading-h2:   1.15;
  --prose-leading-h3:   1.3;
  --prose-color-text:   var(--color-text);
  --prose-color-soft:   rgba(17, 17, 17, 0.8);
  --prose-color-rule:   var(--color-beige-morning);
  --prose-color-line:   var(--color-beige-afternoon);
  --prose-color-plate:  var(--color-beige-morning);

  /* ── Spacing (SKILL.md §8) ── */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.46rem + 0.22vw, 0.63rem);
  --space-xs:  clamp(0.75rem, 0.69rem + 0.33vw, 0.94rem);
  --space-s:   clamp(1.00rem, 0.91rem + 0.43vw, 1.25rem);
  --space-m:   clamp(1.50rem, 1.37rem + 0.65vw, 1.88rem);
  --space-l:   clamp(2.00rem, 1.83rem + 0.87vw, 2.50rem);
  --space-xl:  clamp(3.00rem, 2.74rem + 1.30vw, 3.75rem);
  --space-2xl: clamp(4.00rem, 3.65rem + 1.74vw, 5.00rem);
  --space-3xl: clamp(6.00rem, 5.48rem + 2.61vw, 7.50rem);

  /* ── Layout ── */
  --max-width:        75rem;
  --max-width-narrow: 64rem;
  --max-width-text:   45rem;
  --gutter:           2.5rem;
}