/* =========================================================================
   Jarvis Design System — Colors & Typography
   --------------------------------------------------------------------------
   Brand: Jarvis — multi-agent AI secretary / personal mentor
   Vibe : calm productivity. Sage canvas, lime-green CTA, near-black ink.
   Type : Manrope (display, weight 800/900) + Inter (body) + JetBrains Mono.
   ========================================================================= */

/* ---- Webfonts (Google Fonts substitutes — see README) -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------- BRAND & ACCENT -------------------------- */
  --jv-primary:           #9fe870;   /* Jarvis green — universal CTA */
  --jv-primary-active:    #cdffad;   /* hover / active lighter */
  --jv-primary-neutral:   #c5edab;   /* mid-saturation green */
  --jv-primary-pale:      #e2f6d5;   /* soft surface / badge bg */
  --jv-on-primary:        #0e0f0c;   /* text on green */

  /* ----------------------------- SURFACE ----------------------------- */
  --jv-canvas:            #ffffff;   /* card interior */
  --jv-canvas-soft:       #e8ebe6;   /* sage page background (signature) */
  --jv-canvas-deep:       #d8ddd2;   /* slight push beyond canvas-soft */

  /* ------------------------------ TEXT ------------------------------- */
  --jv-ink:               #0e0f0c;   /* near-black with olive warmth */
  --jv-ink-deep:          #163300;   /* deep forest green for positive ink */
  --jv-body:              #454745;   /* secondary body */
  --jv-mute:              #868685;   /* captions, placeholder */
  --jv-hair:              #d4d6d2;   /* hairline divider */

  /* ----------------------------- SEMANTIC ---------------------------- */
  --jv-positive:          #2ead4b;
  --jv-positive-deep:     #054d28;
  --jv-positive-bg:       #e2f6d5;

  --jv-warning:           #ffd11a;
  --jv-warning-deep:      #b86700;
  --jv-warning-content:   #4a3b1c;
  --jv-warning-bg:        #fff4cc;

  --jv-negative:          #d03238;
  --jv-negative-deep:     #a72027;
  --jv-negative-darkest:  #a7000d;
  --jv-negative-bg:       #320707;
  --jv-negative-soft:     #fbe5e6;

  /* ----------------------- TERTIARY ACCENTS -------------------------- */
  --jv-accent-orange:     #ffc091;
  --jv-accent-cyan:       #38c8ff;
  --jv-accent-violet:     #c9b8ff;

  /* --------------------- PROGRESS-RING PALETTE ----------------------- *
   * Mirrors the habit-tracker screenshots: dark green fill, pale rail.   */
  --jv-ring-fill:         #6ab04c;
  --jv-ring-rail:         #e2f6d5;

  /* ---------------------------- RADII -------------------------------- */
  --jv-r-none:  0px;
  --jv-r-sm:    8px;
  --jv-r-md:    12px;
  --jv-r-lg:    16px;
  --jv-r-xl:    24px;
  --jv-r-pill:  9999px;
  --jv-r-full:  9999px;

  /* --------------------------- SPACING ------------------------------- */
  --jv-s-xxs:   2px;
  --jv-s-xs:    4px;
  --jv-s-sm:    8px;
  --jv-s-md:    12px;
  --jv-s-lg:    16px;
  --jv-s-xl:    24px;
  --jv-s-2xl:   32px;
  --jv-s-3xl:   48px;
  --jv-s-4xl:   64px;

  /* --------------------------- ELEVATION ----------------------------- *
   * Jarvis uses surface contrast (sage canvas vs white card) as the
   * primary elevation cue. Shadows are quiet and only for floating UI.   */
  --jv-shadow-1: 0 1px 2px rgba(14,15,12,0.04), 0 1px 1px rgba(14,15,12,0.03);
  --jv-shadow-2: 0 6px 16px rgba(14,15,12,0.06), 0 2px 4px rgba(14,15,12,0.04);
  --jv-shadow-3: 0 18px 40px rgba(14,15,12,0.12), 0 6px 12px rgba(14,15,12,0.06);

  /* ------------------------- BORDER WIDTHS --------------------------- */
  --jv-bw-hair:   1px;
  --jv-bw-ink:    1.5px;

  /* --------------------------- TYPOGRAPHY ---------------------------- *
   * Two-face: Manrope (display, 800/900) + Inter (body, 400/600).        */
  --jv-font-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --jv-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --jv-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Base sizes (matches DESIGN.md Wise scale, adapted) ---------- */
  --jv-fs-display-mega:  126px;
  --jv-fs-display-xxl:    96px;
  --jv-fs-display-xl:     64px;
  --jv-fs-display-lg:     47px;
  --jv-fs-display-md:     40px;
  --jv-fs-display-sm:     32px;
  --jv-fs-display-xs:     24px;
  --jv-fs-body-lg:        20px;
  --jv-fs-body-md:        16px;
  --jv-fs-body-sm:        14px;
  --jv-fs-caption:        12px;

  /* ----- Easing & motion -------------------------------------------- */
  --jv-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --jv-ease-emphatic: cubic-bezier(.2, .8, .2, 1);
  --jv-dur-fast:   120ms;
  --jv-dur-med:    220ms;
  --jv-dur-slow:   360ms;
}

/* =========================================================================
   Semantic helpers — use these in components.
   ========================================================================= */
.jv-bg-canvas       { background: var(--jv-canvas); }
.jv-bg-canvas-soft  { background: var(--jv-canvas-soft); }
.jv-bg-ink          { background: var(--jv-ink); color: var(--jv-primary); }
.jv-bg-green-pale   { background: var(--jv-primary-pale); }

.jv-text-ink   { color: var(--jv-ink); }
.jv-text-body  { color: var(--jv-body); }
.jv-text-mute  { color: var(--jv-mute); }

/* =========================================================================
   Type primitives — semantic names map to the scale above.
   ========================================================================= */
.jv-display-mega,
.jv-h0 {
  font-family: var(--jv-font-display);
  font-weight: 800;
  font-size: var(--jv-fs-display-mega);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--jv-ink);
}
.jv-display-xxl {
  font-family: var(--jv-font-display);
  font-weight: 800;
  font-size: var(--jv-fs-display-xxl);
  line-height: 0.85;
  letter-spacing: -0.03em;
}
.jv-display-xl,
.jv-h1 {
  font-family: var(--jv-font-display);
  font-weight: 800;
  font-size: var(--jv-fs-display-xl);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--jv-ink);
}
.jv-display-md,
.jv-h2 {
  font-family: var(--jv-font-display);
  font-weight: 800;
  font-size: var(--jv-fs-display-md);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--jv-ink);
}
.jv-display-sm,
.jv-h3 {
  font-family: var(--jv-font-body);
  font-weight: 600;
  font-size: var(--jv-fs-display-sm);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--jv-ink);
}
.jv-display-xs,
.jv-h4 {
  font-family: var(--jv-font-body);
  font-weight: 600;
  font-size: var(--jv-fs-display-xs);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--jv-ink);
}
.jv-body-lg,
.jv-lead {
  font-family: var(--jv-font-body);
  font-weight: 400;
  font-size: var(--jv-fs-body-lg);
  line-height: 1.5;
  color: var(--jv-body);
}
.jv-body-md,
.jv-p {
  font-family: var(--jv-font-body);
  font-weight: 400;
  font-size: var(--jv-fs-body-md);
  line-height: 1.5;
  color: var(--jv-body);
}
.jv-body-md-strong {
  font-family: var(--jv-font-body);
  font-weight: 600;
  font-size: var(--jv-fs-body-md);
  line-height: 1.5;
  color: var(--jv-ink);
}
.jv-body-sm {
  font-family: var(--jv-font-body);
  font-weight: 400;
  font-size: var(--jv-fs-body-sm);
  line-height: 1.43;
  color: var(--jv-body);
}
.jv-body-sm-strong {
  font-family: var(--jv-font-body);
  font-weight: 600;
  font-size: var(--jv-fs-body-sm);
  line-height: 1.43;
  color: var(--jv-ink);
}
.jv-caption {
  font-family: var(--jv-font-body);
  font-weight: 400;
  font-size: var(--jv-fs-caption);
  line-height: 1.33;
  color: var(--jv-mute);
}
.jv-eyebrow {
  font-family: var(--jv-font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jv-mute);
}
.jv-mono {
  font-family: var(--jv-font-mono);
  font-weight: 500;
  font-feature-settings: "ss01" on;
}

/* =========================================================================
   Surface primitives — cards, bands, dividers.
   ========================================================================= */
.jv-card {
  background: var(--jv-canvas);
  color: var(--jv-ink);
  border-radius: var(--jv-r-xl);
  padding: var(--jv-s-xl);
}
.jv-card-sage    { background: var(--jv-canvas-soft); border-radius: var(--jv-r-xl); padding: var(--jv-s-xl); }
.jv-card-green   { background: var(--jv-primary-pale); border-radius: var(--jv-r-xl); padding: var(--jv-s-xl); }
.jv-card-dark    { background: var(--jv-ink); color: var(--jv-primary); border-radius: var(--jv-r-xl); padding: var(--jv-s-xl); }
.jv-card-outline { background: var(--jv-canvas); border: var(--jv-bw-hair) solid var(--jv-ink); border-radius: var(--jv-r-xl); padding: var(--jv-s-xl); }

/* =========================================================================
   Buttons.
   ========================================================================= */
.jv-btn {
  font-family: var(--jv-font-body);
  font-weight: 600;
  font-size: var(--jv-fs-body-md);
  line-height: 1.5;
  padding: var(--jv-s-md) var(--jv-s-xl);
  border-radius: var(--jv-r-xl);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--jv-s-sm);
  transition: background var(--jv-dur-fast) var(--jv-ease-standard),
              transform var(--jv-dur-fast) var(--jv-ease-standard);
}
.jv-btn:active { transform: scale(0.98); }

.jv-btn-primary    { background: var(--jv-primary); color: var(--jv-on-primary); }
.jv-btn-primary:hover { background: var(--jv-primary-active); }

.jv-btn-secondary  { background: var(--jv-canvas-soft); color: var(--jv-ink); }
.jv-btn-secondary:hover { background: var(--jv-canvas-deep); }

.jv-btn-tertiary   { background: var(--jv-canvas); color: var(--jv-ink); border: var(--jv-bw-hair) solid var(--jv-ink); }
.jv-btn-tertiary:hover { background: var(--jv-canvas-soft); }

.jv-btn-ghost      { background: transparent; color: var(--jv-ink); }
.jv-btn-ghost:hover { background: var(--jv-canvas-soft); }

/* =========================================================================
   Form inputs.
   ========================================================================= */
.jv-input {
  font-family: var(--jv-font-body);
  font-weight: 400;
  font-size: var(--jv-fs-body-md);
  line-height: 1.5;
  color: var(--jv-ink);
  background: var(--jv-canvas);
  border: var(--jv-bw-hair) solid var(--jv-ink);
  border-radius: var(--jv-r-md);
  padding: var(--jv-s-md) var(--jv-s-lg);
  outline: 0;
  transition: border-color var(--jv-dur-fast) var(--jv-ease-standard),
              box-shadow var(--jv-dur-fast) var(--jv-ease-standard);
}
.jv-input::placeholder { color: var(--jv-mute); }
.jv-input:focus {
  border-color: var(--jv-ink);
  box-shadow: 0 0 0 3px var(--jv-primary-pale);
}

/* =========================================================================
   Badges & pills.
   ========================================================================= */
.jv-badge {
  font-family: var(--jv-font-body);
  font-weight: 600;
  font-size: var(--jv-fs-body-sm);
  padding: var(--jv-s-xs) var(--jv-s-md);
  border-radius: var(--jv-r-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--jv-s-xs);
}
.jv-badge-positive { background: var(--jv-primary-pale); color: var(--jv-positive-deep); }
.jv-badge-warning  { background: var(--jv-warning-bg);   color: var(--jv-warning-content); }
.jv-badge-negative { background: var(--jv-negative-bg);  color: var(--jv-canvas); }
.jv-badge-neutral  { background: var(--jv-canvas-soft);  color: var(--jv-ink); }

/* =========================================================================
   Defaults so plain HTML looks like the system.
   ========================================================================= */
html, body {
  font-family: var(--jv-font-body);
  color: var(--jv-ink);
  background: var(--jv-canvas-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}