/* Salix design tokens — exact values from the Figma file "Salix – Dev Version".
   Load the fonts first:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
*/
:root {
  /* Neutrals */
  --ink: #181818;          /* headings, buttons, dark cards */
  --ink-deep: #0A0A0A;     /* H1 on inner pages, form labels, legal headings */
  --body: #46484D;         /* paragraphs, table text */
  --muted: #6C6F76;        /* "billed monthly", fine print */
  --placeholder: #5B5B5B;
  --panel: #FAFAFA;        /* section panels, cards, header bar */
  --panel-2: #F5F5F5;      /* nested mock tray */
  --white: #FFFFFF;
  --line: rgba(108, 111, 118, 0.06);   /* default 1.5px hairline */
  --line-2: rgba(108, 111, 118, 0.12); /* chips, plan cards */
  --line-3: rgba(70, 72, 77, 0.06);    /* form fields, review cards */

  /* Brand (used sparingly, mostly inside product mockups) */
  --blue: #466CF3;      /* Theme Color 02 — active tab, popular plan, mission card, links */
  --royal: #1470EF;     /* selected analytics pill, "Approved" */
  --cyan: #21CCEE;      /* button underline, "Closed won" */
  --violet: #6927DA;
  --magenta: #F23D94;   /* "Negotiation", "Pending" */
  --pink: #F83D69;      /* stat card, compare checks, "SAVE 20%", 404 zero, value icons */
  --orange: #FF3C00;    /* inbox badge, negative trend */
  --green: #16C12A;     /* positive trend in light mocks */

  /* The signature 8px rainbow bar on the very top and bottom of every page */
  --rainbow: linear-gradient(90deg, #21CCEE 0%, #1470EF 33.039%, #6927DA 68.845%, #F23D94 100%);

  /* Type */
  --font-display: "Geist", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-panel: 32px;   /* big #FAFAFA panels, dark feature band */
  --r-header: 24px;
  --r-shell: 20px;   /* product mock frame */
  --r-card: 16px;
  --r-field: 12px;
  --r-inner: 8px;
  --r-pill: 100px;

  /* Layout */
  --content: 1060px;   /* main column */
  --guide: 1201px;     /* distance between the two vertical guide lines */
  --gutter: 16px;
  --section-gap: 128px;

  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Figma text styles */
.t-h1 { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.1; letter-spacing: -3.5px; }
.t-h2 { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.2; letter-spacing: -3px; }
.t-h3 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.4; letter-spacing: -1.5px; }
.t-h4 { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.4; letter-spacing: -1px; }
.t-20b { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 1.7; }
.t-18b { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 1.7; letter-spacing: -0.3px; }
.t-18m { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.7; }
.t-16  { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.7; }
.t-16m { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.7; }
.t-14  { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.7; }
.t-14m { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.7; }
.t-12  { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.7; }

@media (max-width: 760px) {
  .t-h1 { font-size: 44px; letter-spacing: -2.4px; }
  .t-h2 { font-size: 34px; letter-spacing: -2px; }
  .t-h3 { font-size: 28px; letter-spacing: -1.2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}