/* ============================================================================
   Cursor Design System — Colors & Type Tokens
   ----------------------------------------------------------------------------
   Warm cream canvas. Warm near-black ink. A single brand voltage (Cursor
   Orange) reserved for primary CTAs and the wordmark. Pastel timeline palette
   scoped to in-product agent visualizations only.
   ============================================================================ */

/* ---------- Fonts ---------- */
/* CursorGothic is licensed; using Inter as the open-source substitute per the
   brand guide. Inter @ 400 with -1.5% letter-spacing approximates the
   editorial voice. JetBrains Mono is the canonical code face. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Color: Brand & Accent ---------- */
  --color-primary:        #f54e00;   /* Cursor Orange */
  --color-primary-active: #d04200;   /* Press state */

  /* ---------- Color: Surface ---------- */
  --color-canvas:         #f7f7f4;   /* Warm cream page floor */
  --color-canvas-soft:    #fafaf7;   /* IDE-pane bg inside mockups */
  --color-surface-card:   #ffffff;   /* Pure white card surface */
  --color-surface-strong: #e6e5e0;   /* Badges, tag pills */

  /* ---------- Color: Hairlines ---------- */
  --color-hairline:        #e6e5e0;
  --color-hairline-soft:   #efeee8;
  --color-hairline-strong: #cfcdc4;

  /* ---------- Color: Text ---------- */
  --color-ink:         #26251e;   /* Warm near-black; display + body emphasis */
  --color-body:        #5a5852;   /* Default running text */
  --color-body-strong: #26251e;   /* Same as ink */
  --color-muted:       #807d72;   /* Sub-titles */
  --color-muted-soft:  #a09c92;   /* Disabled text */
  --color-on-primary:  #ffffff;   /* White on Cursor Orange */

  /* ---------- Color: Timeline (AI-action signature) ---------- */
  --color-timeline-thinking: #dfa88f;  /* Peach */
  --color-timeline-grep:     #9fc9a2;  /* Mint */
  --color-timeline-read:     #9fbbe0;  /* Pastel blue */
  --color-timeline-edit:     #c0a8dd;  /* Lavender */
  --color-timeline-done:     #c08532;  /* Warm gold */

  /* ---------- Color: Semantic ---------- */
  --color-semantic-success: #1f8a65;
  --color-semantic-error:   #cf2d56;

  /* ---------- Type: Family ---------- */
  --font-display: 'Inter', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace;

  /* ---------- Type: Tokens (size / weight / line-height / tracking) ---------- */
  --type-display-mega-size: 72px;
  --type-display-mega-weight: 400;
  --type-display-mega-lh: 1.1;
  --type-display-mega-tracking: -2.16px;

  --type-display-lg-size: 36px;
  --type-display-lg-weight: 400;
  --type-display-lg-lh: 1.2;
  --type-display-lg-tracking: -0.72px;

  --type-display-md-size: 26px;
  --type-display-md-weight: 400;
  --type-display-md-lh: 1.25;
  --type-display-md-tracking: -0.325px;

  --type-display-sm-size: 22px;
  --type-display-sm-weight: 400;
  --type-display-sm-lh: 1.3;
  --type-display-sm-tracking: -0.11px;

  --type-title-md-size: 18px;
  --type-title-md-weight: 600;
  --type-title-md-lh: 1.4;

  --type-title-sm-size: 16px;
  --type-title-sm-weight: 600;
  --type-title-sm-lh: 1.4;

  --type-body-md-size: 16px;
  --type-body-md-weight: 400;
  --type-body-md-lh: 1.5;

  --type-body-tracked-tracking: 0.08px;

  --type-body-sm-size: 14px;
  --type-body-sm-weight: 400;
  --type-body-sm-lh: 1.5;

  --type-caption-size: 13px;
  --type-caption-weight: 400;
  --type-caption-lh: 1.4;

  --type-caption-uppercase-size: 11px;
  --type-caption-uppercase-weight: 600;
  --type-caption-uppercase-lh: 1.4;
  --type-caption-uppercase-tracking: 0.88px;

  --type-code-size: 13px;
  --type-code-weight: 400;
  --type-code-lh: 1.5;

  --type-button-size: 14px;
  --type-button-weight: 500;
  --type-button-lh: 1.0;

  --type-nav-link-size: 14px;
  --type-nav-link-weight: 500;
  --type-nav-link-lh: 1.4;

  /* ---------- Spacing ---------- */
  --space-xxs:    4px;
  --space-xs:     8px;
  --space-sm:     12px;
  --space-base:   16px;
  --space-md:     20px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-xxl:    48px;
  --space-section: 80px;

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ---------- Layout ---------- */
  --max-content: 1200px;
  --nav-height: 64px;
}

/* ============================================================================
   Semantic helpers — apply via class or copy to your selectors.
   ============================================================================ */

html, body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Display ---------- */
.t-display-mega {
  font-family: var(--font-display);
  font-size: var(--type-display-mega-size);
  font-weight: var(--type-display-mega-weight);
  line-height: var(--type-display-mega-lh);
  letter-spacing: var(--type-display-mega-tracking);
  color: var(--color-ink);
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-tracking);
  color: var(--color-ink);
}
.t-display-md {
  font-family: var(--font-display);
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-tracking);
  color: var(--color-ink);
}
.t-display-sm {
  font-family: var(--font-display);
  font-size: var(--type-display-sm-size);
  font-weight: var(--type-display-sm-weight);
  line-height: var(--type-display-sm-lh);
  letter-spacing: var(--type-display-sm-tracking);
  color: var(--color-ink);
}

/* ---------- Title / Body ---------- */
.t-title-md {
  font-family: var(--font-body);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-lh);
  color: var(--color-ink);
}
.t-title-sm {
  font-family: var(--font-body);
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-lh);
  color: var(--color-ink);
}
.t-body-md {
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
}
.t-body-tracked {
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  letter-spacing: var(--type-body-tracked-tracking);
  color: var(--color-body);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-body);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--color-muted);
}
.t-caption-uppercase {
  font-family: var(--font-body);
  font-size: var(--type-caption-uppercase-size);
  font-weight: var(--type-caption-uppercase-weight);
  line-height: var(--type-caption-uppercase-lh);
  letter-spacing: var(--type-caption-uppercase-tracking);
  text-transform: uppercase;
  color: var(--color-ink);
}
.t-code {
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
  font-weight: var(--type-code-weight);
  line-height: var(--type-code-lh);
  color: var(--color-ink);
}
.t-button {
  font-family: var(--font-body);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  line-height: var(--type-button-lh);
}
.t-nav-link {
  font-family: var(--font-body);
  font-size: var(--type-nav-link-size);
  font-weight: var(--type-nav-link-weight);
  line-height: var(--type-nav-link-lh);
  color: var(--color-ink);
}

/* ---------- Surfaces ---------- */
.surface-canvas      { background: var(--color-canvas); }
.surface-canvas-soft { background: var(--color-canvas-soft); }
.surface-card        { background: var(--color-surface-card); }
.surface-strong      { background: var(--color-surface-strong); }

/* ---------- Hairlines ---------- */
.hairline        { border: 1px solid var(--color-hairline); }
.hairline-top    { border-top: 1px solid var(--color-hairline); }
.hairline-bottom { border-bottom: 1px solid var(--color-hairline); }