/*
  GPointo design system: tokens, base and shared components (site and admin).
  Source of truth: GCors design standards book (DESIGN-STANDARDS-2027.md), Radix Colors + Radix Themes scales.
  Color and shadow values are the same as GCors theme.service.ts (g2027Light / g2027Dark).
  Light values live here; theme.js replaces every color and shadow token with the dark map on documentElement.
  Components use only var(--g-*): no hex, rgb or rgba below the token block.
*/
:root {
  /* Color: accent from #0066ff, gray from #8B8D98 */
  --g-accent-1: #fcfdff; --g-accent-2: #f5f9ff; --g-accent-3: #e9f3ff; --g-accent-4: #daebff;
  --g-accent-5: #c7e1ff; --g-accent-6: #b2d3ff; --g-accent-7: #98c1ff; --g-accent-8: #73a7ff;
  --g-accent-9: #0066ff; --g-accent-10: #0059e8; --g-accent-11: #005dec; --g-accent-12: #0a2e6b;
  --g-accent-contrast: #ffffff;
  --g-gray-1: #fcfcfd; --g-gray-2: #f9f9fb; --g-gray-3: #eff0f3; --g-gray-4: #e7e8ec;
  --g-gray-5: #e0e1e6; --g-gray-6: #d8d9e0; --g-gray-7: #cdced7; --g-gray-8: #b9bbc6;
  --g-gray-9: #8b8d98; --g-gray-10: #80828d; --g-gray-11: #62636c; --g-gray-12: #1e1f24;
  --g-gray-a2: #00005506; --g-gray-a3: #00104010; --g-gray-a5: #0009321f;
  --g-red-3: #feebec; --g-red-6: #fdbdbe; --g-red-8: #eb8e90; --g-red-9: #e5484d; --g-red-11: #ce2c31;
  --g-green-3: #e9f6e9; --g-green-6: #b2ddb5; --g-green-9: #46a758; --g-green-11: #2a7e3b;
  --g-amber-2: #fefbe9; --g-amber-3: #fff7c2; --g-amber-6: #f3d673; --g-amber-7: #e9c162;
  --g-amber-9: #ffc53d; --g-amber-11: #ab6400; --g-amber-contrast: #21201c;
  --g-panel: #ffffff;
  --g-page: #f4f5f8;
  --g-scrim: rgba(0, 0, 0, 0.4);
  --g-focus-ring: #0066ff26;
  --g-field-shadow: 0 1px 2px #00104010;
  --g-shadow-1: 0 1px 2px #00104010;
  --g-shadow-2: 0 0 0 1px #00104010, 0 0 0 0.5px rgba(0,0,0,0.05), 0 1px 1px 0 #00005506, 0 2px 1px -1px rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.05);
  --g-shadow-3: 0 0 0 1px #00104010, 0 2px 3px -2px #00104010, 0 3px 12px -4px rgba(0,0,0,0.1), 0 4px 16px -8px rgba(0,0,0,0.1);
  --g-shadow-4: 0 0 0 1px #00104010, 0 8px 40px rgba(0,0,0,0.05), 0 12px 32px -16px #00104010;
  --g-shadow-5: 0 0 0 1px #00104010, 0 12px 60px rgba(0,0,0,0.15), 0 12px 32px -16px #0009321f;
  --g-nav-bg: #f9f9fb; --g-nav-hover: #e7e8ec; --g-nav-active: #e9f3ff; --g-nav-border: #e0e1e6;
  --g-nav-text: #62636c; --g-nav-text-strong: #1e1f24; --g-nav-muted: #80828d; --g-nav-accent: #005dec;

  /* Typography: Ubuntu 400 / 500 / 700, Radix Themes scale */
  --g-font-family: "Ubuntu", "Segoe UI", Arial, sans-serif;
  --g-font-size-1: 12px; --g-line-height-1: 16px; --g-letter-spacing-1: 0.0025em;
  --g-font-size-2: 14px; --g-line-height-2: 20px; --g-letter-spacing-2: 0em;
  --g-font-size-3: 16px; --g-line-height-3: 24px; --g-letter-spacing-3: 0em;
  --g-font-size-4: 18px; --g-line-height-4: 26px; --g-letter-spacing-4: -0.0025em;
  --g-font-size-5: 20px; --g-line-height-5: 28px; --g-letter-spacing-5: -0.005em;
  --g-font-size-6: 24px; --g-line-height-6: 30px; --g-letter-spacing-6: -0.00625em;
  --g-font-size-7: 28px; --g-line-height-7: 36px; --g-letter-spacing-7: -0.0075em;
  --g-font-size-8: 35px; --g-line-height-8: 40px; --g-letter-spacing-8: -0.01em;
  --g-font-size-9: 60px; --g-line-height-9: 60px; --g-letter-spacing-9: -0.025em;

  /* Space (4px grid), radius, control heights, motion */
  --g-space-1: 4px; --g-space-2: 8px; --g-space-3: 12px; --g-space-4: 16px; --g-space-5: 24px;
  --g-space-6: 32px; --g-space-7: 40px; --g-space-8: 48px; --g-space-9: 64px;
  --g-radius-1: 3px; --g-radius-2: 4px; --g-radius-3: 6px; --g-radius-4: 8px; --g-radius-5: 12px; --g-radius-6: 16px; --g-radius-full: 9999px;
  --g-control-1: 24px; --g-control-2: 32px; --g-control-3: 40px; --g-touch: 44px;
  --g-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --g-duration-fast: 120ms; --g-duration-base: 240ms; --g-duration-slow: 600ms;
}

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

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--g-font-family);
  font-size: var(--g-font-size-2);
  line-height: var(--g-line-height-2);
  color: var(--g-gray-12);
  background: var(--g-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--g-accent-11); text-decoration: none; }
a:hover { color: var(--g-accent-12, var(--g-accent-11)); }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--g-accent-8); outline-offset: 2px; }

.gp-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.gp-icon { flex: none; }

/* Buttons: primary (accent 9), secondary (gray 1 + gray 7 border), ghost, danger */
.gp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--g-space-2);
  height: var(--g-control-2); padding: 0 var(--g-space-3);
  border-radius: var(--g-radius-3); border: 1px solid var(--g-gray-7);
  background: var(--g-gray-1); color: var(--g-gray-12);
  font-size: var(--g-font-size-2); font-weight: 500; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none; user-select: none;
  transition: background-color var(--g-duration-fast) ease, border-color var(--g-duration-fast) ease, color var(--g-duration-fast) ease, box-shadow var(--g-duration-fast) ease;
}
.gp-btn:hover { background: var(--g-gray-3); text-decoration: none; }
.gp-btn:active { background: var(--g-gray-4); }
.gp-btn--primary { background: var(--g-accent-9); border-color: var(--g-accent-9); color: var(--g-accent-contrast); box-shadow: var(--g-shadow-1); }
.gp-btn--primary:hover { background: var(--g-accent-10); border-color: var(--g-accent-10); }
.gp-btn--primary:active { background: var(--g-accent-10); }
.gp-btn--ghost { background: transparent; border-color: transparent; color: var(--g-gray-11); }
.gp-btn--ghost:hover { background: var(--g-gray-3); color: var(--g-gray-12); }
.gp-btn--danger { background: transparent; border-color: transparent; color: var(--g-red-11); }
.gp-btn--danger:hover { background: var(--g-red-3); }
.gp-btn--lg { height: var(--g-control-3); padding: 0 var(--g-space-4); font-size: var(--g-font-size-3); border-radius: var(--g-radius-4); }
.gp-btn--icon { width: var(--g-control-2); padding: 0; }
.gp-btn:disabled, .gp-btn[aria-disabled="true"] { background: var(--g-gray-3); border-color: var(--g-gray-3); color: var(--g-gray-8); box-shadow: none; cursor: not-allowed; }
.gp-btn .gp-icon { margin: 0 -2px; }

/* Theme toggle: the icon shows the theme you switch to */
.gp-theme-icon--sun { display: none; }
:root[data-theme="dark"] .gp-theme-icon--sun { display: block; }
:root[data-theme="dark"] .gp-theme-icon--moon { display: none; }

/* Fields: label above, 32px, gray 9 border, soft shadow, soft focus ring */
.gp-field { display: flex; flex-direction: column; gap: var(--g-space-2); min-width: 0; }
.gp-label { font-size: var(--g-font-size-2); font-weight: 500; color: var(--g-gray-11); }
.gp-label__hint { font-weight: 400; color: var(--g-gray-10); }
.gp-input, .gp-select, .gp-textarea {
  width: 100%; height: var(--g-control-2); padding: 0 10px;
  border: 1px solid var(--g-gray-9); border-radius: var(--g-radius-3);
  background: var(--g-gray-1); color: var(--g-gray-12);
  font-size: var(--g-font-size-2); line-height: var(--g-line-height-2);
  box-shadow: var(--g-field-shadow);
  transition: border-color var(--g-duration-fast) ease, box-shadow var(--g-duration-fast) ease;
}
.gp-input::placeholder, .gp-textarea::placeholder { color: var(--g-gray-10); }
.gp-input:hover, .gp-select:hover, .gp-textarea:hover { border-color: var(--g-gray-11); }
.gp-input:focus, .gp-select:focus, .gp-textarea:focus { outline: none; border-color: var(--g-accent-9); box-shadow: 0 0 0 4px var(--g-focus-ring); }
.gp-textarea { display: block; height: auto; min-height: 88px; max-height: 360px; padding: var(--g-space-2) 10px; resize: none; field-sizing: content; }
.gp-input[type="number"] { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.gp-input[type="number"]::-webkit-inner-spin-button, .gp-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Select: own chevron, native list keeps keyboard and screen reader behaviour */
.gp-select-wrap { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.gp-select-wrap .gp-select { appearance: none; -webkit-appearance: none; padding-right: var(--g-space-7); cursor: pointer; }
.gp-select-wrap > .gp-icon { position: absolute; pointer-events: none; color: var(--g-gray-11); }
.gp-select-wrap > .gp-icon:last-child { right: 10px; }
.gp-select-wrap--lead .gp-select { padding-left: var(--g-space-7); }
.gp-select-wrap--lead > .gp-icon:first-child { left: 10px; }
.gp-select-wrap--quiet .gp-select { border-color: transparent; background: transparent; box-shadow: none; color: var(--g-gray-11); font-weight: 500; }
.gp-select-wrap--quiet .gp-select:hover { background: var(--g-gray-3); color: var(--g-gray-12); }
.gp-select-wrap--quiet .gp-select:focus { background: var(--g-gray-1); }

/* Yes or no is a switch, never a square box; choosing one of several is a round radio. */
.gp-check { display: inline-flex; align-items: center; gap: var(--g-space-2); min-height: var(--g-control-2); cursor: pointer; font-weight: 500; }
.gp-check input { appearance: none; -webkit-appearance: none; position: relative; margin: 0; flex: none; cursor: pointer; }
.gp-check input[type="checkbox"] {
  width: 36px; height: 20px; border: 0; border-radius: var(--g-radius-full); background: var(--g-gray-7);
  transition: background-color var(--g-duration-fast) ease;
}
.gp-check input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--g-radius-full);
  background: var(--g-accent-contrast); box-shadow: var(--g-shadow-1); transition: transform var(--g-duration-fast) var(--g-ease-out);
}
.gp-check input[type="checkbox"]:hover { background: var(--g-gray-8); }
.gp-check input[type="checkbox"]:checked { background: var(--g-accent-9); }
.gp-check input[type="checkbox"]:checked:hover { background: var(--g-accent-10); }
.gp-check input[type="checkbox"]:checked::before { transform: translateX(16px); }
.gp-check input[type="radio"] {
  display: grid; place-content: center; width: 18px; height: 18px; border: 1px solid var(--g-gray-9); border-radius: var(--g-radius-full);
  background: var(--g-gray-1); box-shadow: var(--g-field-shadow); transition: border-color var(--g-duration-fast) ease;
}
.gp-check input[type="radio"]::before {
  content: ""; width: 10px; height: 10px; border-radius: var(--g-radius-full); background: var(--g-accent-9);
  transform: scale(0); transition: transform var(--g-duration-fast) var(--g-ease-out);
}
.gp-check input[type="radio"]:checked { border-color: var(--g-accent-9); }
.gp-check input[type="radio"]:checked::before { transform: scale(1); }
.gp-check input:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--g-focus-ring); }
.gp-check input:disabled { opacity: 0.5; cursor: not-allowed; }
.gp-check__hint { display: block; font-weight: 400; color: var(--g-gray-11); font-size: var(--g-font-size-1); line-height: var(--g-line-height-1); }

/* Badge */
.gp-badge {
  display: inline-flex; align-items: center; gap: var(--g-space-1); height: 20px; padding: 0 var(--g-space-2);
  border-radius: var(--g-radius-full); background: var(--g-gray-3); color: var(--g-gray-11);
  font-size: var(--g-font-size-1); line-height: var(--g-line-height-1); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.gp-badge--accent { background: var(--g-accent-3); color: var(--g-accent-11); }
.gp-badge--green { background: var(--g-green-3); color: var(--g-green-11); }
.gp-badge--amber { background: var(--g-amber-3); color: var(--g-amber-11); }
.gp-badge--red { background: var(--g-red-3); color: var(--g-red-11); }
.gp-badge__dot { width: 6px; height: 6px; border-radius: var(--g-radius-full); background: currentColor; }

/* Card: panel, gray a3 border, radius 12, shadow 2 */
.gp-card { background: var(--g-panel); border: 1px solid var(--g-gray-a3); border-radius: var(--g-radius-5); box-shadow: var(--g-shadow-2); }

/* Icon in a tinted square, used in page headers and empty states */
.gp-tile { display: inline-grid; place-items: center; flex: none; width: var(--g-control-3); height: var(--g-control-3); border-radius: var(--g-radius-4); background: var(--g-accent-3); color: var(--g-accent-11); }
.gp-tile--lg { width: var(--g-space-8); height: var(--g-space-8); border-radius: var(--g-radius-5); }

/* Alert */
.gp-alert { display: flex; gap: var(--g-space-2); align-items: flex-start; padding: var(--g-space-3); border-radius: var(--g-radius-4); background: var(--g-red-3); color: var(--g-red-11); font-weight: 500; }
.gp-alert .gp-icon { margin-top: 2px; }

/* Segmented control: gray track, selected = panel + shadow 1 */
.gp-segmented { display: inline-flex; gap: var(--g-space-1); padding: var(--g-space-1); border-radius: var(--g-radius-4); background: var(--g-gray-3); }
.gp-segmented__item {
  height: var(--g-control-2); padding: 0 var(--g-space-4); border: 0; border-radius: var(--g-radius-3);
  background: transparent; color: var(--g-gray-11); font-size: var(--g-font-size-2); font-weight: 500; cursor: pointer;
  transition: background-color var(--g-duration-fast) ease, color var(--g-duration-fast) ease, box-shadow var(--g-duration-fast) ease;
}
.gp-segmented__item:hover { color: var(--g-gray-12); text-decoration: none; }
a.gp-segmented__item { display: inline-flex; align-items: center; }
.gp-segmented__item[aria-pressed="true"] { background: var(--g-panel); color: var(--g-gray-12); box-shadow: var(--g-shadow-2); }

.gp-note { color: var(--g-gray-11); font-size: var(--g-font-size-1); line-height: var(--g-line-height-1); }

/* Hidden stays hidden whatever display a component's class sets; without this an empty alert or button shows. */
[hidden] { display: none !important; }

/* Loading indicator for HTMX swaps */
.htmx-request.gp-swap, .htmx-request .gp-swap { opacity: 0.5; transition: opacity var(--g-duration-base) ease; }

@media (max-width: 767px) {
  .gp-btn, .gp-input, .gp-select { height: var(--g-control-3); }
  .gp-input, .gp-select, .gp-textarea { font-size: var(--g-font-size-3); }
  .gp-btn--icon { width: var(--g-control-3); }
  .gp-segmented__item { height: var(--g-control-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } /* overrides every component transition for users who ask for no motion */
}