/* GENERATED from tokens.json by scripts/build-tokens.mjs. Do not edit by hand:
   change tokens.json, then run `npm run build` in packages/brand. */
:root {
  --brand-name: "Lusolo";

  --color-bg: #F1EFEC;
  --color-mat: #F7F5F2;
  --color-card: #FCFBF9;
  --color-ink: #1D1C1E;
  --color-text-secondary: #5F595A;
  --color-text-muted: #6B6566;
  --color-hairline: #DFDAD4;
  --color-hover: #EBE8E4;
  --color-action: #1D1C1E;
  --color-on-action: #FCF9F8;
  --color-state-attention: #EC4A24;
  --color-state-attention-text: #B3300E;
  --color-state-waiting: #1D1C1E;
  --color-state-done: #1D1C1E;
  --color-state-info: #2A4BD7;
  --color-picture-lead: #2A4BD7;

  --font-display: "Sora", "DM Sans", system-ui, sans-serif;
  --font-display-weight: 600;
  --font-wordmark: "Sora", "DM Sans", system-ui, sans-serif;
  --font-wordmark-weight: 600;
  --font-ui: "DM Sans", system-ui, sans-serif;

  --text-label: 0.6875rem;
  --text-small: 0.8125rem;
  --text-body: 0.875rem;
  --text-lead: 1rem;
  --text-title: 1.375rem;
  --text-headline: 1.75rem;
  --text-display: 2.875rem;
  --text-moment: 4.5rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-control: 2px;
  --radius-card: 10px;
  --radius-pill: 999px;

  --stroke-line: 1.5px;
  --stroke-rule: 2px;
  --stroke-hairline: 0.5px;
  --stroke-cut: 3px;
  --stroke-icon: 1.5px;
  --stroke-icon-large: 2px;
  --stroke-bundle-poster: 2.5px;

  --state-dot-attention: 14px;
  --state-dot-base: 12px;
  --state-dot-done: 10px;
  --state-dot-ring: 1.5px;

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 360ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-exit: cubic-bezier(0.5, 0, 0.9, 0.4);
  --motion-bundle-stagger: 50ms;
  --motion-flow: 4000ms;
  --motion-shuttle: 1200ms;
}

/* Dark theme: explicit switch wins, otherwise follow the system. */
:root[data-theme="dark"] {
  --color-bg: #121113;
  --color-mat: #171618;
  --color-card: #1C1B1D;
  --color-ink: #F3EEEC;
  --color-text-secondary: #AAA2A1;
  --color-text-muted: #938C8D;
  --color-hairline: #353133;
  --color-hover: #29272A;
  --color-action: #DCD5D2;
  --color-on-action: #1C1B1D;
  --color-state-attention: #FF6A47;
  --color-state-attention-text: #FF7A5A;
  --color-state-waiting: #F3EEEC;
  --color-state-done: #F3EEEC;
  --color-state-info: #6F8BFF;
  --color-picture-lead: #6F8BFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121113;
    --color-mat: #171618;
    --color-card: #1C1B1D;
    --color-ink: #F3EEEC;
    --color-text-secondary: #AAA2A1;
    --color-text-muted: #938C8D;
    --color-hairline: #353133;
    --color-hover: #29272A;
    --color-action: #DCD5D2;
    --color-on-action: #1C1B1D;
    --color-state-attention: #FF6A47;
    --color-state-attention-text: #FF7A5A;
    --color-state-waiting: #F3EEEC;
    --color-state-done: #F3EEEC;
    --color-state-info: #6F8BFF;
    --color-picture-lead: #6F8BFF;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
}

/* Brand layer: posters, website, marketing. Never on a working screen of the product (coral is 1.02:1 to stateAttention). */
:root {
  --brand-ground: #F4F0EB;
  --brand-line: #1D1C1E;
  --brand-lead: #2A4BD7;
  --brand-second: #D9603B;
  --poster-paper: #F4F0EB;
  --poster-ink: #1D1C1E;
  --poster-cobalt: #2A4BD7;
  --poster-navy: #1F2A66;
  --poster-lilac: #B7B2F0;
  --poster-plum: #6E2E6B;
  --poster-coral: #D9603B;
}
:root[data-theme="dark"] {
  --brand-ground: #1A1918;
  --brand-line: #F1ECE6;
  --brand-lead: #6F8BFF;
  --brand-second: #EE7A55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-ground: #1A1918;
    --brand-line: #F1ECE6;
    --brand-lead: #6F8BFF;
    --brand-second: #EE7A55;
  }
}

/* UI glyphs (icons/glyph/*.svg) as mask images; paint them with currentColor. */
:root {
  --glyph-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cmask id='g2m16' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cline x1='7.75' y1='2' x2='7.75' y2='8' stroke='%23000' stroke-width='1.5' stroke-linecap='butt'/%3E%3Cline x1='16.25' y1='2' x2='16.25' y2='8' stroke='%23000' stroke-width='1.5' stroke-linecap='butt'/%3E%3C/mask%3E%3Cg mask='url(%23g2m16)'%3E%3Cpath d='M4.5 5 H19.5 A2.5 2.5 0 0 1 22 7.5 V10 H2 V7.5 A2.5 2.5 0 0 1 4.5 5 Z' fill='currentColor'/%3E%3C/g%3E%3Cmask id='g2m17' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cpath d='M4.5 5 H19.5 A2.5 2.5 0 0 1 22 7.5 V10 H2 V7.5 A2.5 2.5 0 0 1 4.5 5 Z' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23g2m17)'%3E%3Cline x1='7.75' y1='2' x2='7.75' y2='8' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt'/%3E%3Cline x1='16.25' y1='2' x2='16.25' y2='8' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt'/%3E%3C/g%3E%3Cpath d='M2.75 9 V17.75 A2.5 2.5 0 0 0 5.25 20.25 H18.75 A2.5 2.5 0 0 0 21.25 17.75 V9 ' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='14.5' r='1.1' fill='currentColor'/%3E%3Ccircle cx='12' cy='14.5' r='1.1' fill='currentColor'/%3E%3Ccircle cx='16' cy='14.5' r='1.1' fill='currentColor'/%3E%3C/svg%3E");
  --glyph-customers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cmask id='customers-glyph-cg1' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cg stroke='%23000' stroke-width='3'%3E%3Ccircle cx='8.5' cy='8' r='3.5' fill='%23000'/%3E%3Cpath d='M2 22 L2 20.5 A6.5 6.5 0 0 1 8.5 14 A6.5 6.5 0 0 1 15 20.5 L15 22 Z' fill='%23000'/%3E%3C/g%3E%3C/mask%3E%3Cg mask='url(%23customers-glyph-cg1)'%3E%3Ccircle cx='16.5' cy='6.75' r='2.75' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M16.5 11.75 A5.25 5.25 0 0 1 21.75 17 L21.75 22' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/g%3E%3Ccircle cx='8.5' cy='8' r='3.5' fill='currentColor'/%3E%3Cpath d='M2 22 L2 20.5 A6.5 6.5 0 0 1 8.5 14 A6.5 6.5 0 0 1 15 20.5 L15 22 Z' fill='currentColor'/%3E%3C/svg%3E");
  --glyph-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cmask id='done-gm1' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cpolyline points='7.75 12.25 10.75 15.25 16.25 9.25' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Cg mask='url(%23done-gm1)'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='currentColor'/%3E%3C/g%3E%3C/svg%3E");
  --glyph-messages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M5 10 H12 A3 3 0 0 1 15 13 V16 A3 3 0 0 1 12 19 H5 A3 3 0 0 1 2 16 V13 A3 3 0 0 1 5 10 Z M5 18 L9.5 18 L5 22.5 Z' fill='currentColor'/%3E%3Cmask id='g2k5' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cpath d='M5 10 H12 A3 3 0 0 1 15 13 V16 A3 3 0 0 1 12 19 H5 A3 3 0 0 1 2 16 V13 A3 3 0 0 1 5 10 Z M5 18 L9.5 18 L5 22.5 Z' fill='%23000' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/mask%3E%3Cg mask='url(%23g2k5)'%3E%3Cpath d='M11.75 2.75 H18.25 A3 3 0 0 1 21.25 5.75 V13.25 H11.75 A3 3 0 0 1 8.75 10.25 V5.75 A3 3 0 0 1 11.75 2.75 Z ' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --glyph-money: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cmask id='money-glyph-mg1' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Ccircle cx='9.5' cy='9' r='2.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/mask%3E%3Cg mask='url(%23money-glyph-mg1)'%3E%3Crect x='2' y='4' width='15' height='10' fill='currentColor'/%3E%3C/g%3E%3Cmask id='money-glyph-mg2' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Crect x='2' y='4' width='15' height='10' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23money-glyph-mg2)'%3E%3Ccircle cx='9.5' cy='9' r='2.25' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/g%3E%3Cpath d='M18.75 6 L18.75 14.5 A1.25 1.25 0 0 1 17.5 15.75 L4 15.75 M21.75 9 L21.75 14.5 A4.25 4.25 0 0 1 17.5 18.75 L7 18.75 ' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --glyph-needs-you: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cmask id='needs-you-gm1' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cline x1='12' y1='7.5' x2='12' y2='12.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.25' r='1.35' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23needs-you-gm1)' class='state-solid'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='currentColor'/%3E%3C/g%3E%3C/svg%3E");
  --glyph-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M2.2 9.3 L9 2.75 L21.25 2.75 L21.25 15 L14.7 21.8' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3Cpath d='M14.7 9.3 L21.25 2.75' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3Cmask id='orders-glyph-og1' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cpath d='M7.75 8 L7.75 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3Cpath d='M10.75 8 L10.75 14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/mask%3E%3Cg mask='url(%23orders-glyph-og1)'%3E%3Crect x='2' y='9' width='13' height='13' fill='currentColor'/%3E%3C/g%3E%3Cmask id='orders-glyph-og2' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Crect x='2' y='9' width='13' height='13' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23orders-glyph-og2)'%3E%3Cpath d='M7.75 8 L7.75 14' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3Cpath d='M10.75 8 L10.75 14' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/g%3E%3C/svg%3E");
  --glyph-posts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cmask id='g2k26' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cpath d='M17.5 21.5 L13.25 17.25 A3.01 3.01 0 0 1 13.25 13 A3.01 3.01 0 0 1 17.5 13 A3.01 3.01 0 0 1 21.75 13 A3.01 3.01 0 0 1 21.75 17.25 Z' fill='%23000' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/mask%3E%3Cg mask='url(%23g2k26)'%3E%3CclipPath id='g2c27'%3E%3Cpath d='M5.75 2.75 H15.25 A3 3 0 0 1 18.25 5.75 V14.25 A3 3 0 0 1 15.25 17.25 H5.75 A3 3 0 0 1 2.75 14.25 V5.75 A3 3 0 0 1 5.75 2.75 Z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23g2c27)'%3E%3Cpath d='M-2.46 19.09 L7.44 9.19 A1.5 1.5 0 0 1 9.56 9.19 L19.46 19.09' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='round'/%3E%3C/g%3E%3Cpath d='M5.75 2.75 H15.25 A3 3 0 0 1 18.25 5.75 V14.25 A3 3 0 0 1 15.25 17.25 H5.75 A3 3 0 0 1 2.75 14.25 V5.75 A3 3 0 0 1 5.75 2.75 Z' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/g%3E%3Cpath d='M17.5 21.5 L13.25 17.25 A3.01 3.01 0 0 1 13.25 13 A3.01 3.01 0 0 1 17.5 13 A3.01 3.01 0 0 1 21.75 13 A3.01 3.01 0 0 1 21.75 17.25 Z' fill='currentColor'/%3E%3C/svg%3E");
  --glyph-products: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cmask id='products-glyph-gh1' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cg transform='rotate(45 12 12)'%3E%3Ccircle cx='6.5' cy='12' r='2' fill='%23000'/%3E%3C/g%3E%3C/mask%3E%3Cg mask='url(%23products-glyph-gh1)'%3E%3Cg transform='rotate(45 12 12)'%3E%3Cpath d='M1.5 12 L8 5.5 L18 5.5 A1.5 1.5 0 0 1 19.5 7 L19.5 17 A1.5 1.5 0 0 1 18 18.5 L8 18.5 Z' fill='currentColor'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --glyph-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M10.19 5.24 L10.09 2.18 A10 10 0 0 1 13.91 2.18 L13.81 5.24 A7 7 0 0 1 15.5 5.94 L15.5 5.94 L17.59 3.71 A10 10 0 0 1 20.29 6.41 L18.06 8.5 A7 7 0 0 1 18.76 10.19 L18.76 10.19 L21.82 10.09 A10 10 0 0 1 21.82 13.91 L18.76 13.81 A7 7 0 0 1 18.06 15.5 L18.06 15.5 L20.29 17.59 A10 10 0 0 1 17.59 20.29 L15.5 18.06 A7 7 0 0 1 13.81 18.76 L13.81 18.76 L13.91 21.82 A10 10 0 0 1 10.09 21.82 L10.19 18.76 A7 7 0 0 1 8.5 18.06 L8.5 18.06 L6.41 20.29 A10 10 0 0 1 3.71 17.59 L5.94 15.5 A7 7 0 0 1 5.24 13.81 L5.24 13.81 L2.18 13.91 A10 10 0 0 1 2.18 10.09 L5.24 10.19 A7 7 0 0 1 5.94 8.5 L5.94 8.5 L3.71 6.41 A10 10 0 0 1 6.41 3.71 L8.5 5.94 A7 7 0 0 1 10.19 5.24 Z M15 12 A3 3 0 0 1 12 15 A3 3 0 0 1 9 12 A3 3 0 0 1 12 9 A3 3 0 0 1 15 12 Z' fill='currentColor' fill-rule='evenodd'/%3E%3C/svg%3E");
  --glyph-waiting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M6 5 L18 5 L13 11.5 L13 12.5 L18 19 L6 19 L11 12.5 L11 11.5 Z' fill='currentColor'/%3E%3Cline x1='3' y1='2.75' x2='21' y2='2.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt'/%3E%3Cline x1='3' y1='21.25' x2='21' y2='21.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt'/%3E%3C/svg%3E");
  --glyph-website: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cmask id='g2m10' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Ccircle cx='6.5' cy='6' r='1.1' fill='%23000'/%3E%3Ccircle cx='9.5' cy='6' r='1.1' fill='%23000'/%3E%3Ccircle cx='12.5' cy='6' r='1.1' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23g2m10)'%3E%3Cpath d='M5 3 H19 A3 3 0 0 1 22 6 V9 H2 V6 A3 3 0 0 1 5 3 Z' fill='currentColor'/%3E%3C/g%3E%3Cmask id='g2m11' maskUnits='userSpaceOnUse' x='-2' y='-2' width='28' height='28'%3E%3Crect x='-2' y='-2' width='28' height='28' fill='%23fff'/%3E%3Cpath d='M5 3 H19 A3 3 0 0 1 22 6 V9 H2 V6 A3 3 0 0 1 5 3 Z' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23g2m11)'%3E%3Ccircle cx='6.5' cy='6' r='1.1' fill='currentColor'/%3E%3Ccircle cx='9.5' cy='6' r='1.1' fill='currentColor'/%3E%3Ccircle cx='12.5' cy='6' r='1.1' fill='currentColor'/%3E%3C/g%3E%3Cpath d='M2.75 8 V17.75 A2.5 2.5 0 0 0 5.25 20.25 H18.75 A2.5 2.5 0 0 0 21.25 17.75 V8 ' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3Cline x1='6' y1='12.75' x2='18' y2='12.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt'/%3E%3Cline x1='6' y1='15.75' x2='13.5' y2='15.75' stroke='currentColor' stroke-width='1.5' stroke-linecap='butt'/%3E%3C/svg%3E");
}