/* ============================================================
   MethusalemAI — Color System
   Anchored on the five brand swatches:
     Primary Teal  #156082   (teal-600 · primary action)
     Neutral Gray  #687280   (slate-500 · secondary text)
     Light Gray    #F1F5F9   (slate-100 · subtle surfaces)
     Accent Blue   #D6E6F7   (accent-200 · soft highlights)
     Dark Slate    #0F172A   (slate-900 · primary text / inverse)
   Ramps extend those anchors into a full, enterprise-calm system.
   ============================================================ */

:root {
  /* ---- Brand teal (primary) ------------------------------- */
  --teal-50:  #eef5f9;
  --teal-100: #d4e6f0;
  --teal-200: #aecdde;
  --teal-300: #7fadc6;
  --teal-400: #4e8aab;
  --teal-500: #2a6f92;
  --teal-600: #156082;   /* ★ brand primary */
  --teal-700: #12526e;
  --teal-800: #103f54;
  --teal-900: #0e2e3d;
  --teal-950: #0a1e29;

  /* ---- Slate / neutral ------------------------------------ */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;  /* ★ light gray */
  --slate-200: #e4e9f0;
  --slate-300: #cdd5df;
  --slate-400: #9aa3b2;
  --slate-500: #687280;  /* ★ neutral gray */
  --slate-600: #505864;
  --slate-700: #3a414c;
  --slate-800: #262c36;
  --slate-900: #0f172a;  /* ★ dark slate */
  --slate-950: #080d18;

  /* ---- Accent blue (soft, illustrative) ------------------- */
  --accent-100: #eaf2fc;
  --accent-200: #d6e6f7;  /* ★ accent blue */
  --accent-300: #b9d3f0;
  --accent-400: #8fb6e4;

  /* ---- Status (harmonised, moderate chroma) --------------- */
  --success-600: #1e8a5f;
  --success-fg:  #146a48;
  --success-bg:  #e4f3ec;
  --warning-600: #c98a2b;
  --warning-fg:  #8a5e15;
  --warning-bg:  #fbf0dc;
  --danger-600:  #c24a3e;
  --danger-fg:   #8f2e25;
  --danger-bg:   #fae7e4;
  --info-600:    var(--teal-600);
  --info-fg:     var(--teal-700);
  --info-bg:     var(--accent-100);

  /* ---- Semantic: surfaces --------------------------------- */
  --surface-page:        #ffffff;
  --surface-page-subtle: var(--slate-50);
  --surface-card:        #ffffff;
  --surface-raised:      #ffffff;
  --surface-sunken:      var(--slate-100);
  --surface-inverse:     var(--slate-900);
  --surface-brand:       var(--teal-600);
  --surface-brand-subtle:var(--teal-50);
  --surface-accent:      var(--accent-200);
  --surface-overlay:     rgba(8, 13, 24, 0.52);

  /* ---- Semantic: text ------------------------------------- */
  --text-primary:        var(--slate-900);
  --text-secondary:      var(--slate-600);
  --text-muted:          var(--slate-500);
  --text-disabled:       var(--slate-400);
  --text-inverse:        #ffffff;
  --text-inverse-muted:  rgba(255, 255, 255, 0.72);
  --text-brand:          var(--teal-600);
  --text-on-brand:       #ffffff;
  --text-link:           var(--teal-600);
  --text-link-hover:     var(--teal-700);

  /* ---- Semantic: borders ---------------------------------- */
  --border-subtle:  var(--slate-200);
  --border-default: #e1e7ef;
  --border-strong:  var(--slate-300);
  --border-brand:   var(--teal-600);
  --border-inverse: rgba(255, 255, 255, 0.14);

  /* ---- Interactive / primary ------------------------------ */
  --primary:          var(--teal-600);
  --primary-hover:    var(--teal-700);
  --primary-active:   var(--teal-800);
  --primary-contrast: #ffffff;
  --primary-subtle:   var(--teal-50);
  --focus-ring:       rgba(21, 96, 130, 0.38);

  /* ---- Brand gradients (used sparingly) ------------------- */
  --gradient-brand: linear-gradient(135deg, #1c7399 0%, #156082 100%);
  --gradient-deep:  linear-gradient(160deg, #12526e 0%, #0f172a 100%);
  --gradient-mist:  linear-gradient(180deg, #ffffff 0%, #eef5f9 100%);
  --gradient-sheen: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);

  /* ---- Categorical data-viz palette ----------------------- */
  --chart-1: var(--teal-600);
  --chart-2: var(--accent-400);
  --chart-3: var(--slate-400);
  --chart-4: var(--teal-300);
  --chart-5: var(--slate-600);
  --chart-6: var(--success-600);
}
/* ============================================================
   MethusalemAI — Typography
   Montserrat carries everything: display, headings, body, UI.
   JetBrains Mono is a technical accent for source citations,
   code, and small all-caps eyebrows in product/demo contexts.
   Tagline is always ALL CAPS with wide tracking:
   INNOVATION. AUTOMATION. INTEGRATION.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------- */
  --font-sans: 'Montserrat', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, 'Menlo', monospace;

  /* ---- Weights -------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Type scale (1rem = 16px) --------------------------- */
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base:1rem;       /* 16 */
  --text-md:  1.0625rem;  /* 17 */
  --text-lg:  1.125rem;   /* 18 */
  --text-xl:  1.25rem;    /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.25rem;    /* 36 */
  --text-5xl: 3rem;       /* 48 */
  --text-6xl: 3.75rem;    /* 60 */
  --text-7xl: 4.5rem;     /* 72 */
  --text-8xl: 5.5rem;     /* 88 */

  /* ---- Line height ---------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.66;

  /* ---- Letter spacing ------------------------------------- */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.18em;   /* tagline / eyebrow caps */

  /* ---- Semantic role sizes (convenience) ------------------ */
  --display-size:  var(--text-7xl);
  --h1-size:       var(--text-5xl);
  --h2-size:       var(--text-4xl);
  --h3-size:       var(--text-2xl);
  --h4-size:       var(--text-xl);
  --body-lg-size:  var(--text-lg);
  --body-size:     var(--text-base);
  --caption-size:  var(--text-sm);
  --eyebrow-size:  var(--text-xs);
}
/* ============================================================
   MethusalemAI — Spacing & Layout
   4px base grid. Generous section rhythm for an enterprise,
   confident marketing surface.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) --------------------------- */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;  /* 2  */
  --space-1:    0.25rem;   /* 4  */
  --space-1-5:  0.375rem;  /* 6  */
  --space-2:    0.5rem;    /* 8  */
  --space-2-5:  0.625rem;  /* 10 */
  --space-3:    0.75rem;   /* 12 */
  --space-4:    1rem;      /* 16 */
  --space-5:    1.25rem;   /* 20 */
  --space-6:    1.5rem;    /* 24 */
  --space-7:    1.75rem;   /* 28 */
  --space-8:    2rem;      /* 32 */
  --space-10:   2.5rem;    /* 40 */
  --space-12:   3rem;      /* 48 */
  --space-14:   3.5rem;    /* 56 */
  --space-16:   4rem;      /* 64 */
  --space-20:   5rem;      /* 80 */
  --space-24:   6rem;      /* 96 */
  --space-28:   7rem;      /* 112 */
  --space-32:   8rem;      /* 128 */
  --space-40:   10rem;     /* 160 */

  /* ---- Layout containers ---------------------------------- */
  --container-max:    1200px;
  --container-wide:   1320px;
  --container-narrow: 760px;
  --gutter:           24px;
  --gutter-lg:        40px;

  /* ---- Section rhythm ------------------------------------- */
  --section-y:       6rem;   /* 96  */
  --section-y-lg:    8rem;   /* 128 */
  --section-y-sm:    4rem;   /* 64  */

  /* ---- Z-index scale -------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
  --z-tooltip: 1100;
}
/* ============================================================
   MethusalemAI — Effects: radius, elevation, motion
   Corners are moderate and engineered (never pill-soft on
   content). Shadows are cool, slate-tinted, low-spread.
   Motion is calm and precise — no bounce.
   ============================================================ */

:root {
  /* ---- Radius --------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-full: 9999px;
  /* semantic */
  --radius-button: var(--radius-md);
  --radius-input:  var(--radius-md);
  --radius-card:   14px;
  --radius-pill:   var(--radius-full);

  /* ---- Elevation (cool, slate-tinted) --------------------- */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-xl:  0 24px 56px rgba(15, 23, 42, 0.14), 0 8px 20px rgba(15, 23, 42, 0.07);
  --shadow-2xl: 0 40px 90px rgba(15, 23, 42, 0.20), 0 14px 32px rgba(15, 23, 42, 0.10);
  --shadow-brand: 0 12px 34px rgba(21, 96, 130, 0.26);
  --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  --ring-focus:   0 0 0 4px var(--focus-ring);

  /* ---- Borders -------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --hairline: 1px solid var(--border-default);

  /* ---- Motion --------------------------------------------- */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);

  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   360ms;
  --duration-slower: 560ms;

  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard);
  --transition-transform: transform var(--duration-base) var(--ease-out);
}
/* ============================================================
   MethusalemAI — Base layer
   Light reset + brand defaults so any surface that links
   styles.css inherits the right type, colour and focus model.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-colors);
}
a:hover { color: var(--text-link-hover); }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

code, pre, kbd, samp { font-family: var(--font-mono); }

::placeholder { color: var(--text-muted); opacity: 1; }

::selection { background: var(--accent-200); color: var(--slate-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

hr { border: none; border-top: var(--hairline); margin: 0; }

/* ---- Keyframes used by components ------------------------- */
@keyframes ma-spin { to { transform: rotate(360deg); } }
@keyframes ma-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ma-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ma-scale-in {
  from { transform: scale(0.965); }
  to   { transform: scale(1); }
}
@keyframes ma-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---- Utility helpers used across cards & kits ------------- */
.ma-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-brand);
}
.ma-tagline {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.ma-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}