/*
  Kit Design System — design tokens for prototypes
  ==================================================

  Snapshot of `app/javascript/stylesheets/tw-styles.css` from the Kit/convertkit repo.
  Mirrors the Tailwind v4 theme so prototypes can reference the canonical Kit palette,
  fonts, and base behaviour without bundling Tailwind itself.

  Source: https://github.com/Kit/convertkit/blob/main/app/javascript/stylesheets/tw-styles.css
  Last sync: 2026-04-30

  To re-sync: copy the :root block + the slide-in / sk-bounce keyframes from the
  source file. Skip the @theme / @layer / Tailwind-specific blocks — those don't
  apply outside the app build.
*/

:root {
  /* Typography */
  --font-ui:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-heading:
    "KitHeadlineBoldBeta", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Neutrals */
  --black: #000000;

  --gray-50: #f7f7f7;
  --gray-100: #f0f0f0;
  --gray-200: #e3e3e3;
  --gray-300: #d4d4d4;
  --gray-400: #c4c4c4;
  --gray-500: #b8b8b8;
  --gray-600: #919191;
  --gray-700: #6e6e6e;
  --gray-800: #3d3d3d;
  --gray-900: #1e1e1e;

  --gray-50-rgb: 247, 247, 247;
  --gray-100-rgb: 240, 240, 240;
  --gray-200-rgb: 227, 227, 227;
  --gray-300-rgb: 212, 212, 212;
  --gray-400-rgb: 196, 196, 196;
  --gray-500-rgb: 184, 184, 184;
  --gray-600-rgb: 145, 145, 145;
  --gray-700-rgb: 110, 110, 110;
  --gray-800-rgb: 61, 61, 61;
  --gray-900-rgb: 30, 30, 30;

  /* Brand red (Kit primary) */
  --red-50: #fff2f0;
  --red-100: #ffdcd6;
  --red-200: #ffb9ad;
  --red-300: #ff8873;
  --red-400: #ff7259;
  --red-500: #fc5c3f;
  --red-600: #e05138;
  --red-700: #a63521;
  --red-800: #821f0d;
  --red-900: #5e0e00;

  --red-50-rgb: 255, 242, 240;
  --red-100-rgb: 255, 220, 214;
  --red-200-rgb: 255, 185, 173;
  --red-300-rgb: 255, 136, 115;
  --red-400-rgb: 255, 114, 89;
  --red-500-rgb: 252, 92, 63;
  --red-600-rgb: 224, 81, 56;
  --red-700-rgb: 166, 53, 33;
  --red-800-rgb: 130, 31, 13;
  --red-900-rgb: 94, 14, 0;

  /* Blue (info / links / focus) */
  --blue-50: #f0f9ff;
  --blue-100: #bce1fa;
  --blue-200: #a2d1f1;
  --blue-300: #81c5f3;
  --blue-400: #63bbf9;
  --blue-500: #44b1ff;
  --blue-600: #3197e0;
  --blue-700: #2b7ab1;
  --blue-800: #144264;
  --blue-900: #0a2940;

  --blue-50-rgb: 240, 249, 255;
  --blue-100-rgb: 188, 225, 250;
  --blue-200-rgb: 162, 209, 241;
  --blue-300-rgb: 129, 197, 243;
  --blue-400-rgb: 99, 187, 249;
  --blue-500-rgb: 68, 177, 255;
  --blue-600-rgb: 49, 151, 224;
  --blue-700-rgb: 43, 122, 177;
  --blue-800-rgb: 20, 66, 100;
  --blue-900-rgb: 10, 41, 64;

  /* Green (success) */
  --green-50: #f0fff3;
  --green-100: #d0f5d9;
  --green-200: #b9e9c5;
  --green-300: #94e3a9;
  --green-400: #83de9e;
  --green-500: #65dc8d;
  --green-600: #4ec776;
  --green-700: #27a14f;
  --green-800: #157033;
  --green-900: #083818;

  --green-50-rgb: 240, 255, 243;
  --green-100-rgb: 208, 245, 217;
  --green-200-rgb: 185, 233, 197;
  --green-300-rgb: 148, 227, 169;
  --green-400-rgb: 131, 222, 158;
  --green-500-rgb: 101, 220, 141;
  --green-600-rgb: 78, 199, 118;
  --green-700-rgb: 39, 161, 79;
  --green-800-rgb: 21, 112, 51;
  --green-900-rgb: 8, 56, 24;

  /* Orange (warning / accent) */
  --orange-50: #fff6f0;
  --orange-100: #ffe7d6;
  --orange-200: #ffd0ad;
  --orange-300: #ff9f6b;
  --orange-400: #ff8b59;
  --orange-500: #ff7647;
  --orange-600: #e56a40;
  --orange-700: #a65821;
  --orange-800: #82450d;
  --orange-900: #5e2d00;

  --orange-50-rgb: 255, 246, 240;
  --orange-100-rgb: 255, 231, 214;
  --orange-200-rgb: 255, 208, 173;
  --orange-300-rgb: 255, 159, 107;
  --orange-400-rgb: 255, 139, 89;
  --orange-500-rgb: 255, 118, 71;
  --orange-600-rgb: 229, 106, 64;
  --orange-700-rgb: 166, 88, 33;
  --orange-800-rgb: 130, 69, 13;
  --orange-900-rgb: 94, 45, 0;

  /* Purple — used by Avatar fallback rotation and Badge variants.
     Sourced from tailwind.config.js, not tw-styles.css. */
  --purple-50: #fbf0ff;
  --purple-100: #f3e3f9;
  --purple-200: #e7c9f1;
  --purple-300: #e5c2f2;
  --purple-400: #e4baf5;
  --purple-500: #e4acff;
  --purple-600: #c88ce5;
  --purple-700: #965db2;
  --purple-800: #4a265a;
  --purple-900: #2b1136;

  /* Surfaces */
  --light-blue: #e7fafa;

  --warm-white-100: #f9f7f4;
  --warm-white-200: #f2efe9;
  --warm-white-300: #e9e6dc;

  --warm-white-100-rgb: 249, 247, 244;
  --warm-white-200-rgb: 242, 239, 233;
  --warm-white-300-rgb: 233, 230, 220;

  /* System scales (alerts, status) — currently mirrors red/orange but separated
     so semantic intent is preserved if they ever diverge. */
  --system-red-50: #fff2f0;
  --system-red-100: #ffdcd6;
  --system-red-200: #ffb9ad;
  --system-red-300: #ff8873;
  --system-red-400: #ff7259;
  --system-red-500: #fc5c3f;
  --system-red-600: #e05138;
  --system-red-700: #a63521;
  --system-red-800: #821f0d;
  --system-red-900: #5e0e00;

  --system-yellow-50: #fff6f0;
  --system-yellow-100: #ffe7d6;
  --system-yellow-200: #ffd0ad;
  --system-yellow-300: #ff9f6b;
  --system-yellow-400: #ff8b59;
  --system-yellow-500: #ff7647;
  --system-yellow-600: #e56a40;
  --system-yellow-700: #a65821;
  --system-yellow-800: #82450d;
  --system-yellow-900: #5e2d00;

  /* Layout primitives — derived, not from tw-styles.css.
     These match the in-app shell dimensions and are stable across the codebase. */
  --kit-sidebar-width: 232px;
  --kit-sidebar-width-collapsed: 56px;
  --kit-topbar-height: 48px;
  --kit-content-max: 1200px;

  /* Radii & shadows — derived from observed Tailwind config values */
  --kit-radius-sm: 4px;
  --kit-radius-md: 6px;
  --kit-radius-lg: 8px;
  --kit-radius-xl: 12px;
  --kit-radius-full: 9999px;

  --kit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --kit-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --kit-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --kit-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Font smoothing — matches the app */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Animations re-used by overlays, drawers, toasts */
@keyframes kit-slide-in-from-right {
  from { transform: translateX(100%); }
}

@keyframes kit-slide-in-from-left {
  from { transform: translateX(-100%); }
}

@keyframes kit-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes kit-fade-in-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}