/* ─────────────────────────────────────────────────────────────────────
   KUBE AI Studio — Colors & Type
   Extracted from Figma source ("IngLab AI Studio (Copy).fig")
   The product is rebranded from "IngLab" → "KUBE" but visual DNA is identical.
   ───────────────────────────────────────────────────────────────────── */

/* 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-600:        #B45309;          /* deep accent — warning-banner text on
                                           tinted surfaces; 6 screens previously
                                           rode var() fallbacks because the ramp
                                           stopped at 500 */
  --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-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 */

  /* ─── 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. ─ */
  /* Canvas is intentionally aliased to --surface-1 so every page bg matches and
     sticky fade-overlays (which use --surface-1 as their end stop) blend cleanly. */
  --gradient-canvas:   var(--surface-1);
  --gradient-panel:    var(--surface-2);
  --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%);
  /* Ambient hero — dark near-black top fading into a warm amber glow rising
     from the bottom. Used behind AmbientField on dark "hero" cards (member
     home / passport / snap-pass, the role-switch card, streak detail, and the
     merchant home/welcome heroes) so the glow-orbs read as a luminous amber
     bloom instead of flat black. */
  --gradient-ambient:  radial-gradient(135% 120% at 50% 118%, #F2A03F 0%, #C8470F 24%, #5C2E16 52%, #1C1411 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;

  /* ─── 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 ───────────────────────────────────── */

.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 / Agentic / IngLab) is bold; trailing word
   (AI Studio / .AI / AI Studio) is regular. Both same color/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;
}


/* Spinner keyframe for the lazy-load indicator on the recent-activity screen
   (also reusable wherever a small loading spinner is needed). */
@keyframes spin {
  to { transform: rotate(360deg); }
}