/* Wonib design tokens: the brand guidelines as code (Wonib Brand Guidelines, October 2026). */
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url('/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 500; font-display: swap; src: url('/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-display: swap; src: url('/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 700; font-display: swap; src: url('/fonts/instrument-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans Devanagari'; font-weight: 400; font-display: swap; src: url('/fonts/noto-sans-devanagari-devanagari-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans Devanagari'; font-weight: 600; font-display: swap; src: url('/fonts/noto-sans-devanagari-devanagari-600-normal.woff2') format('woff2'); }
:root {
  /* Colour: mostly Paper and White. Ink for text. Lime is the mark and one highlight: the one live thing. */
  --wn-lime: #C6FF00; --wn-ink: #122E27; --wn-moss: #3E6B5A; --wn-mist: #EEF5D6; --wn-paper: #F5F4EC; --wn-slate: #52605B; --wn-white: #FFFFFF;
  --wn-line: #DCDCD3; --wn-line-strong: #7E8680; /* control borders: 3:1 on white and paper (was #B9BDB5, 1.9:1) */
  --wn-raised: #ECEBE1; --wn-on-lime: #122E27; --wn-deep: #122E27; --wn-on-deep: #F5F4EC;
  --wn-green: #2F6B3A; --wn-green-tint: #E4F5E9; --wn-amber: #8A5A00; --wn-amber-tint: #FFF3DD; --wn-sky: #0A66C2; --wn-sky-tint: #E6F0FB;
  /* Type: Instrument Sans for words (600 headlines, 400 body, 700 wordmark; nothing lighter). IBM Plex Mono for numbers. */
  --wn-font: 'Instrument Sans', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --wn-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wn-display: 600 34px/40px var(--wn-font); --wn-title: 600 28px/36px var(--wn-font); --wn-heading: 600 22px/28px var(--wn-font);
  --wn-subheading: 600 17px/24px var(--wn-font); --wn-body: 400 15px/22px var(--wn-font); --wn-label: 600 13px/18px var(--wn-font); --wn-caption: 500 12px/16px var(--wn-mono);
  --wn-button: 500 14px/20px var(--wn-font); /* button labels, as drawn in the guidelines */
  /* The guidelines' stepped wipe for buttons: Lime on the primary CTA, Ink on the secondary (Paper in dark mode). */
  --wn-wipe-lime: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20220%2040%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%23C6FF00%22%20d=%22M0%200H112V10H108V20H104V30H100V40H0Z%20M114%2010h4v10h-4z%20M109%2020h4v10h-4z%20M106%2030h4v10h-4z%22/%3E%3C/svg%3E");
  --wn-wipe-strong: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20220%2040%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%23122E27%22%20d=%22M0%200H112V10H108V20H104V30H100V40H0Z%20M114%2010h4v10h-4z%20M109%2020h4v10h-4z%20M106%2030h4v10h-4z%22/%3E%3C/svg%3E");
  /* Space and shape: everything on 16 px; steps are square, in 16, 32 or 64. */
  --wn-s1: 4px; --wn-s2: 8px; --wn-s3: 12px; --wn-s4: 16px; --wn-s6: 24px; --wn-s8: 32px; --wn-s12: 48px; --wn-s16: 64px;
  --wn-r: 0px; --wn-r-control: 2px; --wn-r-card: 2px;
  /* Motion: steps, not glides (progress fills in blocks). */
  --wn-ease: steps(4, end); --wn-ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1); --wn-t-press: 120ms; --wn-t-color: 160ms; --wn-t-move: 240ms;
  --wn-tap: 44px; --wn-tap-compact: 36px; --wn-tap-min: 24px;
  /* names the theme layer uses */
  --wn-accent: var(--wn-ink); --wn-accent-hover: var(--wn-moss); --wn-accent-text: var(--wn-ink); --wn-accent-soft: var(--wn-mist);
  --wn-bg: var(--wn-paper); --wn-shadow: none; --wn-shadow-hover: none; --wn-radius: var(--wn-r-card); --wn-glass: rgba(245, 244, 236, 0.92); --wn-sidebar: 236px;
}

/* Dark mode (owner, 26 Oct 2026): Light is the default; Dark is the option, set with data-theme="dark" on <html>.
   Ink surfaces, Paper text, Lime the one accent. Text on Lime and the dark tile keep fixed colours. */
:root[data-theme="dark"] {
  --wn-ink: #F5F4EC; --wn-white: #1B3C33; --wn-paper: #122E27; --wn-slate: #AEBDB6; --wn-mist: #2B4E43; --wn-moss: #D9E4CF;
  --wn-line: #2E5045; --wn-line-strong: #6F8A80; --wn-raised: #21443A; --wn-deep: #0B1F1A;
  --wn-green: #8FD19E; --wn-green-tint: #1F3F30; --wn-amber: #E8B95C; --wn-amber-tint: #3A3320; --wn-sky: #8EC2F5; --wn-sky-tint: #1C3550;
  --wn-glass: rgba(18, 46, 39, 0.92);
  --wn-wipe-strong: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20220%2040%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%23F5F4EC%22%20d=%22M0%200H112V10H108V20H104V30H100V40H0Z%20M114%2010h4v10h-4z%20M109%2020h4v10h-4z%20M106%2030h4v10h-4z%22/%3E%3C/svg%3E");
}