/* Hona Design System v1.9.0 — tokens.css (lia-web copy)
   Values derive from the Notion Design System Specification (spec_version 1.9.0, 2026-09-10).
   Token names are the v1.5.0 names, re-valued in place; tokens marked (v1.9.0) are new.
   Token values are a verbatim copy of packages/@frontend/ui/src/hona/tokens.css (= .claude/skills/build-ui/
   hona-design-system/tokens/tokens.css) from :root through --font-family; the font faces
   above :root and the native-parity blocks after --font-family are Lia web's own (AI-4480).
   Rule 1: no raw hex in component code. Rule 2: if it isn't here, it isn't in the system. */

/* Plus Jakarta Sans (SIL OFL 1.1), self-hosted. The React app bundles this file
   and ./hona-fonts/ (main.jsx imports it: patch 0004, AI-4214); the proxy's own
   pages link a static copy at /lia/hona-tokens.css + /lia/hona-fonts/ (Dockerfile).
   Same files as
   apps/company/src/dev/Plus-jakarta-sans-*.woff2. No Google Fonts request. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./hona-fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./hona-fonts/plus-jakarta-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./hona-fonts/plus-jakarta-sans-700.woff2') format('woff2');
}

:root {
  /* ============ Color: core greens ============ */
  --forest:   #0A2818;  /* darkest; scrim base */
  --deep:     #143A26;  /* primary buttons, emphasized text, selected foregrounds */
  --positive: #2F6B41;  /* positive status, glyph accents, links */
  --lime:     #C7F26C;  /* standalone counts + max 3 standalone moments per view. NEVER in repeating lists. */

  /* ============ Color: tints & surfaces ============ */
  --tint:          #F4FADF;  /* green tint: repeating-list badges, chips, drag state, tab count context, selected */
  --tint-edge:     #D2E0B6;  /* border on tint elements; the AI / applied-filter edge */
  --selected:      var(--tint);  /* selected = solid tint: active tabs, selected nav, selected rows, active page. Never the hover. */
  --surface-page:  #F5F4F0;  /* app page background */
  --surface-sunken:#F0EFEA;  /* recessed areas */
  --surface-card:  #FFFFFF;
  --progress-track: #E4E3DC; /* v1.11.0 determinate progress track */
  --neutral-pill:  #F0EFEA;  /* neutral trio fill: zero-count / inert pills, neutral chips */
  --expanded-bg:   #FAFAF7;  /* disclosure expanded content */

  /* ============ Color: text & borders ============ */
  --ink:          #0F1A14;
  --ink-strong:   #2A352E;  /* (v1.9.0) secondary ink: read rows, neutral chip text, outline icon buttons */
  --text-muted:   #5B6B61;
  --text-faint:   #66736A;
  --text-disabled:#94A096;
  --icon-neutral: #66736A;
  --border:       #E5E4DE;  /* the hairline: 1px container outlines + dividers */
  --border-input: #C9C8C0;  /* the edge: 1.5px, control borders only */
  --border-panel: #E5E4DE;  /* container outline (drawer edge, popovers) */
  --hairline:     #E5E4DE;

  /* ============ Color: status ============ */
  --danger:        #D24545;  /* destructive button, confirm affirmative */
  --danger-deep:   #A32B2B;
  --danger-tint:   #FBEAEA;
  --warn-deep:     #9A5A11;
  --warn-tint:     #FBF0E0;
  --warn-dot:      #E0851A;
  --neutral-dot:   #8A968E;  /* (v1.9.0) neutral status dot — never text */

  /* ============ Links (v1.5.0) ============ */
  --link:            var(--positive);
  --link-hover:      var(--deep);
  /* underline is mandatory; use text-underline-offset: 2px */

  /* ============ Scrim (v1.5.0) — MODALS ONLY; drawers are scrimless ============ */
  --scrim: rgba(10, 40, 24, 0.32);

  /* ============ Stacking (v1.5.0) — order is ratified ============ */
  --z-menu:    1000;
  --z-tooltip: 1100;
  --z-popover: 1200;
  --z-drawer:  1300;
  --z-modal:   1400;
  --z-toast:   1500;

  /* ============ Controls ============ */
  --control-height: 38px;
  /* v1.11.0 (2026-09-24), compact inline/row actions. */
  --control-height-sm: 30px;
  --control-pad-x-sm: 12px;
  --control-pad-y:  9px;   /* derived from controlHeight — buttons AND inputs */
  --control-pad-x:  15px;
  --mini-input-h:   30px;  /* sentence-embedded inputs */
  --mini-input-w:   44px;
  --dot-size:       6px;   /* (v1.9.0) status and unread dots */

  /* ============ Radius scale ============ */
  --radius-control: 10px;  /* inputs, buttons, popovers-inner */
  --radius-card:    12px;  /* cards, drawers-inner, dropzones */
  --radius-sheet:   16px;
  --radius-pill:    999px;
  --radius-tooltip: 8px;   /* (v1.9.0) tooltips only */

  /* ============ Spacing ladder ============ */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 20px;
  --space-6: 32px;

  /* ============ States (v1.9.0) ============ */
  /* Translucent ink washes, so one value reads on every surface. Selected is the solid tint, never these. */
  --state-hover:   rgba(15, 26, 20, 0.045);
  --state-pressed: rgba(15, 26, 20, 0.08);
  --disabled-fill: #D3D8D3;

  /* ============ Focus ============ */
  --state-focus: var(--positive);
  /* 2px ring, 2px offset, on everything keyboard-reachable. Not optional. */
  --state-focus-ring: rgba(47, 107, 65, 0.16);  /* (v1.9.0) the soft ring on inputs */

  /* ============ Scroll containers (v1.9.0) ============ */
  --scrollbar-width: 10px;
  --scrollbar-inset: 8px;   /* the thumb's track stops this far from the top and bottom */
  --scroll-fade:     32px;  /* bottom fade mask while more content is below */

  /* ============ Elevation (two only: floating + dismissible) ============ */
  --shadow-raised:  0 4px 12px rgba(15, 26, 20, 0.08);   /* menus, popovers, tooltips */
  --shadow-overlay: 0 12px 32px rgba(15, 26, 20, 0.12);  /* dialogs, toasts, extension panel */

  /* ============ Motion (v1.3) ============ */
  /* Bigger things move slower. Things leave faster than they arrive.
     Hover never moves anything, only the background. */
  --dur-instant:  80ms;   /* focus ring, menu item hover */
  --dur-quick:   140ms;   /* hover, menus, tooltips, tab switch, all exits */
  --dur-base:    200ms;   /* toggles, toasts, modals */
  --dur-slow:    320ms;   /* expand and collapse */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.3, 1);  /* entering, opening, responding */
  --ease-in:   cubic-bezier(0.5, 0, 0.9, 0.3);  /* leaving only */
  --ease-both: cubic-bezier(0.4, 0, 0.2, 1);    /* moving between two fixed points */
  --loop-shimmer:  1.4s ease-in-out;  /* skeleton */
  --loop-spinner:  700ms linear;      /* spinner rotation */
  --loop-progress: 1.1s ease-in-out;  /* indeterminate bar */
  /* PRO-1193 (2026-09-30), proposed for Josh's Design Decisions Log: the Lia chat's messaging motion. */
  --loop-typing:   1.2s ease-in-out;  /* typing dots' idle opacity wave (declared for parity; Lia web has no typing dots yet) */
  --rise:          6px;    /* how far a new item travels in when nothing else is moving it */
  --stagger:       40ms;   /* between blocks of a revealed reply, capped at 5 steps */

  /* ============ Skeleton (v1.3) ============ */
  --skeleton-base:      #E8E7E1;
  --skeleton-highlight: #F2F1EC;
  --skeleton-radius:    6px;  /* or the component's own radius when larger */

  /* ============ Type ============ */
  --font-family: 'Plus Jakarta Sans', sans-serif;

  /* ============ Native parity: type (AI-4030) ============
     LibreChat's own steps (re-measured on v0.8.8), MEASURED in the running image and recorded in
     fixtures/librechat-metrics.json — not read off Tailwind's documented
     defaults, because the image ships its own config and hona-theme.css overrides
     part of it. The injected add-ons sit beside native chat and nav text, so every
     font-size in theme/* is one of these; a size between two steps is what makes
     our text read wrong next to LibreChat's. Each has a matching -lh, because the
     leading drifted as much as the size did: our 14px rows were 14/21 (the 1.5
     body ratio) where every native row is 14/20.
     native-parity.test.mjs asserts these against the fixture. */
  --text-xs:      0.75rem;   /* 12px — section labels, captions, chips, kbd */
  --text-xs-lh:   1rem;      /* 16px */
  --text-sm:      0.875rem;  /* 14px — THE chrome size: nav rows, menu items, controls */
  --text-sm-lh:   1.25rem;   /* 20px */
  --text-base:    1rem;      /* 16px — panel headers, dialog body */
  --text-base-lh: 1.5rem;    /* 24px */
  --text-lg:      1.125rem;  /* 18px — dialog titles (native ships these at weight 500) */
  --text-lg-lh:   1.75rem;   /* 28px */
  --text-xl:      1.25rem;   /* 20px — glyph buttons (×, ⋯) set line-height:1 */
  --text-xl-lh:   1.75rem;   /* 28px */
  --text-2xl:     1.5rem;    /* 24px — the one page-scale heading (Manage) */
  --text-2xl-lh:  2rem;      /* 32px */
  /* Plus Jakarta Sans ships 400/500/700 ONLY (the @font-face block above), and
     hona-theme.css maps .font-semibold to 700. 600 and 800 are synthesised by the
     browser: never ship them. */

  /* ============ Native parity: motion (AI-4030) ============
     Measured the same way, on the surfaces our add-ons sit beside. Distinct from
     the Hona --dur- / --ease- ladder above, which stays as it is: that ladder is
     Josh's ratified spec and drives the Lia mark, whose CSS (client/src/mark/lia-mark-motion.css) the
     Dockerfile ships verbatim. These four are what a PANEL, a MODAL, a MENU and a
     hover do in LibreChat itself.
     Everything using them must also answer prefers-reduced-motion. */
  --dur-native-quick: 150ms;  /* Tailwind's bare `transition` — 44 rules in the image */
  --dur-native-base:  200ms;  /* disclosure, dialog scrim + card enter, accordion */
  --dur-native-panel: 300ms;  /* UnifiedSidebar's width/min-width/max-width slide */
  --dur-native-pop:   150ms;  /* v0.8.8 .popover-ui: opacity + scale on enter */
  --ease-native:       cubic-bezier(0.4, 0, 0.2, 1);   /* the image's dominant curve */
  --ease-native-panel: cubic-bezier(0.32, 0.72, 0, 1); /* the sidebar slide's own curve (v0.8.8) */
  --ease-native-pop:   cubic-bezier(0.4, 0, 0.2, 1);   /* menu/popover entrances (v0.8.8) */
  --pop-scale: 0.95; /* v0.8.8 .popover-ui enters from scale .95 (v0.8.7: a 2px rise) */
  --pop-rise: 2px;   /* Hona's own: the ingest card's entrance distance unit */
}

/* ============ Native parity: the entrances themselves (AI-4030) ============
   The four timings above describe HOW LONG and WITH WHAT CURVE; these are WHAT
   MOVES. They live here, with the tokens, because they are used from more than
   one stylesheet — `lia-pop-in` styles both the workspace switcher's popover
   (apps/lia-web/client/src/lia-header.css) and the Documents row menu (lia-documents.css). Defining
   it in one of those two and using it from the other WORKS, because both
   load into the same document, but it is an undeclared dependency: unlink
   or lazy-load that sheet and the other's animation silently stops, with nothing
   to fail. native-parity.test.mjs now asserts every `animation:` name resolves. */
@keyframes lia-pop-in {
  from { opacity: 0; transform: scale(var(--pop-scale)); }
  to   { opacity: 1; transform: none; }
}
@keyframes lia-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lia-modal-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: none; }
}
@keyframes lia-sheet-in {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
@keyframes lia-ingest-in {
  from { opacity: 0; transform: translateY(calc(var(--pop-rise) * 2)); }
  to   { opacity: 1; transform: none; }
}