/* The Sibs design tokens v2.1 — GENERATED by design/build-tokens.mjs from design/tokens.json + identity.json (canon 2026-08-29). Do not edit. */
/* Use semantic names (--sibs-bg, --sibs-text, --sibs-bro …). Primitives (--sibs-orange-500, --sibs-n1) exist for building new tokens only. Dark is canon; light applies under [data-theme="light"] or prefers-color-scheme: light. */

/* Fonts — self-hosted from design/v2/assets/fonts (OFL). Google Fonts is the alternative host. */
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-var-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-var-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Pixelify Sans';src:url('assets/fonts/pixelify-sans-var-latin.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Pixelify Sans';src:url('assets/fonts/pixelify-sans-var-latin-ext.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root {
  color-scheme: dark light;

  /* — primitives (colour-named) — */
  --sibs-n0: #000000;
  --sibs-n1: #161616;
  --sibs-n2: #262626;
  --sibs-n3: #353535;
  --sibs-n4: #393939;
  --sibs-n5: #525252;
  --sibs-n6: #6F6F6F;
  --sibs-n7: #8D8D8D;
  --sibs-n8: #C6C6C6;
  --sibs-n9: #F4F4F4;
  --sibs-n10: #FFFFFF;
  --sibs-orange-100: #FFDFCD;
  --sibs-orange-200: #FFBF9A;
  --sibs-orange-300: #FE9F68;
  --sibs-orange-400: #FE7F35;
  --sibs-orange-500: #FE5F03;
  --sibs-orange-600: #CB4C02;
  --sibs-orange-700: #7F3002;
  --sibs-orange-800: #331301;
  --sibs-orange-900: #190900;
  --sibs-orange-050: #FFEFE6;
  --sibs-blue-100: #D8E2F9;
  --sibs-blue-200: #B1C5F3;
  --sibs-blue-300: #89A9EC;
  --sibs-blue-400: #628CE6;
  --sibs-blue-500: #3B6FE0;
  --sibs-blue-600: #2F59B3;
  --sibs-blue-700: #1E3870;
  --sibs-blue-800: #0C162D;
  --sibs-blue-900: #060B16;
  --sibs-blue-050: #EBF1FC;
  --sibs-red-100: #F7D8D6;
  --sibs-red-200: #F0B0AC;
  --sibs-red-300: #E88983;
  --sibs-red-400: #E16159;
  --sibs-red-500: #D93A30;
  --sibs-red-600: #AE2E26;
  --sibs-red-700: #6C1D18;
  --sibs-red-800: #2B0C0A;
  --sibs-red-900: #160605;
  --sibs-red-050: #FBEBEA;
  --sibs-violet-100: #E5D8FC;
  --sibs-violet-200: #CBB0FA;
  --sibs-violet-300: #B289F7;
  --sibs-violet-400: #9861F5;
  --sibs-violet-500: #7E3AF2;
  --sibs-violet-600: #652EC2;
  --sibs-violet-700: #3F1D79;
  --sibs-violet-800: #261149;
  --sibs-violet-900: #0D0618;
  --sibs-violet-050: #F2EBFE;
  --sibs-green-100: #D8F1DF;
  --sibs-green-200: #B2E3BF;
  --sibs-green-300: #8BD49F;
  --sibs-green-400: #65C67F;
  --sibs-green-500: #3EB85F;
  --sibs-green-600: #32934C;
  --sibs-green-700: #1F5C30;
  --sibs-green-800: #0C2513;
  --sibs-green-900: #061209;
  --sibs-green-050: #ECF8EF;

  /* — fonts — */
  --sibs-font-sans: 'DM Sans', system-ui, sans-serif;
  --sibs-font-pixel: 'Pixelify Sans', 'Courier New', monospace;
  --sibs-font-ink: Caveat, cursive;
  --sibs-font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* — semantic colours · dark (canon) — */
  --sibs-bg: #161616; /* Page / app background. */
  --sibs-surface: #262626; /* Raised layer: cards, panels, chips (layer-01). */
  --sibs-surface-2: #393939; /* Second layer / tertiary fills (layer-02). */
  --sibs-hover: #353535; /* Hover / active layer. */
  --sibs-border: #393939; /* Resting border on cards and controls. */
  --sibs-border-strong: #6F6F6F; /* Hover outline / strong divider. */
  --sibs-border-muted: #525252; /* Disabled / decorative border. */
  --sibs-text: #F4F4F4; /* Primary text and icons. */
  --sibs-text-2: #C6C6C6; /* Secondary text. */
  --sibs-text-3: #8D8D8D; /* Helper / meta text (AA on bg). */
  --sibs-text-off: #6F6F6F; /* Placeholder / disabled text — large text only. */
  --sibs-bro: #FE5F03; /* BroSib / Capture. Also the brand identity colour. */
  --sibs-bro-on: #000000; /* Text on a BroSib fill — always black. */
  --sibs-bro-deep: #CB4C02; /* BroSib hover / pressed. */
  --sibs-bro-soft: #331301; /* BroSib tinted background. */
  --sibs-bigsis: #3B6FE0; /* BigSib / Memory. */
  --sibs-bigsis-on: #FFFFFF; /* Text on a BigSib fill — white (4.63:1). */
  --sibs-bigsis-deep: #2F59B3; /* BigSib hover / pressed. */
  --sibs-bigsis-soft: #0C162D; /* BigSib tinted background. */
  --sibs-lilsis: #D93A30; /* LilSib / Converse. */
  --sibs-lilsis-on: #FFFFFF; /* Text on a LilSib fill — white (4.57:1). */
  --sibs-lilsis-deep: #AE2E26; /* LilSib hover / pressed. */
  --sibs-lilsis-soft: #2B0C0A; /* LilSib tinted background. */
  --sibs-family: #7E3AF2; /* Shared family violet — the primary action, BigSib's robe, BroSib's gloves. Belongs to no single Sib. */
  --sibs-family-on: #F4F4F4; /* Text on a family fill — white. */
  --sibs-family-deep: #652EC2; /* Primary action hover / pressed. */
  --sibs-family-soft: #261149; /* Family tinted background. */
  --sibs-done: #3EB85F; /* Done, remembered, live, earned. A state, not a Sib. */
  --sibs-done-on: #000000; /* Text on a done fill — always black. */
  --sibs-done-deep: #32934C; /* Done hover. */
  --sibs-done-soft: #0C2513; /* Done tinted background. */
  --sibs-accent: var(--sibs-bro); /* The Sib in play. Defaults to BroSib; data-sib=bro|bigsis|lilsis re-points it, and data-surface=family points it at family. The lockup and contextual chrome read only this. */
  --sibs-shell: #393939; /* The Harness — the branded product shell; the Sibs act over the gate. Its Sib-icon tile. */

  /* — component — */
  --sibs-component-button-primary: var(--sibs-family); /* Primary CTA fill = family violet. */
  --sibs-component-button-primary-hover: var(--sibs-family-deep);
  --sibs-component-button-primary-off: var(--sibs-border-muted); /* Disabled primary fill. */
  --sibs-component-card: var(--sibs-bg); /* Memo/Task card rest fill sits on bg with a border. */
  --sibs-component-card-hover: var(--sibs-surface-2);
  --sibs-component-card-done: var(--sibs-surface); /* Finalized / remembered / completed card. */
  --sibs-component-chip: var(--sibs-surface-2); /* Tag chip rest fill. */
  --sibs-component-chip-done: var(--sibs-done);

  /* — type (font shorthand + tracking) — */
  --sibs-type-display: 600 96px/96px 'DM Sans', system-ui, sans-serif; --sibs-type-display-tracking: -2.88px;
  --sibs-type-headline: 600 64px/57.6px 'DM Sans', system-ui, sans-serif; --sibs-type-headline-tracking: -1.92px;
  --sibs-type-section: 600 32px/41.664px 'DM Sans', system-ui, sans-serif; --sibs-type-section-tracking: -0.96px;
  --sibs-type-supporting: 600 20px/26px 'DM Sans', system-ui, sans-serif; --sibs-type-supporting-tracking: -0.6px;
  --sibs-type-body: 400 18px/27px 'DM Sans', system-ui, sans-serif;
  --sibs-type-nav: 500 14px/21px 'DM Sans', system-ui, sans-serif;
  --sibs-type-caption: 400 12px/16px 'DM Sans', system-ui, sans-serif;
  --sibs-type-card-title: 600 16px/20.832px 'DM Sans', system-ui, sans-serif;
  --sibs-type-button: 600 14px/24px 'DM Sans', system-ui, sans-serif;
  --sibs-type-small: 400 12px/16.8px 'DM Sans', system-ui, sans-serif; /* Supporting text inside cards. */
  --sibs-type-chip: 500 12px/16px 'DM Sans', system-ui, sans-serif; --sibs-type-chip-tracking: 0.24px; /* Uppercase. DM Sans stands in for the source's undocumented Formular. */
  --sibs-type-pixel: 500 40px/40px 'Pixelify Sans', 'Courier New', monospace; /* Display pixel accent. Never below 20px for values. */
  --sibs-type-eyebrow: 500 14px/16px 'Pixelify Sans', 'Courier New', monospace; /* Section eyebrows and the Memory-chip count — the only sub-20px Pixelify uses. */
  --sibs-type-wordmark: 500 20px/20px 'Pixelify Sans', 'Courier New', monospace; /* The word sibs in app chrome — the product lockup register; the mark matches it at 1.0em. */

  /* — space · radius · size · motion — */
  --sibs-space-1: 4px;
  --sibs-space-2: 8px;
  --sibs-space-3: 12px;
  --sibs-space-4: 16px;
  --sibs-space-5: 20px;
  --sibs-space-6: 24px;
  --sibs-space-8: 32px;
  --sibs-space-10: 40px;
  --sibs-space-16: 64px;
  --sibs-radius-chip: 4px; /* Chips, Sib icons, previews. */
  --sibs-radius-control: 8px; /* Buttons, tabs, cards. */
  --sibs-size-control: 48px; /* Buttons and tabs. */
  --sibs-size-nav-item: 40px;
  --sibs-size-chip: 32px; /* Utility chips, language select, Memory chip, Sib icon tile. */
  --sibs-size-tag: 24px; /* Tag chip height. */
  --sibs-size-icon: 16px;
  --sibs-size-icon-lg: 20px;
  --sibs-size-preview: 64px; /* Sib preview (sprite) tile. */
  --sibs-size-progress: 63px; /* Progress bar width — never shortened. */
  --sibs-size-sidebar: 240px;
  --sibs-size-memo-card-w: 214px;
  --sibs-size-memo-card-h: 186px;
  --sibs-size-job-card-w: 404px;
  --sibs-size-job-card-h: 104px;
  --sibs-size-hit: 44px; /* Minimum touch target on mobile. */
  --sibs-size-mark-min: 24px; /* Offset mark floor when it stands alone — a 2px module on the 12-module grid. A 12px mark is permitted only inside a tile that provides the affordance: the favicon and the 20px Sib icon. */
  --sibs-size-lockup-min: 20px; /* Lockup floor, measured on the word; the square mark matches it at 1.0em. */
  --sibs-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --sibs-motion-fast: 100ms;
  --sibs-motion-base: 160ms;
  --sibs-motion-slow: 240ms;
  --sibs-motion-loop: 1600ms; /* Ambient loops (runners, pulses); brand film may run to ~3s. */

  /* — DEPRECATED aliases (v1/v2.0 names) — migrate, then delete in v3 — */
  --sibs-canvas: var(--sibs-bg);
  --sibs-paper: var(--sibs-surface);
  --sibs-card: var(--sibs-surface); /* v1 raised card → surface */
  --sibs-hair: var(--sibs-hover); /* v1 hairline separator → hover (softer than border) */
  --sibs-ink: var(--sibs-text);
  --sibs-ink2: var(--sibs-text-2);
  --sibs-muted: var(--sibs-text-3);
  --sibs-ok: var(--sibs-done);
  --sibs-danger: var(--sibs-lilsis);
  --sibs-warn: #E2B45E; /* Provisional, NOT canon — no warning colour is defined. */
  --sibs-gold: var(--sibs-family);
  --sibs-goldVivid: var(--sibs-family);
  --sibs-background: var(--sibs-bg);
  --sibs-layer-01: var(--sibs-surface);
  --sibs-layer-02: var(--sibs-surface-2);
  --sibs-layer-hover: var(--sibs-hover);
  --sibs-border-subtle: var(--sibs-border-muted);
  --sibs-text-primary: var(--sibs-text);
  --sibs-text-secondary: var(--sibs-text-2);
  --sibs-text-helper: var(--sibs-text-3);
  --sibs-text-placeholder: var(--sibs-text-off);
  --sibs-mine-shaft: #393939;
  --sibs-violet: var(--sibs-family);
  --sibs-success: var(--sibs-done);
}

[data-theme="light"] {
  --sibs-bg: #FFFFFF;
  --sibs-surface: #F4F4F4;
  --sibs-surface-2: #FFFFFF;
  --sibs-hover: #F4F4F4;
  --sibs-border: #C6C6C6;
  --sibs-border-strong: #8D8D8D;
  --sibs-border-muted: #C6C6C6;
  --sibs-text: #161616;
  --sibs-text-2: #525252;
  --sibs-text-3: #6F6F6F;
  --sibs-text-off: #8D8D8D;
  --sibs-bro: #CB4C02;
  --sibs-bro-on: #000000;
  --sibs-bro-deep: #7F3002;
  --sibs-bro-soft: #FFEFE6;
  --sibs-bigsis: #3B6FE0;
  --sibs-bigsis-on: #FFFFFF;
  --sibs-bigsis-deep: #1E3870;
  --sibs-bigsis-soft: #EBF1FC;
  --sibs-lilsis: #D93A30;
  --sibs-lilsis-on: #FFFFFF;
  --sibs-lilsis-deep: #6C1D18;
  --sibs-lilsis-soft: #FBEBEA;
  --sibs-family: #7E3AF2;
  --sibs-family-on: #FFFFFF;
  --sibs-family-deep: #3F1D79;
  --sibs-family-soft: #F2EBFE;
  --sibs-done: #32934C;
  --sibs-done-on: #000000;
  --sibs-done-deep: #1F5C30;
  --sibs-done-soft: #ECF8EF;
  --sibs-shell: #C6C6C6;
  --sibs-warn: #8F620D;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --sibs-bg: #FFFFFF;
    --sibs-surface: #F4F4F4;
    --sibs-surface-2: #FFFFFF;
    --sibs-hover: #F4F4F4;
    --sibs-border: #C6C6C6;
    --sibs-border-strong: #8D8D8D;
    --sibs-border-muted: #C6C6C6;
    --sibs-text: #161616;
    --sibs-text-2: #525252;
    --sibs-text-3: #6F6F6F;
    --sibs-text-off: #8D8D8D;
    --sibs-bro: #CB4C02;
    --sibs-bro-on: #000000;
    --sibs-bro-deep: #7F3002;
    --sibs-bro-soft: #FFEFE6;
    --sibs-bigsis: #3B6FE0;
    --sibs-bigsis-on: #FFFFFF;
    --sibs-bigsis-deep: #1E3870;
    --sibs-bigsis-soft: #EBF1FC;
    --sibs-lilsis: #D93A30;
    --sibs-lilsis-on: #FFFFFF;
    --sibs-lilsis-deep: #6C1D18;
    --sibs-lilsis-soft: #FBEBEA;
    --sibs-family: #7E3AF2;
    --sibs-family-on: #FFFFFF;
    --sibs-family-deep: #3F1D79;
    --sibs-family-soft: #F2EBFE;
    --sibs-done: #32934C;
    --sibs-done-on: #000000;
    --sibs-done-deep: #1F5C30;
    --sibs-done-soft: #ECF8EF;
    --sibs-shell: #C6C6C6;
    --sibs-warn: #8F620D;
  }
}

/* The Sib in play re-points the accent. Shared surfaces take family violet. */
[data-sib="bro"]     { --sibs-accent: var(--sibs-bro); }
[data-sib="bigsis"]  { --sibs-accent: var(--sibs-bigsis); }
[data-sib="lilsis"]  { --sibs-accent: var(--sibs-lilsis); }
[data-surface="family"] { --sibs-accent: var(--sibs-family); }

html, body { background: var(--sibs-bg); color: var(--sibs-text); font: var(--sibs-type-body); -webkit-font-smoothing: antialiased; }

/* The lockup — One word, one colour, one mark. Mark height = the word's FULL height (the mark is square, so the retired cap-height rule does not apply); gap = 0.34 x word size; the whole lockup is currentColor reading --sibs-accent. */
.sibs-lockup { --size: var(--sibs-lockup-size, 20px); display: inline-flex; align-items: center; gap: calc(var(--size) * 0.3333); color: var(--sibs-accent); font-size: var(--size); line-height: 1; text-decoration: none; white-space: nowrap; }
.sibs-lockup svg { display: block; width: auto; fill: currentColor; }
.sibs-lockup--product { font-family: var(--sibs-font-pixel); font-weight: 500; text-transform: lowercase; }
.sibs-lockup--product svg { height: calc(var(--size) * 1); shape-rendering: crispEdges; }
.sibs-lockup--brand { font-family: var(--sibs-font-sans); font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; }
.sibs-lockup--brand svg { height: calc(var(--size) * 1); shape-rendering: crispEdges; }
.sibs-lockup--on-bro, .sibs-lockup--on-done { color: var(--sibs-n0); }   /* black lockup on orange / green */
.sibs-lockup--on-family, .sibs-lockup--on-bigsis, .sibs-lockup--on-lilsis { color: var(--sibs-n10); }   /* white lockup on violet / blue / red */

/* Pixel icons: inline SVG from icons.json, currentColor, crisp edges */
.sibs-icon { display: inline-block; vertical-align: middle; fill: currentColor; shape-rendering: crispEdges; }

/* Sprites (lo-fi cast) are never anti-aliased; the painted cast (hi-fi) is never pixelated */
.sibs-sprite { image-rendering: pixelated; }