/* ============================================================
   Linear Design Language — drop-in tokens + base styles
   Measured from linear.app (homepage, pricing, /method), Sept 2026.

   Usage: <body class="ln">   — this system is dark-only by design.
   Fonts: Inter is free; keep the feature settings or the face is not Linear.
   <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Type faces ---- */
  --ln-font: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --ln-font-editorial: "Tiempos Headline", "Newsreader", Georgia, "Times New Roman", serif;
  --ln-font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ln-font-settings: "cv01", "ss03";
  --ln-font-variations: "opsz" auto;

  /* ---- Weights: non-integer, straight off the variable axis ---- */
  --ln-w-light: 300;
  --ln-w-normal: 400;
  --ln-w-medium: 510;
  --ln-w-semibold: 590;
  --ln-w-bold: 680;

  /* ---- Title scale ---- */
  --ln-title-9: 4.5rem;   --ln-title-9-lh: 1;     --ln-title-9-ls: -0.022em;
  --ln-title-8: 4rem;     --ln-title-8-lh: 1.06;  --ln-title-8-ls: -0.022em;
  --ln-title-7: 3.5rem;   --ln-title-7-lh: 1.1;   --ln-title-7-ls: -0.022em;
  --ln-title-6: 3rem;     --ln-title-6-lh: 1;     --ln-title-6-ls: -0.022em;
  --ln-title-5: 2.5rem;   --ln-title-5-lh: 1.1;   --ln-title-5-ls: -0.022em;
  --ln-title-4: 2rem;     --ln-title-4-lh: 1.125; --ln-title-4-ls: -0.022em;
  --ln-title-3: 1.5rem;   --ln-title-3-lh: 1.33;  --ln-title-3-ls: -0.012em;
  --ln-title-2: 1.25rem;  --ln-title-2-lh: 1.33;  --ln-title-2-ls: -0.012em;
  --ln-title-1: 1.0625rem;--ln-title-1-lh: 1.4;   --ln-title-1-ls: -0.012em;

  /* ---- Text scale ---- */
  --ln-text-large: 1.0625rem;  --ln-text-large-lh: 1.6; --ln-text-large-ls: 0em;
  --ln-text-regular: .9375rem; --ln-text-regular-lh: 1.6; --ln-text-regular-ls: -0.011em;
  --ln-text-small: .875rem;    --ln-text-small-lh: 1.5;  --ln-text-small-ls: -0.013em;
  --ln-text-mini: .8125rem;    --ln-text-mini-lh: 1.5;   --ln-text-mini-ls: -0.01em;
  --ln-text-micro: .75rem;     --ln-text-micro-lh: 1.4;  --ln-text-micro-ls: 0em;
  --ln-text-tiny: .625rem;     --ln-text-tiny-lh: 1.5;   --ln-text-tiny-ls: -0.015em;

  /* ---- Radius: pills mean interactive, 12px means container ---- */
  --ln-radius-xs: 4px;
  --ln-radius-sm: 6px;
  --ln-radius-md: 8px;
  --ln-radius-lg: 12px;
  --ln-radius-xl: 16px;
  --ln-radius-2xl: 24px;
  --ln-radius-3xl: 32px;
  --ln-radius-rounded: 9999px;
  --ln-radius-circle: 50%;

  /* ---- Spacing ---- */
  --ln-space-xs: 4px;
  --ln-space-sm: 8px;
  --ln-space-md: 12px;
  --ln-space-lg: 16px;
  --ln-space-xl: 24px;
  --ln-page-inline: 24px;
  --ln-outer: 28px;
  --ln-inset: 32px;
  --ln-page-block: 48px;
  --ln-section: 64px;

  /* ---- Layout ---- */
  --ln-header-height: 72px;
  --ln-header-blur: 20px;
  --ln-max-marketing: calc(1344px + 28px * 2);
  --ln-max-page: 1024px;
  --ln-max-prose: 624px;
  --ln-grid-columns: 8;

  /* ---- Motion: one curve carries the site ---- */
  --ln-ease: cubic-bezier(.25, .46, .45, .94);   /* ease-out-quad */
  --ln-speed-quick: .1s;
  --ln-speed-regular: .16s;
  --ln-speed-slow: .25s;

  /* ---- Elevation: light, not shadow ---- */
  --ln-edge: inset 0 0 0 1px rgba(255, 255, 255, .03);
  --ln-edge-strong: inset 0 0 0 1px rgba(255, 255, 255, .05);
  --ln-shadow-low: 0 2px 4px rgba(0, 0, 0, .1);
  --ln-shadow-medium: 0 4px 24px rgba(0, 0, 0, .2);
  --ln-shadow-high: 0 7px 32px rgba(0, 0, 0, .35);
}

/* ============================================================
   Colors — dark only. This system publishes no light theme.
   ============================================================ */
.ln {
  --ln-bg-marketing: #010102;
  --ln-bg-primary: #08090a;
  --ln-bg-level-1: #0f1011;
  --ln-bg-level-2: #141516;
  --ln-bg-level-3: #191a1b;
  --ln-bg-secondary: #1c1c1f;
  --ln-bg-tertiary: #232326;
  --ln-bg-quaternary: #28282c;
  --ln-bg-translucent: rgba(255, 255, 255, .05);
  --ln-header-bg: rgba(11, 11, 11, .8);

  --ln-text-primary: #f7f8f8;
  --ln-text-secondary: #d0d6e0;
  --ln-text-tertiary: #8a8f98;
  --ln-text-quaternary: #62666d;

  --ln-border-primary: #23252a;
  --ln-border-secondary: #34343a;
  --ln-border-tertiary: #3e3e44;
  --ln-border-translucent: rgba(255, 255, 255, .05);
  --ln-border-translucent-strong: rgba(255, 255, 255, .08);

  --ln-line-primary: #37393a;
  --ln-line-secondary: #202122;
  --ln-line-tertiary: #18191a;

  --ln-brand: #5e6ad2;
  --ln-brand-text: #ffffff;
  --ln-accent: #7170ff;
  --ln-accent-hover: #828fff;
  --ln-accent-tint: #18182f;
  --ln-link: #828fff;
  --ln-link-hover: #ffffff;

  /* the primary action is a near-white pill, not the brand indigo */
  --ln-action-bg: #e5e5e6;
  --ln-action-bg-hover: #ffffff;
  --ln-action-text: #08090a;

  --ln-overlay: rgba(0, 0, 0, .85);
  --ln-red: #eb5757;
  --ln-green: #27a644;
  --ln-yellow: #f0bf00;
  --ln-orange: #fc7840;
  --ln-teal: #00b8cc;
  --ln-indigo: #5e6ad2;

  color-scheme: dark;
  margin: 0;
  font-family: var(--ln-font);
  font-feature-settings: var(--ln-font-settings);
  font-variation-settings: var(--ln-font-variations);
  font-size: var(--ln-text-regular);
  font-weight: var(--ln-w-normal);
  line-height: var(--ln-text-regular-lh);
  letter-spacing: var(--ln-text-regular-ls);
  /* body copy is tertiary grey — primary is reserved for headlines and actions */
  color: var(--ln-text-tertiary);
  background: var(--ln-bg-primary);
  -webkit-font-smoothing: antialiased;
}

.ln h1, .ln h2, .ln h3, .ln h4, .ln p { margin: 0; }
.ln a { color: var(--ln-link); text-decoration: none; }
.ln a:focus-visible { outline: 2px solid var(--ln-accent); outline-offset: 2px; }

/* ---- Titles ---- */
.ln .title-9, .ln .title-8, .ln .title-7, .ln .title-6,
.ln .title-5, .ln .title-4, .ln .title-3, .ln .title-2, .ln .title-1 {
  color: var(--ln-text-primary);
  font-weight: var(--ln-w-semibold);
  text-wrap: balance;
}
.ln .title-9 { font-size: var(--ln-title-9); line-height: var(--ln-title-9-lh); letter-spacing: var(--ln-title-9-ls); }
.ln .title-8 { font-size: var(--ln-title-8); line-height: var(--ln-title-8-lh); letter-spacing: var(--ln-title-8-ls); }
.ln .title-7 { font-size: var(--ln-title-7); line-height: var(--ln-title-7-lh); letter-spacing: var(--ln-title-7-ls);
                font-weight: var(--ln-w-medium); }   /* the hero renders lighter than the ladder */
.ln .title-6 { font-size: var(--ln-title-6); line-height: var(--ln-title-6-lh); letter-spacing: var(--ln-title-6-ls); }
.ln .title-5 { font-size: var(--ln-title-5); line-height: var(--ln-title-5-lh); letter-spacing: var(--ln-title-5-ls); }
.ln .title-4 { font-size: var(--ln-title-4); line-height: var(--ln-title-4-lh); letter-spacing: var(--ln-title-4-ls);
                font-weight: var(--ln-w-medium); }
.ln .title-3 { font-size: var(--ln-title-3); line-height: var(--ln-title-3-lh); letter-spacing: var(--ln-title-3-ls); }
.ln .title-2 { font-size: var(--ln-title-2); line-height: var(--ln-title-2-lh); letter-spacing: var(--ln-title-2-ls); }
.ln .title-1 { font-size: var(--ln-title-1); line-height: var(--ln-title-1-lh); letter-spacing: var(--ln-title-1-ls); }

/* the one sanctioned exception: editorial surfaces swap the display face */
.ln .title-editorial {
  font-family: var(--ln-font-editorial);
  font-size: var(--ln-title-6); line-height: 1; letter-spacing: 0;
  font-weight: var(--ln-w-normal); color: var(--ln-text-primary);
}

/* ---- Text ---- */
.ln .text-large   { font-size: var(--ln-text-large);   line-height: var(--ln-text-large-lh);   letter-spacing: var(--ln-text-large-ls); }
.ln .text-regular { font-size: var(--ln-text-regular); line-height: var(--ln-text-regular-lh); letter-spacing: var(--ln-text-regular-ls); }
.ln .text-small   { font-size: var(--ln-text-small);   line-height: var(--ln-text-small-lh);   letter-spacing: var(--ln-text-small-ls); }
.ln .text-mini    { font-size: var(--ln-text-mini);    line-height: var(--ln-text-mini-lh);    letter-spacing: var(--ln-text-mini-ls); }
.ln .text-micro   { font-size: var(--ln-text-micro);   line-height: var(--ln-text-micro-lh);   letter-spacing: var(--ln-text-micro-ls); }
.ln .text-tiny    { font-size: var(--ln-text-tiny);    line-height: var(--ln-text-tiny-lh);    letter-spacing: var(--ln-text-tiny-ls); }
.ln code, .ln .code { font-family: var(--ln-font-mono); font-size: var(--ln-text-mini); }

/* ---- Buttons: all pills, all 32px tall ---- */
.ln .btn {
  display: inline-flex; align-items: center; gap: var(--ln-space-sm);
  height: 32px; padding: 0 var(--ln-space-md);
  border: 1px solid transparent; border-radius: var(--ln-radius-rounded);
  font: inherit; font-size: var(--ln-text-mini); font-weight: var(--ln-w-medium);
  letter-spacing: var(--ln-text-mini-ls); line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  background: transparent; color: var(--ln-text-tertiary);
  transition: color var(--ln-speed-quick) var(--ln-ease),
              background-color var(--ln-speed-regular) var(--ln-ease),
              border-color var(--ln-speed-regular) var(--ln-ease);
}
.ln .btn--action { background: var(--ln-action-bg); color: var(--ln-action-text); border-color: var(--ln-action-bg); font-weight: var(--ln-w-medium); }
.ln .btn--action:active { background: var(--ln-action-bg-hover); border-color: var(--ln-action-bg-hover); }
.ln .btn--ghost { font-weight: var(--ln-w-normal); }
.ln .btn--ghost:active { background: var(--ln-bg-translucent); color: var(--ln-text-primary); }
.ln .btn--brand { background: var(--ln-brand); color: var(--ln-brand-text); border-color: var(--ln-brand); }
.ln .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ln-accent); }

/* ---- Surfaces: elevation drawn with light ---- */
.ln .surface {
  background: var(--ln-bg-level-1);
  border-radius: var(--ln-radius-lg);
  box-shadow: var(--ln-edge);
  padding: var(--ln-space-xl);
}
.ln .surface--overlay {
  background: var(--ln-bg-secondary);
  box-shadow: var(--ln-edge-strong), var(--ln-shadow-medium);
  padding: var(--ln-space-lg);
}

/* ---- Structure ---- */
.ln .container { max-width: var(--ln-max-marketing); margin-inline: auto; padding-inline: var(--ln-outer); }
.ln .container--page { max-width: var(--ln-max-page); padding-inline: var(--ln-page-inline); }
.ln .prose { max-width: var(--ln-max-prose); }
.ln .divider { border: 0; border-top: 1px solid var(--ln-line-secondary); margin: 0; }
.ln .header {
  position: sticky; top: 0; z-index: 100;
  height: var(--ln-header-height);
  display: flex; align-items: center; gap: var(--ln-space-xl);
  background: var(--ln-header-bg);
  -webkit-backdrop-filter: blur(var(--ln-header-blur));
  backdrop-filter: blur(var(--ln-header-blur));
}
.ln .grid { display: grid; grid-template-columns: repeat(var(--ln-grid-columns), 1fr); gap: var(--ln-space-xl); }
.ln .section { padding-block: var(--ln-section); }
.ln .hero { background: var(--ln-bg-marketing); }