/* Keel design tokens — extracted from the Claude Design source of truth. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/HankenGrotesk-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexMono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexMono-600.woff2') format('woff2');
}

:root {
  /* Surfaces */
  --bg: #F5F3EC;
  --card: #FCFBF7;
  --card-alt: #FFFFFF;
  --panel: #FBFAF5;
  --panel-2: #F2EFE6;
  --panel-3: #FAF8F2;
  --wash: #F0EEE7;
  --wash-2: #F4F1E9;
  --field: #EDEBE3;

  /* Lines */
  --line: #E6E1D5;
  --line-soft: #EFEBE0;
  --line-faint: #F2EFE7;
  --line-strong: #DAD4C6;
  --line-hover: #D3CCBC;

  /* Ink */
  --ink: #132234;
  --ink-2: #16273B;
  --heading: #0F1C2D;
  --muted: #59677A;
  --faint: #8C95A2;
  --faint-2: #9AA3AF;
  --disabled: #AEB4BE;

  /* Brand */
  --navy: #0F1C2D;
  --navy-2: #1B3049;
  --teal: #0C7C79;
  --teal-2: #12A39C;
  --aqua: #5EC8C2;
  --aqua-2: #7FE0DA;
  --teal-soft: #EAF3F2;

  /* Status */
  --green: #22A45D;
  --green-deep: #146C40;
  --green-mid: #178A54;
  --green-soft: #E6F2EA;
  --green-line: #CDE7D6;
  --amber: #C98213;
  --amber-deep: #97650A;
  --amber-deeper: #7A5406;
  --amber-soft: #F8EFD8;
  --red: #C63A2F;
  --red-deep: #B23325;
  --red-soft: #F9E7E4;
  --red-wash: #FDF7F5;
  --blue: #2B5C8A;
  --blue-deep: #1A4D8F;
  --blue-soft: #E7EEF5;
  --blue-wash: #E4EDF7;
  --purple: #8380C0;
  --purple-soft: #F0EFF7;

  /* Type */
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 10px;
  --r-lg: 13px;
  --r-xl: 16px;
  --r-2xl: 18px;

  /* Shadows */
  --shadow-card: 0 12px 26px rgba(15, 28, 45, .09);
  --shadow-pop: 0 18px 44px rgba(15, 28, 45, .16);
  --shadow-modal: 0 30px 80px rgba(15, 28, 45, .30);
  --shadow-sidebar: 0 24px 70px rgba(9, 20, 33, .30);
  --shadow-seg: 0 1px 3px rgba(15, 28, 45, .12);
  --focus-ring: 0 0 0 3px rgba(12, 124, 121, .14);

  /* Z scale (from the prototype — keeps overlay stacking sane) */
  --z-popover-scrim: 30;
  --z-topbar: 33;
  --z-popover: 45;
  --z-sidebar-scrim: 55;
  --z-sidebar-mobile: 60;
  --z-drawer-scrim: 70;
  --z-drawer: 75;
  --z-modal-scrim: 80;
  --z-modal: 85;
  --z-toast: 95;
}