/* ==========================================================================
   TableKit Design System — Colors & Typography
   Tokens derived from TableKit 3 Figma + Storybook (tablekit.tablecheck.com)
   ========================================================================== */

/* -------- Fonts -------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
  src: url('/fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400;
  src: url('/fonts/IBMPlexSans-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500;
  src: url('/fonts/IBMPlexSans-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600;
  src: url('/fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); font-display: swap; }

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  src: url('/fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  src: url('/fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 500;
  src: url('/fonts/IBMPlexSans-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 600;
  src: url('/fonts/IBMPlexSans-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600;
  src: url('/fonts/IBMPlexMono-SemiBold.ttf') format('truetype'); font-display: swap; }

/* -------- Primitives: Grey scale -------- */
:root {
  --black: #000000;
  --grey:       #1A1A1A;
  --grey-950:   #1E1E1E;
  --grey-900:   #292929;
  --grey-850:   #3A3A3A;
  --grey-800:   #4B4B4B;
  --grey-750:   #666666;
  --grey-725:   #848484;
  --grey-700:   #737373;
  --grey-600:   #BFBFBF;
  --grey-500:   #CECECE;
  --grey-400:   #DBDBDB;
  --grey-300:   #E5E5E5;
  --grey-200:   #EEEEEE;
  --grey-150:   #F7F7F7;
  --grey-100:   #F9F9F9;
  --grey-50:    #FDFDFD;
  --white:      #FFFFFF;

  /* -------- Primitives: Brand purple -------- */
  --purple-50:  #F7EFFF;
  --purple-100: #F1E5FF;
  --purple-150: #E2CCFF;
  --purple-200: #DCC1FF;
  --purple-300: #B081EE;
  --purple-400: #A56EEC;
  --purple-500: #9F60F1;
  --purple-600: #8E4AE7;
  --purple-700: #7832D2;
  --purple-800: #54268E;
  --purple-900: #3D1F62;
  --purple-950: #31194E;

  --brand-purple-legacy: #7935D2;
  --brand-purple-legacy-hover: #6D30BD;
  --brand-purple-legacy-active: #612AA8;

  /* -------- Semantic sentiment primitives -------- */
  --info-500:     #0066CC;
  --info-surface: #DFEFFE;
  --info-surface-hover: #CDE5FE;

  --success-500:     #067900;
  --success-surface: #E9FEDE;
  --success-surface-hover: #DCFECC;

  --warning-500:     #E8B72F;
  --warning-text:    #926B07;
  --warning-surface: #FFFADF;
  --warning-surface-hover: #FFF8D4;

  --error-500:       #CC0000;
  --error-surface:   #FEDFDF;
  --error-surface-hover: #FECCCC;

  --purple-utility-text:    #7832D2;
  --purple-utility-surface: #F1E5FF;
  --purple-utility-surface-hover: #E2CCFF;
  --purple-utility-border:  #DCC1FF;

  --orange-text:    #AF5D00;
  --orange-surface: #FFE6CA;
  --orange-surface-hover: #FCE6BB;
}

/* ---- Semantic tokens — LIGHT mode (default) ---- */
:root, [data-theme="light"] {
  --border: var(--grey-300);
  --border-active: var(--grey-900);
  --border-transparent: rgba(0,0,0,0.10);

  --brand-primary: var(--purple-600);
  --brand-primary-active: var(--purple-500);
  --brand-primary-hover: var(--purple-500);
  --brand-primary-text: #ffffff;
  --brand-secondary: var(--purple-150);
  --brand-secondary-active: var(--purple-200);
  --brand-secondary-hover: var(--purple-200);
  --brand-secondary-text: var(--grey-900);

  --error: var(--error-500);
  --error-text: var(--error-500);

  --field: #ffffff;
  --focus: #0017E7;

  --info: var(--info-500);
  --info-text: var(--info-500);

  --link: var(--purple-600);
  --link-disabled: var(--grey-500);
  --link-hover: var(--purple-500);
  --link-visited: #C800CC;

  --neutral: var(--grey-800);
  --neutral-surface: var(--grey-200);
  --neutral-surface-hover: var(--grey-300);
  --neutral-text: var(--grey-800);

  --success: var(--success-500);
  --success-text: var(--success-500);
  --warning: var(--warning-500);

  --surface: #ffffff;
  --surface-active: var(--grey-200);
  --surface-disabled: var(--grey-150);
  --surface-hover: var(--grey-150);
  --surface-hover-transparent: rgba(0,0,0,0.035);
  --surface-low: #FCFCFC;
  --surface-low-active: #F3F2FF;
  --surface-low-hover: var(--grey-150);
  --surface-low-hover-transparent: rgba(0,0,0,0.02);
  --surface-raised: var(--grey-100);
  --surface-raised-active: var(--grey-200);
  --surface-raised-hover: var(--grey-100);
  --surface-raised-hover-transparent: rgba(0,0,0,0.01);
  --surface-secondary: var(--grey-900);
  --surface-secondary-active: var(--grey-300);
  --surface-secondary-hover: var(--grey-200);
  --surface-secondary-text: #ffffff;

  --text: var(--grey-900);
  --text-disabled: var(--grey-500);
  --text-placeholder: var(--grey-600);
  --text-secondary: #ffffff;
  --text-subtle: var(--grey-725);

  --toggle-disabled: var(--grey-300);
  --toggle-inactive: var(--grey-400);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-dialog: 0 16px 48px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
}

/* ---- Radii + spacing ---- */
:root {
  --radius-0:    0;
  --radius-2:    2px;
  --radius-4:    4px;
  --radius-6:    6px;
  --radius-8:    8px;
  --radius-10:  10px;
  --radius-12:  12px;
  --radius-14:  14px;
  --radius-16:  16px;
  --radius-full: 999px;

  --radius-xs: var(--radius-2);
  --radius-sm: var(--radius-4);
  --radius-md: var(--radius-6);
  --radius-lg: var(--radius-8);
  --radius-xl: var(--radius-12);

  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
}

/* ---- Typography ---- */
:root {
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-display: 'IBM Plex Sans', 'Inter', sans-serif;

  --text-10: 10px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-16: 16px;
  --text-20: 20px;
  --text-24: 24px;
  --text-32: 32px;
  --text-54: 54px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* Base reset */
html, body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface);
  font-size: var(--text-16);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

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

h1, .tk-h1 { font-weight: var(--fw-semibold); font-size: var(--text-32); line-height: 1.2; color: var(--text); margin: 0; }
h2, .tk-h2 { font-weight: var(--fw-semibold); font-size: var(--text-24); line-height: 1.25; color: var(--text); margin: 0; }
h3, .tk-h3 { font-weight: var(--fw-semibold); font-size: var(--text-20); line-height: 1.3; color: var(--text); margin: 0; }
h4, .tk-h4 { font-weight: var(--fw-semibold); font-size: var(--text-16); line-height: 1.4; color: var(--text); margin: 0; }
.tk-display, h1.tk-display { font-size: var(--text-54); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }

.tk-body { font-size: var(--text-16); line-height: 1.5; }
.tk-body-sm { font-size: var(--text-14); line-height: 1.45; }
.tk-caption { font-size: var(--text-12); line-height: 1.4; color: var(--text-subtle); }
.tk-micro { font-size: var(--text-10); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); font-weight: var(--fw-semibold); }
.tk-subtle { color: var(--text-subtle); }

code, .tk-code, pre { font-family: var(--font-mono); font-size: 0.9em; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "calt" 0; }
.tnum { font-variant-numeric: tabular-nums; }

*:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

[data-theme="dark"] {
  --text: var(--grey-100);
  --text-subtle: var(--grey-600);
  --surface: var(--grey-950);
  --surface-low: var(--grey-900);
  --surface-raised: var(--grey-850);
  --border: var(--grey-800);
  --link: var(--purple-300);
  --brand-primary: var(--purple-400);
  --focus: var(--purple-400);
  --success-500: #34D399;
  --success-surface: #064E3B;
  --warning-500: #FBBF24;
  --warning-text: #D97706;
  --warning-surface: #78350F;
  --error-500: #F87171;
  --error-surface: #7F1D1D;
  --info-500: #60A5FA;
  --info-surface: #1E3A5F;
  --purple-utility-text: var(--purple-300);
  --purple-utility-surface: var(--purple-900);
}