/* ============================================================
   Snag — Webfonts
   UI sans:  Geist        (Vercel's grotesque — developer-native)
   Mono:     Geist Mono   (logs, network rows, diffs, replay timeline)

   NOTE: served from the Google Fonts CDN (the binaries could not be
   bundled into the project). To fully self-host, drop the .woff2 files
   in assets/fonts/ and replace the @import below with @font-face rules.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600;700&display=swap');
/* ============================================================
   Snag — Base color palette (raw values, theme-agnostic)
   Semantic aliases live in semantic.css and reference these.
   ONE distinctive accent (electric coral); neutrals stay truly neutral.
   ============================================================ */

:root {
  /* --- Brand: electric coral ("caught it") --------------------- */
  --coral-50:  #FFF2EE;
  --coral-100: #FFE2D8;
  --coral-200: #FFC3AF;
  --coral-300: #FF9B7D;
  --coral-400: #FF7351;
  --coral-500: #FF5436;   /* core brand accent */
  --coral-600: #F23F1D;   /* hover / active fill */
  --coral-700: #C9320F;   /* strong, AA white-text fill */
  --coral-800: #9E2A11;
  --coral-900: #7A2412;
  --coral-950: #45120A;

  /* --- Neutral ramp (a hair cool, effectively neutral) --------- */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FAFBFC;
  --neutral-50:   #F3F5F7;
  --neutral-100:  #E8EBEE;
  --neutral-150:  #DCE0E5;
  --neutral-200:  #C8CDD4;
  --neutral-300:  #A7AEB7;
  --neutral-400:  #828A94;
  --neutral-500:  #626A74;
  --neutral-600:  #4A515A;
  --neutral-700:  #353B43;
  --neutral-750:  #2B3037;
  --neutral-800:  #21262C;
  --neutral-850:  #181C21;
  --neutral-900:  #131619;
  --neutral-925:  #0F1113;
  --neutral-950:  #0B0C0E;   /* dark page floor (per brief) */
  --neutral-1000: #060708;

  /* --- Status: success / warning / error / info ---------------- */
  /* error is a cooler crimson, deliberately distinct from coral   */
  --green-300: #5BE39A;
  --green-400: #2FD176;
  --green-500: #18B95F;
  --green-600: #109A4D;
  --green-700: #0C7A3E;

  --amber-300: #FFD27A;
  --amber-400: #FFB938;
  --amber-500: #F59E0B;
  --amber-600: #C77C06;
  --amber-700: #9A6004;

  --red-300:   #FF8A9B;
  --red-400:   #FB5C72;
  --red-500:   #F0414E;
  --red-600:   #D32638;
  --red-700:   #A81C2C;

  --blue-300:  #8FC2FF;
  --blue-400:  #5BA4FF;
  --blue-500:  #3B8EFF;
  --blue-600:  #1E6FE0;
  --blue-700:  #1556B5;

  /* For code diff / log accents (mono surfaces) */
  --violet-400: #A48BFF;   /* debug / verbose log level */
}
/* ============================================================
   Snag — Semantic color aliases (dark-first)
   :root resolves the DARK theme. [data-theme="light"] overrides.
   Use ONLY these semantic tokens in components — never raw palette.
   ============================================================ */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces ---------------------------------------------------- */
  --surface-page:        var(--neutral-950);   /* app background */
  --surface:             var(--neutral-900);   /* default panel/card */
  --surface-raised:      var(--neutral-850);   /* popovers, menus, modals */
  --surface-sunken:      var(--neutral-1000);  /* wells: console, network, diff */
  --surface-interactive: var(--neutral-800);   /* hovered rows, secondary btn */
  --surface-interactive-hover: var(--neutral-750);
  --surface-overlay:     rgba(6, 7, 8, 0.66);  /* modal scrim */

  /* Foreground (text + icons) ----------------------------------- */
  --fg-strong:   var(--neutral-0);     /* headings, key numbers */
  --fg-default:  var(--neutral-100);   /* primary body */
  --fg-body:     var(--neutral-200);   /* long-form body */
  --fg-muted:    var(--neutral-400);   /* secondary, metadata */
  --fg-subtle:   var(--neutral-500);   /* placeholder, hints */
  --fg-disabled: var(--neutral-600);
  --fg-on-brand: #FFFFFF;              /* text on coral fill */

  /* Dividers / borders ------------------------------------------ */
  --divider-subtle: rgba(255, 255, 255, 0.06);
  --divider:        rgba(255, 255, 255, 0.10);
  --divider-strong: rgba(255, 255, 255, 0.16);

  /* Brand ------------------------------------------------------- */
  --brand-primary:        var(--coral-500);
  --brand-primary-strong: var(--coral-600);   /* hover / active */
  --brand-primary-press:  var(--coral-700);
  --brand-primary-soft:   color-mix(in srgb, var(--coral-500) 16%, transparent);
  --brand-primary-line:   color-mix(in srgb, var(--coral-500) 38%, transparent);
  --brand-primary-contrast: #FFFFFF;
  --brand-secondary:      var(--neutral-750);  /* neutral by design — one accent only */
  --brand-glow:           color-mix(in srgb, var(--coral-500) 50%, transparent);

  /* Semantic status (fg = on dark surface; soft = tint bg) ------ */
  --success:      var(--green-400);
  --success-soft: color-mix(in srgb, var(--green-400) 16%, transparent);
  --success-line: color-mix(in srgb, var(--green-400) 34%, transparent);

  --warning:      var(--amber-400);
  --warning-soft: color-mix(in srgb, var(--amber-400) 16%, transparent);
  --warning-line: color-mix(in srgb, var(--amber-400) 34%, transparent);

  --error:        var(--red-400);
  --error-soft:   color-mix(in srgb, var(--red-400) 16%, transparent);
  --error-line:   color-mix(in srgb, var(--red-400) 34%, transparent);

  --info:         var(--blue-400);
  --info-soft:    color-mix(in srgb, var(--blue-400) 16%, transparent);
  --info-line:    color-mix(in srgb, var(--blue-400) 34%, transparent);

  /* Focus ring -------------------------------------------------- */
  --ring: color-mix(in srgb, var(--coral-500) 55%, transparent);

  /* Code / log surfaces ----------------------------------------- */
  --log-default: var(--neutral-200);
  --log-debug:   var(--violet-400);
  --log-info:    var(--blue-400);
  --log-warn:    var(--amber-400);
  --log-error:   var(--red-400);

  --code-add-fg:   var(--green-300);
  --code-add-bg:   color-mix(in srgb, var(--green-500) 16%, transparent);
  --code-add-line: color-mix(in srgb, var(--green-500) 42%, transparent);
  --code-del-fg:   var(--red-300);
  --code-del-bg:   color-mix(in srgb, var(--red-500) 15%, transparent);
  --code-del-line: color-mix(in srgb, var(--red-500) 42%, transparent);

  /* HTTP method colors (network viewer) */
  --http-get:    var(--green-400);
  --http-post:   var(--blue-400);
  --http-put:    var(--amber-400);
  --http-delete: var(--red-400);
}

[data-theme="light"] {
  color-scheme: light;

  --surface-page:        var(--neutral-25);
  --surface:             var(--neutral-0);
  --surface-raised:      var(--neutral-0);
  --surface-sunken:      var(--neutral-50);
  --surface-interactive: var(--neutral-50);
  --surface-interactive-hover: var(--neutral-100);
  --surface-overlay:     rgba(15, 17, 19, 0.42);

  --fg-strong:   var(--neutral-950);
  --fg-default:  var(--neutral-850);
  --fg-body:     var(--neutral-750);
  --fg-muted:    var(--neutral-500);
  --fg-subtle:   var(--neutral-400);
  --fg-disabled: var(--neutral-300);
  --fg-on-brand: #FFFFFF;

  --divider-subtle: rgba(11, 12, 14, 0.06);
  --divider:        rgba(11, 12, 14, 0.10);
  --divider-strong: rgba(11, 12, 14, 0.16);

  /* deepen brand one step so white text + coral passes AA on light */
  --brand-primary:        var(--coral-600);
  --brand-primary-strong: var(--coral-700);
  --brand-primary-press:  var(--coral-800);
  --brand-primary-soft:   color-mix(in srgb, var(--coral-500) 12%, transparent);
  --brand-primary-line:   color-mix(in srgb, var(--coral-500) 30%, transparent);
  --brand-secondary:      var(--neutral-100);

  --success:      var(--green-600);
  --success-soft: color-mix(in srgb, var(--green-500) 12%, transparent);
  --success-line: color-mix(in srgb, var(--green-500) 30%, transparent);

  --warning:      var(--amber-600);
  --warning-soft: color-mix(in srgb, var(--amber-500) 14%, transparent);
  --warning-line: color-mix(in srgb, var(--amber-500) 32%, transparent);

  --error:        var(--red-600);
  --error-soft:   color-mix(in srgb, var(--red-500) 11%, transparent);
  --error-line:   color-mix(in srgb, var(--red-500) 28%, transparent);

  --info:         var(--blue-600);
  --info-soft:    color-mix(in srgb, var(--blue-500) 11%, transparent);
  --info-line:    color-mix(in srgb, var(--blue-500) 28%, transparent);

  --ring: color-mix(in srgb, var(--coral-600) 50%, transparent);

  --log-default: var(--neutral-800);
  --log-debug:   #6E4CE0;
  --log-info:    var(--blue-600);
  --log-warn:    var(--amber-700);
  --log-error:   var(--red-600);

  --code-add-fg:   var(--green-700);
  --code-add-bg:   color-mix(in srgb, var(--green-500) 13%, transparent);
  --code-add-line: color-mix(in srgb, var(--green-500) 36%, transparent);
  --code-del-fg:   var(--red-700);
  --code-del-bg:   color-mix(in srgb, var(--red-500) 11%, transparent);
  --code-del-line: color-mix(in srgb, var(--red-500) 34%, transparent);

  --http-get:    var(--green-600);
  --http-post:   var(--blue-600);
  --http-put:    var(--amber-600);
  --http-delete: var(--red-600);
}
/* ============================================================
   Snag — Typography
   Geist for UI, Geist Mono for code/logs/diffs/timeline.
   Dense, Linear-like base (14px) with a confident display scale.
   ============================================================ */

:root {
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular:  400; /* @kind other */
  --weight-medium:   500; /* @kind other */
  --weight-semibold: 600; /* @kind other */
  --weight-bold:     700; /* @kind other */

  /* Type scale — size / line-height pairs.
     Display sizes for marketing; the rest for product UI.        */
  --text-display-size: 4rem;     /* 64 */
  --text-display-lh:   1.04;        /* @kind other */
  --text-display-tracking: -0.03em; /* @kind other */

  --text-h1-size: 2.5rem;        /* 40 */
  --text-h1-lh:   1.1;              /* @kind other */
  --text-h1-tracking: -0.022em;     /* @kind other */

  --text-h2-size: 2rem;          /* 32 */
  --text-h2-lh:   1.15;             /* @kind other */
  --text-h2-tracking: -0.02em;      /* @kind other */

  --text-h3-size: 1.5rem;        /* 24 */
  --text-h3-lh:   1.25;             /* @kind other */
  --text-h3-tracking: -0.017em;     /* @kind other */

  --text-h4-size: 1.25rem;       /* 20 */
  --text-h4-lh:   1.3;              /* @kind other */
  --text-h4-tracking: -0.013em;     /* @kind other */

  --text-body-lg-size: 1.0625rem;/* 17 */
  --text-body-lg-lh:   1.6;         /* @kind other */

  --text-body-size: 0.875rem;    /* 14 — product base */
  --text-body-lh:   1.55;           /* @kind other */

  --text-body-sm-size: 0.8125rem;/* 13 */
  --text-body-sm-lh:   1.5;         /* @kind other */

  --text-caption-size: 0.75rem;  /* 12 */
  --text-caption-lh:   1.4;            /* @kind other */
  --text-caption-tracking: 0.005em;    /* @kind other */

  --text-overline-size: 0.6875rem; /* 11 — labels/eyebrows */
  --text-overline-lh:   1.3;           /* @kind other */
  --text-overline-tracking: 0.08em;    /* @kind other */

  --text-code-size: 0.8125rem;   /* 13 mono */
  --text-code-lh:   1.55;           /* @kind other */
  --text-code-sm-size: 0.75rem;  /* 12 mono — dense logs */
  --text-code-sm-lh:   1.5;         /* @kind other */
}

/* Optional helper classes (components mostly set type inline via tokens) */
.snag-display { font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-display-size); line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-tracking); }
.snag-h1 { font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-h1-size); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-tracking); }
.snag-h2 { font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: var(--text-h2-tracking); }
.snag-h3 { font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-h3-size); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-tracking); }
.snag-mono { font-family: var(--font-mono); font-size: var(--text-code-size);
  line-height: var(--text-code-lh); font-variant-ligatures: none; }
.snag-overline { font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: var(--text-overline-size); line-height: var(--text-overline-lh);
  letter-spacing: var(--text-overline-tracking); text-transform: uppercase; }
/* ============================================================
   Snag — Spacing, radii, sizing, layout
   4px base grid. Tight, dev-tool radii (no "friendly blob").
   ============================================================ */

:root {
  /* Spacing scale (Tailwind-v4 compatible) */
  --space-px: 1px;
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Radii — tight and precise */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;    /* default: buttons, inputs */
  --radius-lg:   10px;
  --radius-xl:   12px;   /* cards */
  --radius-2xl:  16px;   /* large panels, capture widget */
  --radius-3xl:  22px;
  --radius-full: 9999px; /* pills, avatars */

  /* Control heights (keep targets >= 44px where touch matters) */
  --control-sm: 28px;
  --control-md: 34px;   /* default dashboard control */
  --control-lg: 40px;
  --control-xl: 48px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Layout */
  --sidebar-width: 240px;
  --topnav-height: 56px;
  --container-max: 1200px;
  --container-prose: 680px;

  /* Z-index scale */
  --z-base:     0;          /* @kind other */
  --z-raised:   10;         /* @kind other */
  --z-sticky:   100;        /* @kind other */
  --z-dropdown: 1000;       /* @kind other */
  --z-overlay:  1100;       /* @kind other */
  --z-modal:    1200;       /* @kind other */
  --z-popover:  1300;       /* @kind other */
  --z-toast:    1400;       /* @kind other */
  --z-tooltip:  1500;       /* @kind other */
  --z-max:      2147483600; /* @kind other */
}
/* ============================================================
   Snag — Elevation (shadows + focus rings)
   Dark-first: low, inky shadows + a faint top highlight border.
   Light: soft neutral shadows. Restrained — no "drop-shadow soup".
   ============================================================ */

:root,
[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.45);

  /* Subtle top highlight to lift raised surfaces off the page */
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* @kind shadow */

  /* Coral glow for the "snag" moment + primary CTA emphasis */
  --shadow-brand: 0 6px 20px color-mix(in srgb, var(--coral-500) 38%, transparent);
  --shadow-brand-lg: 0 10px 36px color-mix(in srgb, var(--coral-500) 46%, transparent);

  /* Focus ring (2px coral halo) */
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--ring);
  --focus-ring-tight: 0 0 0 2px var(--ring);
}

[data-theme="light"] {
  --shadow-xs: 0 1px 2px rgba(11, 12, 14, 0.06);
  --shadow-sm: 0 1px 2px rgba(11, 12, 14, 0.07), 0 1px 3px rgba(11, 12, 14, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 12, 14, 0.08), 0 1px 3px rgba(11, 12, 14, 0.06);
  --shadow-lg: 0 12px 28px rgba(11, 12, 14, 0.12), 0 4px 8px rgba(11, 12, 14, 0.06);
  --shadow-xl: 0 24px 56px rgba(11, 12, 14, 0.16), 0 8px 16px rgba(11, 12, 14, 0.08);

  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* @kind shadow */

  --shadow-brand: 0 6px 18px color-mix(in srgb, var(--coral-600) 30%, transparent);
  --shadow-brand-lg: 0 10px 32px color-mix(in srgb, var(--coral-600) 36%, transparent);
}
/* ============================================================
   Snag — Motion
   "Snappy / fast" is the #1 brand adjective. Short durations,
   decisive easings. The signature "snag" is the one expressive moment.
   ============================================================ */

:root {
  /* Durations — keep UI in the 80–240ms band */
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    160ms; /* @kind other */
  --dur-slow:    240ms; /* @kind other */
  --dur-slower:  360ms; /* @kind other */

  /* Easings */
  --ease-snap:    cubic-bezier(0.2, 0.8, 0.2, 1);    /* @kind other */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in:      cubic-bezier(0.5, 0, 0.75, 0);     /* @kind other */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-hook:    cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  /* Composite transition presets */
  --transition-colors: color var(--dur-fast) var(--ease-snap),
                        background-color var(--dur-fast) var(--ease-snap),
                        border-color var(--dur-fast) var(--ease-snap),
                        box-shadow var(--dur-fast) var(--ease-snap); /* @kind other */
  --transition-transform: transform var(--dur-base) var(--ease-snap); /* @kind other */
}

/* The signature "snag" — a quick hook/pull + glow when a capture lands.
   Used by the capture widget's record button and success confirmation. */
@keyframes snag-hook {
  0%   { transform: scale(1)    rotate(0);     }
  35%  { transform: scale(0.9)  rotate(-4deg); }
  70%  { transform: scale(1.06) rotate(2deg);  }
  100% { transform: scale(1)    rotate(0);     }
}
@keyframes snag-pulse {
  0%   { box-shadow: 0 0 0 0   var(--brand-glow); }
  70%  { box-shadow: 0 0 0 12px transparent;      }
  100% { box-shadow: 0 0 0 0   transparent;       }
}
@keyframes snag-rec-blink {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.35; }
}
@keyframes snag-spin {
  to { transform: rotate(360deg); }
}
@keyframes snag-shimmer {
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; }
}
/* ============================================================
   Snag — Base reset + document defaults
   Applies the tokens to the document. Imported last by styles.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv01", "ss03"; /* Geist: open digits + alt characters */
}

::selection { background: var(--brand-primary-soft); color: var(--fg-strong); }

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--fg-strong);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}
:where(p) { margin: 0; }

:where(a) { color: inherit; text-decoration: none; }

:where(code, kbd, samp, pre) {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

:where(button, input, select, textarea) { font: inherit; color: inherit; }

:where(:focus-visible) { outline: none; box-shadow: var(--focus-ring); }

/* Thin, dev-tool scrollbars on scrollable surfaces */
.snag-scroll { scrollbar-width: thin; scrollbar-color: var(--neutral-600) transparent; }
.snag-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.snag-scroll::-webkit-scrollbar-thumb {
  background: var(--neutral-600); border-radius: var(--radius-full);
  border: 3px solid transparent; background-clip: content-box;
}
.snag-scroll::-webkit-scrollbar-thumb:hover { background: var(--neutral-500); background-clip: content-box; }