/* Cedana Design Tokens
 * Color palette + typography fundamentals.
 * Source: cedana.ai live site + CSV spec. Aventa is a paid display face;
 * Outfit + IBM Plex Sans are free and used directly.
 */

/* -- Webfonts (local Outfit; IBM Plex Sans + Aventa via CDN) -- */
@font-face {
  font-family: "Outfit";
  src: url("./fonts/Outfit-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("./fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("./fonts/Outfit-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("./fonts/Outfit-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("./fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* IBM Plex Sans + an Aventa-substitute fall back to Google Fonts.
 * Aventa is Adobe Fonts only. We approximate it with "Bricolage Grotesque"
 * (similar geometric-humanist proportions and an italic with character).
 * REPLACE with real Aventa @font-face when license is available. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500&display=swap");

:root {
  /* -- Brand color -- */
  --cedana-blue: #182AFB;        /* primary brand blue (links, buttons, accents) */
  --cedana-blue-deep: #0032E8;   /* press / focus / dark blue */
  --cedana-blue-mid: #1353D8;    /* mid blue used in icon glyphs */
  --cedana-blue-soft: #2B44FF;   /* lighter accent in diagrams */
  --cedana-blue-tint: #EFF6FF;   /* soft blue fill (selected cells) */
  --cedana-red: #E80000;         /* "without migration" / negative state */

  /* -- Neutrals (greyscale, near-black to white) -- */
  --ink-900: #0C0C0C;            /* heading body */
  --ink-800: #181C2A;            /* logo / nav text */
  --ink-700: #272727;            /* hero body copy */
  --ink-600: #2F2F2F;            /* secondary heading on light bg */
  --ink-500: #4F4F4F;            /* descriptions */
  --ink-400: #5B5B5B;            /* sub-headings on tinted bg */
  --ink-300: #6C6C6C;            /* footer text / partner logo fill */
  --ink-200: #737C7F;            /* icon stroke neutral */
  --ink-100: #999999;            /* placeholder / muted */
  --line-200: #D1D5DB;           /* dashed/solid diagram outlines */
  --line-100: #9CA3AF;           /* mid grey strokes */
  --line-soft: #F3F4F6;          /* very light fills */

  /* -- Surfaces -- */
  --surface-0: #FFFFFF;          /* base white */
  --surface-1: #F8F9FA;          /* section background (alternating) */
  --surface-2: #F2F2F2;          /* nav / form input fill */
  --surface-invert: #182AFB;     /* CTA section blue */
  --surface-ink: #181C2A;        /* dark surfaces (rare) */

  /* -- Type families -- */
  --font-display: "Bricolage Grotesque", "Aventa", ui-sans-serif, system-ui, sans-serif;
  --font-ui:      "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -- Display sizes (Aventa) -- */
  --display-xl: 72px;     /* hero H1 */
  --display-lg: 50px;     /* section H1 */
  --display-md: 42px;     /* footer "command your compute_" */
  --display-sm: 32px;     /* sub-section H2 */
  --display-xs: 28px;     /* card titles */

  /* -- Body / UI sizes -- */
  --body-lg: 22px;        /* feature subheads */
  --body-md: 20px;        /* hero subhead */
  --body-base: 16px;      /* default body */
  --body-sm: 14px;        /* form placeholder */

  --lh-display: 0.99;
  --lh-tight:   1.0;
  --lh-snug:    1.27;
  --lh-body:    1.5;

  --tracking-display: -2.704px; /* Aventa H1 letter-spacing */
  --tracking-section: -0.75px;

  /* -- Radii -- */
  --radius-button: 5.01px;       /* exact value used across site */
  --radius-card: 2px;            /* rare; mostly square */

  /* -- Shadows / elevation -- */
  --shadow-card: 0px 0px 14px rgba(0, 0, 0, 0.05);   /* feature cards */

  /* -- Layout -- */
  --container-max: 1212px;
  --page-pad-x: 354px;           /* on 1920 */
  --section-pad-y: 133px;
}

/* ---------- Semantic element styles ---------- */

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--body-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink-800);
  margin: 0;
}
h1 em, .h1-accent {
  font-style: italic;
  color: var(--cedana-blue);
  font-weight: 400;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-lg);
  line-height: 0.94;
  letter-spacing: var(--tracking-section);
  color: var(--ink-900);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-xs);
  line-height: 1;
  color: var(--ink-900);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--body-base);
  color: var(--ink-800);
}

p, .body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--body-base);
  line-height: var(--lh-body);
  color: var(--ink-500);
}

.lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--body-md);
  line-height: 1.3;
  color: var(--ink-700);
}

a {
  color: var(--cedana-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Outline button — used everywhere (uppercase IBM Plex Sans) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 17px;
  height: 46px;
  border: 1px solid var(--cedana-blue);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--cedana-blue);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--body-base);
  line-height: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--cedana-blue); color: var(--surface-0); }
.btn:active { background: var(--cedana-blue-deep); border-color: var(--cedana-blue-deep); }
.btn--invert { border-color: var(--surface-0); color: var(--surface-0); }
.btn--invert:hover { background: var(--surface-0); color: var(--cedana-blue); }

/* Card primitive (feature blocks) */
.card {
  background: var(--surface-0);
  border-radius: 0;
  filter: drop-shadow(var(--shadow-card));
  padding: 32px 32px 94px;
}

/* Section backgrounds */
.section--alt { background: var(--surface-1); }
.section--blue { background: var(--surface-invert); color: var(--surface-0); }