/**
 * Concord CRM - Reskin: Clerk Design System ("ceramic")
 * Standalone Production Theme CSS (0 CDN, Self-Hosted Geist)
 *
 * @copyright Copyright (c) 2026 PT. Digital Mediatek Solusindo
 */

/* 1. SELF-HOSTED GEIST FONT FACES */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* 2. ROOT VARIABLES & CERAMIC DESIGN SYSTEM TOKENS */
:root {
  --navbar-height: 50px;
  --navbar-bg-color: #ffffff;
  --navbar-dark-bg-color: #131316;

  --sidebar-bg-color: 19, 19, 22;
  --sidebar-dark-bg-color: 11, 11, 14;

  /* Ceramic Grayscale Primitives */
  --color-gray-50:   #fafafb;
  --color-gray-100:  #f6f6f7;
  --color-gray-200:  #ececee;
  --color-gray-300:  #dbdbe0;
  --color-gray-400:  #c7c7cf;
  --color-gray-500:  #adadb7;
  --color-gray-600:  #90909d;
  --color-gray-700:  #767684;
  --color-gray-800:  #5f5f6f;
  --color-gray-900:  #4c4c5c;
  --color-gray-1000: #3d3d4a;
  --color-gray-1100: #33333e;
  --color-gray-1200: #2b2b34;
  --color-gray-1300: #232328;
  --color-gray-1400: #1b1b1f;
  --color-gray-1500: #111113;

  /* Semantic Tokens (Light) */
  --bg-main: #fcfcfc;
  --bg-surface: #ffffff;
  --bg-subtle: #f7f7f8;
  --bg-element: #f0f0f1;
  --bg-hover: #f0f0f1;
  --bg-active: #e6e6e8;

  --border-main: #e6e6e8;
  --border-subtle: #dbdbde;
  --border-strong: #cacace;

  --text-main: #131316;
  --text-muted: #62626a;
  --text-subtle: #7d7d85;
  --text-disabled: #b5b5ba;

  --primary: #6c47ff;
  --primary-hover: #5b3ae6;
  --primary-active: #4d2ed4;
  --primary-contrast: #ffffff;

  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* Clerk Hairline Shadows */
  --shadow-button-primary: 0px 0px 0px 1px #6c47ff, 0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset, 0px 2px 3px 0px rgba(34, 42, 53, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.24);
  --shadow-button-secondary: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 1px -0.5px rgba(0, 0, 0, 0.04), 0px 3px 3px -1.5px rgba(0, 0, 0, 0.03);
  --shadow-control: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 1px -0.5px rgba(0, 0, 0, 0.04), 0px 3px 3px -1.5px rgba(0, 0, 0, 0.03);
  --shadow-focus-ring: 0px 0px 0px 2px rgba(108, 71, 255, 0.25), 0px 0px 0px 1px #6c47ff;
  --shadow-card: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 1px -0.5px rgba(0, 0, 0, 0.04), 0px 3px 3px -1.5px rgba(0, 0, 0, 0.03);
  --shadow-modal: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
  --shadow-popover: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.08);

  /* Tailwind Color Palette RGB Tuples */
  --color-neutral-50: 252, 252, 252;
  --color-neutral-100: 247, 247, 248;
  --color-neutral-200: 230, 230, 232;
  --color-neutral-300: 219, 219, 222;
  --color-neutral-400: 181, 181, 186;
  --color-neutral-500: 125, 125, 133;
  --color-neutral-600: 98, 98, 106;
  --color-neutral-700: 58, 58, 65;
  --color-neutral-800: 27, 27, 31;
  --color-neutral-900: 19, 19, 22;

  --color-primary-50: 244, 242, 255;
  --color-primary-100: 236, 232, 255;
  --color-primary-200: 218, 211, 255;
  --color-primary-300: 190, 175, 255;
  --color-primary-400: 157, 127, 255;
  --color-primary-500: 124, 82, 255;
  --color-primary-600: 108, 71, 255;
  --color-primary-700: 91, 58, 230;
  --color-primary-800: 77, 46, 212;
  --color-primary-900: 59, 33, 173;
}

.dark {
  --bg-main: #131316;
  --bg-surface: #1b1b1f;
  --bg-subtle: #28282e;
  --bg-element: #3a3a41;
  --bg-hover: #28282e;
  --bg-active: #3a3a41;

  --border-main: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.15);

  --text-main: #fcfcfc;
  --text-muted: #b5b5ba;
  --text-subtle: #7d7d85;
  --text-disabled: #62626a;

  --shadow-button-primary: 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.15) inset, 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
  --shadow-button-secondary: 0px 0px 0px 1px rgba(255, 255, 255, 0.08);
  --shadow-control: 0px 0px 0px 1px rgba(255, 255, 255, 0.08);
  --shadow-card: 0px 0px 0px 1px rgba(255, 255, 255, 0.08);
  --shadow-modal: 0px 20px 25px -5px rgba(0, 0, 0, 0.5), 0px 8px 10px -6px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.08);
  --shadow-popover: 0px 10px 15px -3px rgba(0, 0, 0, 0.5), 0px 4px 6px -4px rgba(0, 0, 0, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.08);
}

/* 3. GLOBAL TYPOGRAPHY & BASE RESET */
html {
  font-size: 14px;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 450 !important;
  letter-spacing: -0.01em !important;
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11' !important;
}

code, kbd, samp, pre {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* 4. BUTTONS SYSTEM */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 7px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  transition: all 0.15s ease;
  outline: none;
}

.btn:focus-visible {
  box-shadow: var(--shadow-focus-ring) !important;
  outline: none !important;
}

.btn-primary {
  background-color: #6c47ff !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-button-primary) !important;
  border: none !important;
}

.btn-primary:hover,
.btn-primary:active {
  background-color: #5b3ae6 !important;
  box-shadow: var(--shadow-button-primary) !important;
}

.btn-secondary {
  background-color: #ffffff !important;
  color: #131316 !important;
  box-shadow: var(--shadow-button-secondary) !important;
  border: none !important;
}

.btn-secondary:hover,
.btn-secondary:active {
  background-color: #f7f7f8 !important;
  color: #131316 !important;
}

.dark .btn-secondary {
  background-color: #1b1b1f !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-button-secondary) !important;
}

.dark .btn-secondary:hover {
  background-color: #28282e !important;
}

.btn-basic {
  background-color: transparent !important;
  color: #62626a !important;
  border: none !important;
  box-shadow: none !important;
}

.btn-basic:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: #131316 !important;
}

.dark .btn-basic {
  color: #b5b5ba !important;
}

.dark .btn-basic:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.btn-sm {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  padding: 0.25rem 0.625rem !important;
  border-radius: 5px !important;
}

.btn-pill {
  border-radius: 9999px !important;
}

/* 5. FORM CONTROLS */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='url'],
select,
textarea {
  border-radius: 7px !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  border: none !important;
  box-shadow: var(--shadow-control) !important;
  transition: all 0.15s ease !important;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='url']:focus,
select:focus,
textarea:focus {
  box-shadow: var(--shadow-focus-ring) !important;
  outline: none !important;
  border: none !important;
}

input[type='checkbox'],
input[type='radio'] {
  color: #6c47ff !important;
  box-shadow: var(--shadow-control) !important;
  border: none !important;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  box-shadow: var(--shadow-focus-ring) !important;
  outline: none !important;
  --tw-ring-shadow: none !important;
}

/* 6. CARDS & PANELS */
.card,
[data-slot='card'] {
  border-radius: 7px !important;
  box-shadow: var(--shadow-card) !important;
}