/* ─────────────────────────────────────────────────────────────────────
   KUBE AI Studio — Colors & Type
   Copied verbatim from the Studio design system. Values are unchanged; only
   the header and wordmark comments were rewritten, because this file ships to
   the browser on a Kube-branded site and the originals named a former brand.
   Site-specific additions live in the "Site overrides" block at the very end.
   ───────────────────────────────────────────────────────────────────── */

/* Fonts ---------------------------------------------------------------- */
/* FS Albert Pro is the brand sans (Fontsmith). The .ttf files live in fonts/
   and are loaded via @font-face below. Nunito is still pulled from Google
   Fonts and is used ONLY for the split-weight brand wordmark
   ("KUBE AI Studio", "Agentic.AI"). */

@font-face {
  font-family: 'FS Albert Pro';
  src: url('fonts/FSAlbertPro-Thin.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FS Albert Pro';
  src: url('fonts/FSAlbertPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FS Albert Pro';
  src: url('fonts/FSAlbertPro.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FS Albert Pro';
  src: url('fonts/FSAlbertPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FS Albert Pro';
  src: url('fonts/FSAlbertPro-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  /* ─── Type families ─────────────────────────────────────────────── */
  --font-sans:        'FS Albert Pro', system-ui, -apple-system, sans-serif;
  --font-display:     'FS Albert Pro', system-ui, sans-serif;
  --font-brand:       'Nunito', 'FS Albert Pro', system-ui, sans-serif;

  /* ─── Core palette (warm earth-tones; no blues) ─────────────────── */

  /* Accent — single brand orange. Used for primary CTA, active nav,
     toggle-on, trigger chips. NEVER apply to body text or icons that are
     not a primary action. */
  --accent-500:        #E69254;          /* spec primary */
  --accent-400:        #FF8B59;          /* lighter ramp */
  --accent-300:        #FFB95E;          /* warm glow / orb */
  --accent-200:        #FFF0E0;          /* tinted surface */
  --accent-100:        rgba(230,146,84,0.10);
  --accent-focus:      rgba(230,146,84,0.28); /* focus ring halo token — global :focus rules removed 2026-08-22 */
  --accent-glow:       #FBC77D;          /* login bg orb */
  --accent-yellow:     #FFF878;          /* secondary blur orb */

  /* Neutrals — warm grays (cooler than #f5f5f5; warmer than #fafafa) */
  --warm-1000:         #1D1B20;          /* darkest sidebar / login */
  --warm-900:          #272320;          /* primary text on light */
  --warm-800:          #161616;          /* near-black login canvas */
  --warm-700:          #444746;          /* secondary text */
  --warm-600:          #5D5D5F;          /* tertiary text */
  --warm-500:          #777779;          /* metadata / placeholder */
  --warm-400:          #989898;          /* muted */
  --warm-300:          #C2BEBE;          /* sidebar inactive label */
  --warm-200:          #DFD3E0;          /* hairline border */
  --warm-150:          #E2E2E2;          /* card border alt */
  --warm-100:          #DEDCD6;          /* page header band */
  --warm-75:           #E7E6E1;          /* canvas alt */
  --warm-50:           #F5F3EF;          /* canvas — workflow */
  --warm-25:           #F9F8F5;          /* panel surface */
  --warm-0:            #FFFFFF;          /* card */

  /* Status — semantic. Red is the only documented status hue. */
  --status-danger:     #E65C56;          /* error / destructive */
  --status-warn:       #FF8B59;          /* warn (reuses accent-400) */
  --status-success:    #8DC63F;          /* "go" green — only in single state pill */
  --status-info:       #515179;          /* informational, dusky purple */

  /* Evaluation verdicts. These were declared only in design_system/tokens/tokens.css,
     which index.html never loads — so every var(--status-eval-*) reference in the evals
     module resolved to an invalid value: the PassBar's partial segment painted nothing
     (read as a transparent gap) and the pass/partial/fail legend dots fell back to
     inherited grey. Declared here so they actually resolve at runtime.
     Two weights per verdict: a *-fill for shapes (bar segments, legend dots) and a
     darker text-weight for labels, which need contrast the fills don't have. */
  --status-eval-pass:         #5C8B1F;   /* PASS text — dark green */
  --status-eval-partial:      #B35A1F;   /* PARTIAL text — dark orange */
  --status-eval-fail:         #B33C36;   /* FAIL text — dark red */
  --status-eval-pass-fill:    #8DC63F;   /* = --status-success; PassBar pass segment + dot */
  --status-eval-partial-fill: #FF8B59;   /* = --status-warn; PassBar partial segment + dot */
  --status-eval-fail-fill:    #E65C56;   /* = --status-danger; PassBar fail segment + dot */

  /* ─── Surface tiers (luminance-based hierarchy, not shadows) ───── */
  --surface-0:         var(--warm-1000); /* sidebar / dark modal */
  --surface-1:         var(--warm-50);   /* page canvas */
  --surface-2:         var(--warm-25);   /* panel / drawer */
  --surface-3:         var(--warm-0);    /* card / node */
  --surface-dark-input:#3D3D3A;          /* input on dark login */

  /* ─── Borders ───────────────────────────────────────────────────── */
  --border-hairline:   rgba(0,0,0,0.06);    /* 0.5px lookalike */
  --border-card:       #DFD3E0;             /* primary card edge */
  --border-soft:       #E2E2E2;
  --border-divider:    rgba(0,0,0,0.08);

  /* ─── Foreground / text ────────────────────────────────────────── */
  --fg-primary:        var(--warm-900);
  --fg-secondary:      var(--warm-700);
  --fg-tertiary:       var(--warm-600);
  --fg-muted:          var(--warm-500);
  --fg-on-dark:        #F1EFE8;
  --fg-on-dark-muted:  #C2BEBE;
  --fg-accent:         var(--accent-500);

  /* ─── Shadows — layered, warm. Used to lift cards off the gradient canvas. ─ */
  --shadow-xs:         0 1px 2px rgba(40, 28, 18, 0.04);
  --shadow-card:       0 1px 2px rgba(40, 28, 18, 0.04), 0 8px 24px -8px rgba(40, 28, 18, 0.10);
  --shadow-card-hi:    0 2px 4px rgba(40, 28, 18, 0.05), 0 14px 36px -10px rgba(40, 28, 18, 0.16);
  --shadow-bubble:     0 1px 2px rgba(40, 28, 18, 0.05), 0 6px 16px -6px rgba(40, 28, 18, 0.14);
  --shadow-bubble-accent: 0 2px 4px rgba(230,146,84, 0.18), 0 10px 24px -8px rgba(230,146,84, 0.32);
  --shadow-input:      0 1px 2px rgba(40, 28, 18, 0.04), inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-modal:      0 8px 32px rgba(0,0,0,0.30);
  --shadow-press:      0 2px 4px rgba(0,0,0,0.15);
  --shadow-rail:       4px 0 18px -10px rgba(40, 28, 18, 0.32);

  /* ─── Gradients — warm, low-chroma. Lift the canvas without screaming color. ─ */
  --gradient-canvas:   #FBF8F2;
  --gradient-panel:    #FCFAF5;
  --gradient-chat:     radial-gradient(140% 90% at 100% 0%, #FFE8D2 0%, #FBE3CF 18%, #F6F1E7 58%, #F1EAD9 100%);
  --gradient-accent:   linear-gradient(135deg, #FF9A5A 0%, #E69254 55%, #C8470F 100%);
  --gradient-bubble-user: linear-gradient(135deg, #FF9A5A 0%, #E69254 100%);
  --gradient-bubble-ai:   linear-gradient(180deg, #FFFFFF 0%, #FBF7F0 100%);
  --gradient-rail:     linear-gradient(180deg, #221F23 0%, #1A1719 100%);
  --gradient-header:   linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);

  /* ─── Radii ─────────────────────────────────────────────────────── */
  --radius-xs:         4px;    /* indicator pill */
  --radius-sm:         8px;    /* button, chip, small input */
  --radius-md:         12px;   /* card, node, input */
  --radius-lg:         16px;   /* panel, modal */
  --radius-xl:         24px;   /* large card / chart panel */
  --radius-2xl:        30px;   /* main content frame */
  --radius-3xl:        36px;   /* full-screen frame */
  --radius-pill:       9999px;
  --radius-trigger:    52px 16px 16px 52px;  /* trigger node — D shape */

  /* ─── Spacing scale (8-pt-derived) ─────────────────────────────── */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;
  --space-6:           24px;
  --space-8:           32px;
  --space-10:          40px;
  --space-12:          48px;

  /* ─── Transitions & motion (reusable across components) ──────────── */
  --duration-fast:     120ms;   /* hover, micro-interactions */
  --duration-base:     180ms;   /* default fade/scale */
  --duration-slow:     260ms;   /* overlay/panel entrances */
  --easing-out:        cubic-bezier(0.16, 1, 0.3, 1);     /* natural decel */
  --easing-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --easing-pop:        cubic-bezier(0.2, 0.9, 0.3, 1.1);  /* slight overshoot */
  --transition-fade:   opacity var(--duration-base) var(--easing-out);
  --transition-pop:    transform var(--duration-base) var(--easing-pop), opacity var(--duration-base) var(--easing-out);

  /* ─── Type sizes ────────────────────────────────────────────────── */
  --size-display:      40px;   /* hero stat / login brand */
  --size-h1:           32px;
  --size-h2:           24px;
  --size-h3:           20px;
  --size-body-lg:      16px;
  --size-body:         14px;   /* primary body / labels */
  --size-caption:      12px;
  --size-micro:        10px;   /* sidebar tab labels */
  --line-tight:        1.0;
  --line-default:      1.45;
  --line-relaxed:      1.6;

  /* Layout */
  --rail-width:        108px;
  --rail-width-expand: 305px;
  --chat-rail-width:   340px;
}

/* ─── Semantic / element styles ───────────────────────────────────── */

/* Global default: every element inherits the brand sans (FS Albert Pro) unless it explicitly
   overrides (e.g. .kube-md code monospace, --font-brand wordmark). Without this, elements lacking
   a .kube-* utility class fall back to the browser default (Times), and <button>/<input>/etc. don't
   inherit at all (UA styles give them their own font) — so they stay on the system default. */
body {
  font-family: var(--font-sans);
}
button, input, select, textarea {
  font-family: inherit;
}

/* ─── Focus ────────────────────────────────────────────────────────────
   REMOVED (2026-08-22): the orange focus halo (box-shadow + border override) that
   this block painted on EVERY focused input/select/textarea app-wide — including
   the login username field — per user request. Controls keep whatever focus
   treatment their own inline styles give them; most show none.

   `outline: none !important` is retained so the browser's default BLUE ring stays
   suppressed (it was the original reason this block existed). If a visible focus
   indicator is wanted later, reintroduce it scoped to specific surfaces, not
   globally — the global ring drew on top of styled controls like the login inputs
   where it read as a defect. */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
}

.kube-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-h1);
  line-height: 44px;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}

.kube-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--size-h2);
  line-height: 1.45;
  color: var(--fg-primary);
}

.kube-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--size-h3);
  line-height: 1.45;
  color: var(--fg-primary);
}

.kube-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: 1.45;
  color: var(--fg-primary);
}

.kube-body-strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--size-body);
  line-height: 1.0;
  color: var(--fg-primary);
}

.kube-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-caption);
  line-height: 1.45;
  color: var(--fg-secondary);
}

.kube-micro {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--size-micro);
  line-height: 1.0;
  text-transform: none;
  color: var(--fg-on-dark-muted);
}

/* Brand wordmark — split-weight pattern.
   Primary word (Kube) is bold; trailing word (.AI / .Suite / AI Studio) is
   regular. Both the same color and size. */
.kube-wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  line-height: 1.0;
}
.kube-wordmark .light {
  font-weight: 400;
}

/* ─── Reusable transition keyframes ──────────────────────────────────
   Pair these with the --duration-* and --easing-* tokens for consistent
   overlays/panels/dialogs across the app. */
@keyframes kube-fade-in   { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes kube-fade-out  { from { opacity: 1; }                              to { opacity: 0; } }
@keyframes kube-pop-in    { from { opacity: 0; transform: scale(0.98); }      to { opacity: 1; transform: scale(1); } }
@keyframes kube-pop-out   { from { opacity: 1; transform: scale(1); }         to { opacity: 0; transform: scale(0.98); } }
@keyframes kube-slide-in-right  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes kube-slide-out-right { from { transform: translateX(0);    opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

.kube-anim-fade-in  { animation: kube-fade-in  var(--duration-slow) var(--easing-out) both; }
.kube-anim-fade-out { animation: kube-fade-out var(--duration-base) var(--easing-out) both; }
.kube-anim-pop-in   { animation: kube-pop-in   var(--duration-slow) var(--easing-pop) both; }
.kube-anim-pop-out  { animation: kube-pop-out  var(--duration-base) var(--easing-out) both; }
.kube-anim-slide-in-right  { animation: kube-slide-in-right  var(--duration-slow) var(--easing-out) both; }
.kube-anim-slide-out-right { animation: kube-slide-out-right var(--duration-base) var(--easing-out) both; }


/* ── Site overrides — appended, never edit the copied Studio block above ──
   The Studio ships a dusky-purple informational status token. This site has no
   informational status surface and the brand rule is "never blue", so it is
   re-pointed at the neutral ink ramp. Re-copying colors_and_type.css and
   re-appending this block is a safe upgrade path. */
:root {
  --status-info: var(--warm-700);

  /* Marketing-only display scale. The Studio's --size-display (40px) is a
     product stat size; a marketing hero needs a bigger, fluid step. */
  --size-hero:      clamp(2.75rem, 1.4rem + 5.6vw, 6rem);
  --size-section:   clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
  --tracking-hero:  -0.03em;

  /* Dot-grid canvas — the Flow builder's surface, reused as page texture. */
  --dot-grid-size:  22px;
  --dot-grid-dot:   color-mix(in srgb, var(--fg-primary) 9%, transparent);

  /* Marketing rhythm. The Studio space ramp stops at --space-12 (48px), which
     is a dense product spacing. Long-form sections need two more steps.
     NOTE: the Studio ramp is 1..6, 8, 10, 12 — there is no --space-7/9/11. */
  --space-16:       64px;
  --space-20:       96px;
}