/* HULI webfonts — shipped from the brand font package (Mona Sans + IBM Plex Mono) */
@font-face{font-family:"Mona Sans";src:url("fonts/MonaSans-Variable.ttf") format("truetype-variations");font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
/* HULI colour system — values transcribed verbatim from the product Figma file. */
:root{
  /* ---- Brand ---- */
  --huli-orange:#FF6123;          /* logo mark + primary brand accent */
  --huli-orange-600:#C43700;      /* orange text on tint */
  --huli-orange-500:#FF5430;      /* gradient stop 1 */
  --huli-orange-400:#FF8839;      /* gradient stop 2 */
  --huli-orange-200:#FFCBB7;      /* chip / tint fill */
  --huli-orange-100:#FFE8DF;      /* softest tint, gradient stop 3 */
  --gen-ai-gradient:linear-gradient(62.241deg,rgba(255,84,48,.8) 0%,rgba(255,136,57,.8) 60%,rgba(255,232,223,.8) 100%); /* @kind color */

  /* ---- Ink (neutrals) ---- */
  --ink-900:#14141C;              /* deepest surface / inverse panel */
  --ink-800:#212121;              /* primary text, primary-dark button */
  --ink-700:#33333B;              /* softened body ink — lower glare than 800 */
  --ink-600:#525252;              /* secondary text, icon default */
  --ink-500:#767575;              /* tertiary text / muted icon fill */
  --ink-400:#B4B4B4;              /* disabled text */
  --ink-300:#CDCDCD;              /* strong border */
  --ink-200:#E2E2E2;              /* default border, divider */
  --ink-150:#E6E6E7;
  --ink-125:#E9EAEF;
  --ink-100:#EFEFEF;
  --ink-75:#F2F2F2;
  --ink-50:#F8F8F8;               /* app canvas */
  --ink-25:#FBFBFB;
  --white:#FFFFFF;

  /* ---- Semantic: success ---- */
  --success-fill:#BFEDC4;
  --success-text:#00690C;
  --success-surface:#EDF8EF;
  --success-border:#A8DCAE;

  /* ---- Semantic: error / danger ---- */
  --danger:#D82828;               /* destructive button fill */
  --error-surface:#FEEEEE;
  --error-border:#FFA3A3;
  --error-text:#C60854;

  /* ---- Accent chips ----
     Soft tints, not saturated blocks: a low-alpha fill plus coloured text
     reads calmer at small sizes and keeps the page from going stripy. */
  --blue-fill:#EBF4FE;
  --blue-text:#1A6FCC;
  --blue-edge:rgba(5,97,196,.16);
  --pink-fill:#FEEFF6;
  --pink-text:#C6317A;
  --pink-edge:rgba(198,8,84,.14);
  --gray-fill:#F1F1F3;
  --gray-text:#5E5E68;
  --gray-edge:rgba(20,20,28,.10);
  --orange-fill:#FFF1EA;
  --orange-text:#C94D18;
  --orange-edge:rgba(255,97,35,.20);
  --green-fill:#ECF7EE;
  --green-text:#1F7A2C;
  --green-edge:rgba(0,105,12,.16);

  /* ---- Semantic aliases ---- */
  --text-primary:#3D3D46;
  --text-heading:#22222A;
  --text-secondary:#5E5E68;
  --text-muted:#83838E;
  --text-disabled:var(--ink-400);
  --text-inverse:var(--white);
  --text-link:var(--ink-800);

  --surface-canvas:#FAFAFB;
  --surface-card:var(--white);
  --surface-raised:var(--white);
  --surface-sunken:var(--ink-75);
  --surface-inverse:var(--ink-900);

  --border-default:#E8E8EC;
  --border-strong:#DEDEE4;
  --border-subtle:#F0F0F3;
  --border-focus:var(--ink-700);
}
/* HULI gradients and elevation.
   The brand ramp (#FF5430 → #FF8839 → #FFE8DF) is taken from the Gen AI
   gradient in the product file; everything here is built from those stops or
   from the ink scale. Gradients are used for depth, never for decoration:
   ambient page washes, AI surfaces, and hairline borders. */
:root{
  /* Brand */
  --grad-brand:linear-gradient(112deg,#FF5430 0%,#FF8839 54%,#FFCBB7 100%); /* @kind color */
  --grad-brand-soft:linear-gradient(112deg,#FFE8DF 0%,#FFF4EF 58%,#FFFFFF 100%); /* @kind color */
  --grad-brand-veil:linear-gradient(180deg,rgba(255,97,35,.10) 0%,rgba(255,97,35,0) 100%); /* @kind color */

  /* Ink — for dark buttons and inverse panels. Flat black reads heavy;
     a 20-point vertical ramp keeps the same weight with less glare. */
  --grad-ink:linear-gradient(180deg,#2E2E38 0%,#1B1B23 100%); /* @kind color */
  --grad-ink-hover:linear-gradient(180deg,#3A3A46 0%,#26262F 100%); /* @kind color */
  --grad-ink-deep:linear-gradient(160deg,#20202A 0%,#14141C 100%); /* @kind color */

  /* Page wash — two very low-saturation lights over the canvas. */
  --grad-canvas:
    radial-gradient(1100px 520px at 8% -12%,rgba(255,136,57,.10) 0%,rgba(255,136,57,0) 60%),
    radial-gradient(900px 480px at 100% -6%,rgba(120,140,200,.10) 0%,rgba(120,140,200,0) 58%),
    var(--surface-canvas); /* @kind color */

  /* Surfaces */
  --grad-surface:linear-gradient(180deg,#FFFFFF 0%,#FDFDFE 100%); /* @kind color */
  --grad-veil:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.58) 100%); /* @kind color */
  --grad-hairline:linear-gradient(180deg,rgba(20,20,28,.10) 0%,rgba(20,20,28,.03) 100%); /* @kind color */
  --grad-shimmer:linear-gradient(100deg,rgba(255,255,255,0) 22%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 78%); /* @kind color */

  /* Protection gradients — for text over imagery or a scrolling edge. */
  --grad-fade-down:linear-gradient(180deg,var(--surface-canvas) 0%,rgba(250,250,251,0) 100%); /* @kind color */
  --grad-fade-up:linear-gradient(0deg,var(--surface-canvas) 0%,rgba(250,250,251,0) 100%); /* @kind color */

  /* Elevation — soft, wide, low-opacity. No hard 1px drop shadows. */
  --shadow-hairline:0 0 0 1px rgba(20,20,28,.06); /* @kind shadow */
  --shadow-card:0 1px 2px rgba(20,20,28,.03),0 6px 20px -14px rgba(20,20,28,.22); /* @kind shadow */
  --shadow-raised:0 1px 2px rgba(20,20,28,.04),0 12px 32px -16px rgba(20,20,28,.24); /* @kind shadow */
  --shadow-popover:0 2px 6px rgba(20,20,28,.05),0 16px 40px -18px rgba(20,20,28,.28); /* @kind shadow */
  --shadow-modal:0 4px 12px rgba(20,20,28,.06),0 32px 64px -24px rgba(20,20,28,.32); /* @kind shadow */

  /* Glows — reserved for live AI state. */
  --glow-brand:0 0 0 1px rgba(255,97,35,.16),0 10px 34px -10px rgba(255,97,35,.38); /* @kind shadow */
  --glow-brand-soft:0 8px 40px -12px rgba(255,97,35,.28); /* @kind shadow */
}

/* Gradient hairline border: a 1px ramp instead of a flat grey rule.
   Apply to a card that should feel lit from above. */
.huli-hairline{border:1px solid transparent;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:var(--grad-surface),var(--grad-hairline)}
/* HULI type system.
   Mona Sans carries all reading text. IBM Plex Mono — uppercase, -2% tracking —
   carries every "machine" surface: buttons, nav, chips, tabs, metrics. */
:root{
  --font-sans:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --fs-display:44px;
  --fs-h1:20px;  --lh-h1:26px;
  --fs-h2:16px;  --lh-h2:22px;
  --fs-h3:14px;  --lh-h3:20px;
  --fs-body:14px;--lh-body:21px;
  --fs-sm:13px;  --lh-sm:19px;
  --fs-xs:12px;  --lh-xs:16px;
  --fs-label:11px;--lh-label:15px;

  --fs-mono-lg:13px; --lh-mono-lg:1.32; /* @kind other */
  --fs-mono-md:12px; --lh-mono-md:1.16; /* @kind other */
  --fs-mono-sm:10px; --lh-mono-sm:1.16; /* @kind other */
  --ls-mono:-0.02em; /* @kind other */          /* 16px+ mono only */
  --ls-mono-ui:0.01em; /* @kind other */        /* buttons, nav — 13px */
  --ls-mono-sm:0.02em; /* @kind other */        /* tabs, pagination — 12px */
  --ls-mono-xs:0.05em; /* @kind other */        /* chips, table headers — 10px */

  --fw-light:300; /* @kind font */ --fw-regular:400; /* @kind font */ --fw-medium:500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold:700; /* @kind font */

  /* Optical tracking — large type tightens, small type opens up. */
  --ls-display:-0.035em; /* @kind font */ --ls-h1:-0.02em; /* @kind font */ --ls-h2:-0.012em; /* @kind font */ --ls-h3:-0.008em; /* @kind font */
}
.huli-display{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-display);line-height:1.04;letter-spacing:var(--ls-display);color:var(--text-heading)}
.huli-h1{font-family:var(--font-sans);font-weight:550;font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);color:var(--text-heading)}
.huli-h2{font-family:var(--font-sans);font-weight:550;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:var(--text-heading)}
.huli-h3{font-family:var(--font-sans);font-weight:550;font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--text-heading)}
.huli-body{font-family:var(--font-sans);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-primary)}
.huli-body-medium{font-family:var(--font-sans);font-weight:500;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-primary)}
.huli-sm{font-family:var(--font-sans);font-weight:400;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-secondary)}
.huli-label{font-family:var(--font-sans);font-weight:400;font-size:var(--fs-label);line-height:var(--lh-label);color:var(--text-secondary)}
.huli-mono{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-mono-lg);line-height:var(--lh-mono-lg);letter-spacing:.01em;text-transform:uppercase}
.huli-mono-sm{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-mono-md);line-height:var(--lh-mono-md);letter-spacing:.02em;text-transform:uppercase}
.huli-mono-xs{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-mono-sm);line-height:var(--lh-mono-sm);letter-spacing:.05em;text-transform:uppercase}
/* Spacing, radii, elevation, motion. All values observed in the HULI product file. */
:root{
  --space-2:2px; --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px;
  --space-24:24px; --space-28:28px; --space-32:32px; --space-40:40px;

  --radius-chip:3px;      /* chips, micro-tags */
  --radius-control:5px;   /* buttons, inputs, cards, tables, menu items */
  --radius-panel:9px;     /* popovers, modals */
  --radius-round:9999px;  /* avatars, status dots */

  --border-hairline:1px solid var(--border-default); /* @kind other */

  /* Shadow + glow scale lives in gradients.css. */
  --inset-border:inset 0 0 0 1px var(--border-default);
  --inset-border-strong:inset 0 0 0 1px var(--ink-800);
  --inset-border-error:inset 0 0 0 1px var(--error-border);

  --control-h-sm:26px; --control-h-md:32px; --control-h-lg:36px;
  --sidebar-w:208px; --sidebar-w-collapsed:60px;
  --page-gutter:28px;
}

/* Easings, durations and keyframes live in motion.css. */
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--huli-orange)}

/* Skeleton / shimmer surface — used by Skeleton, CardIndex and any loading block. */
.huli-shimmer{background-color:var(--ink-75);background-image:var(--grad-shimmer);background-size:220% 100%;background-repeat:no-repeat;animation:huli-shimmer 1.8s var(--ease-in-out) infinite}
/* HULI motion system.
   Motion is quiet and mechanical: short, eased, never bouncy on UI chrome.
   Ambient loops (sphere, shimmer, arc) run slow so the interface reads calm.
   Every loop respects prefers-reduced-motion at the bottom of this file. */
:root{
  --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */      /* default UI easing */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */         /* expo-out: enters, reveals */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */     /* symmetric loops */
  --ease-spring:cubic-bezier(.34,1.32,.5,1); /* @kind other */   /* one soft overshoot, sparingly */

  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:360ms; /* @kind other */
  --duration-slower:640ms; /* @kind other */
  --duration-ambient:2400ms; /* @kind other */

  --stagger:60ms; /* @kind other */   /* per-item delay in list reveals */
}

/* Indeterminate arc — the only loading spinner in the system.
   A hairline ring plus one sweeping arc; no chunky rotating glyph. */
@keyframes huli-arc-spin{to{transform:rotate(360deg)}}
@keyframes huli-arc-dash{
  0%{stroke-dasharray:1 99;stroke-dashoffset:0}
  50%{stroke-dasharray:58 42;stroke-dashoffset:-14}
  100%{stroke-dasharray:1 99;stroke-dashoffset:-99}
}

/* Skeletons sweep a light band across a tinted block — never blink opacity. */
@keyframes huli-shimmer{from{background-position:-140% 0}to{background-position:240% 0}}

/* Brand gradient drifting through a chip / progress fill. */
@keyframes huli-gradient-slide{to{background-position:260% 0}}

/* Entrances. Small distances, expo-out, no fade-from-invisible-white. */
@keyframes huli-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes huli-fade{from{opacity:0}to{opacity:1}}
@keyframes huli-scale-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* Ambient presence: a breathing halo behind live/AI surfaces. */
@keyframes huli-glow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.045)}}
@keyframes huli-orbit{to{transform:rotate(360deg)}}

/* Voice: bars for level meters, dots for "agent is thinking". */
@keyframes huli-wave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes huli-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* Gen AI sphere states — the orb breathes, its internal sheen drifts.
   Scale deltas stay under 4% so the motion is felt, not watched. */
@keyframes huli-orb-idle{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}}
@keyframes huli-orb-listen{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}
@keyframes huli-orb-speak{0%,100%{transform:scale(1)}28%{transform:scale(1.038)}62%{transform:scale(.992)}}
@keyframes huli-orb-current-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,7%,0) scale(1.12)}}
@keyframes huli-orb-current-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7%,-9%,0) scale(1.1)}}
@keyframes huli-orb-halo{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
/* Logo motion — the mark draws in, then the wordmark follows. */
@keyframes huli-mark-in{0%{opacity:0;transform:scale(.86)}100%{opacity:1;transform:scale(1)}}
@keyframes huli-word-in{0%{opacity:0;transform:translateX(-6px)}100%{opacity:1;transform:none}}
@keyframes huli-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}