/* dolfyn Design Tokens — extracted from designs/design-system.md */
/* Shared source of truth for the app (frontend/) and landing page (landing/) */
/* Status: v1, locked 2026-07-19. Light mode only. */

:root {
  /* ===== Surfaces (backgrounds) ===== */
  --surface: #FAFAF7;
  --surface-subtle: #F2F1ED;
  --surface-raised: #FFFFFF;
  --surface-overlay: rgba(15, 15, 14, 0.32);

  /* ===== Ink (text) ===== */
  --ink: #0F0F0E;
  --ink-2: #3F3F3F;
  --ink-3: #6B6B6B;
  --ink-inverse: #FAFAF7;

  /* ===== Borders & dividers ===== */
  --border: #E5E5E1;
  --border-strong: #C7C7C2;
  --divider: #EDEDE9;

  /* ===== AI accent (exclusively AI surfaces) ===== */
  --accent: #C2410C;
  --accent-strong: #9A330A;
  --accent-soft-bg: #FCEFDE;
  --accent-tint: #F7F2EC;

  /* ===== Semantic ===== */
  --success: #15803D;
  --error: #B91C1C;
  --warning: #B45309;
  --cap-hit: #7C2D12;

  /* ===== Typography ===== */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --type-display-size: 28px;
  --type-display-line: 1.25;
  --type-display-weight: 600;
  --type-display-tracking: -0.02em;

  --type-title-size: 20px;
  --type-title-line: 1.3;
  --type-title-weight: 600;
  --type-title-tracking: -0.01em;

  --type-body-size: 16px;
  --type-body-line: 1.6;
  --type-body-weight: 400;
  --type-body-tracking: 0;

  --type-body-sm-size: 14px;
  --type-body-sm-line: 1.5;
  --type-body-sm-weight: 400;
  --type-body-sm-tracking: 0;

  --type-caption-size: 12px;
  --type-caption-line: 1.4;
  --type-caption-weight: 500;
  --type-caption-tracking: 0.01em;

  --type-label-size: 14px;
  --type-label-line: 1.3;
  --type-label-weight: 500;
  --type-label-tracking: 0;

  --type-counter-size: 11px;
  --type-counter-line: 1.2;
  --type-counter-weight: 500;
  --type-counter-tracking: 0.04em;

  /* ===== Spacing ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ===== Radius ===== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===== Elevation ===== */
  --elevation-card: 0 0 0 1px var(--border);
  --elevation-panel: 0 8px 24px -8px rgba(15, 15, 14, 0.12), 0 2px 4px -2px rgba(15, 15, 14, 0.06);
  --elevation-modal: 0 24px 48px -12px rgba(15, 15, 14, 0.18);
  --elevation-toast: 0 4px 12px -2px rgba(15, 15, 14, 0.08);

  /* ===== z-index ===== */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 800;
  --z-panel: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear: linear;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 350ms;
  --duration-sparkle-pulse: 1.5s;
  --duration-sparkle-spin: 1s;

  /* ===== Layout ===== */
  --content-max-width: 540px;
  --mobile-viewport: 375px;
}

/* Utility classes for typography */
.type-display {
  font-family: var(--font-serif);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  color: var(--ink);
}

.type-title {
  font-family: var(--font-serif);
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  font-weight: var(--type-title-weight);
  letter-spacing: var(--type-title-tracking);
  color: var(--ink);
}

.type-body {
  font-family: var(--font-serif);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
  color: var(--ink);
}

.type-body-sm {
  font-family: var(--font-serif);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  letter-spacing: var(--type-body-sm-tracking);
  color: var(--ink-2);
}

.type-caption {
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight);
  letter-spacing: var(--type-caption-tracking);
  color: var(--ink-3);
}

.type-label {
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
}

.type-counter {
  font-family: var(--font-sans);
  font-size: var(--type-counter-size);
  line-height: var(--type-counter-line);
  font-weight: var(--type-counter-weight);
  letter-spacing: var(--type-counter-tracking);
}