/* FreeTools shared UI foundation */

:root {
  color-scheme: light;
  --ft-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ft-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ft-cardinal: #8c1515;
  --ft-cardinal-dark: #6f1010;
  --ft-cardinal-soft: #f7e8e8;
  --ft-grey-950: #1c1d1f;
  --ft-grey-900: #25272a;
  --ft-grey-800: #35383d;
  --ft-grey-700: #4b4f55;
  --ft-grey-600: #62676e;
  --ft-grey-500: #7e848b;
  --ft-grey-400: #a3a8ae;
  --ft-grey-300: #c8ccd0;
  --ft-grey-200: #e1e3e5;
  --ft-grey-100: #f0f1f2;
  --ft-grey-50: #f8f9f9;
  --ft-white: #ffffff;
  --ft-bg: var(--ft-grey-50);
  --ft-surface: var(--ft-white);
  --ft-surface-raised: var(--ft-white);
  --ft-text: var(--ft-grey-950);
  --ft-text-muted: var(--ft-grey-600);
  --ft-border: var(--ft-grey-200);
  --ft-border-strong: var(--ft-grey-300);
  --ft-primary: var(--ft-cardinal);
  --ft-primary-hover: var(--ft-cardinal-dark);
  --ft-primary-contrast: var(--ft-white);
  --ft-focus: #b83a3a;
  --ft-success: #176b45;
  --ft-warning: #8a5700;
  --ft-danger: #b42318;
  --ft-radius-sm: 0.5rem;
  --ft-radius-md: 0.75rem;
  --ft-radius-lg: 1rem;
  --ft-radius-xl: 1.5rem;
  --ft-shadow-sm: 0 1px 2px rgb(28 29 31 / 7%);
  --ft-shadow-md: 0 10px 30px rgb(28 29 31 / 10%);
  --ft-shadow-lg: 0 20px 50px rgb(28 29 31 / 14%);
  --ft-content: 72rem;
  --ft-gutter: clamp(1rem, 3vw, 2rem);
  --ft-space-1: 0.25rem;
  --ft-space-2: 0.5rem;
  --ft-space-3: 0.75rem;
  --ft-space-4: 1rem;
  --ft-space-5: 1.25rem;
  --ft-space-6: 1.5rem;
  --ft-space-8: 2rem;
  --ft-space-10: 2.5rem;
  --ft-space-12: 3rem;
  --ft-space-16: 4rem;
}

:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --ft-bg: #17181a;
  --ft-surface: #222427;
  --ft-surface-raised: #2b2e32;
  --ft-text: #f4f5f5;
  --ft-text-muted: #b9bdc1;
  --ft-border: #3b3f44;
  --ft-border-strong: #555b62;
  --ft-primary: #e06a6a;
  --ft-primary-hover: #f08b8b;
  --ft-primary-contrast: #1c1d1f;
  --ft-focus: #f19a9a;
  --ft-cardinal-soft: #482529;
  --ft-success: #6fc99a;
  --ft-warning: #e7b95f;
  --ft-danger: #ff8b80;
  --ft-shadow-sm: 0 1px 2px rgb(0 0 0 / 25%);
  --ft-shadow-md: 0 10px 30px rgb(0 0 0 / 25%);
  --ft-shadow-lg: 0 20px 50px rgb(0 0 0 / 35%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ft-bg: #17181a;
    --ft-surface: #222427;
    --ft-surface-raised: #2b2e32;
    --ft-text: #f4f5f5;
    --ft-text-muted: #b9bdc1;
    --ft-border: #3b3f44;
    --ft-border-strong: #555b62;
    --ft-primary: #e06a6a;
    --ft-primary-hover: #f08b8b;
    --ft-primary-contrast: #1c1d1f;
    --ft-focus: #f19a9a;
    --ft-cardinal-soft: #482529;
    --ft-success: #6fc99a;
    --ft-warning: #e7b95f;
    --ft-danger: #ff8b80;
    --ft-shadow-sm: 0 1px 2px rgb(0 0 0 / 25%);
    --ft-shadow-md: 0 10px 30px rgb(0 0 0 / 25%);
    --ft-shadow-lg: 0 20px 50px rgb(0 0 0 / 35%);
  }
}

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

html {
  min-width: 320px;
  background: var(--ft-bg);
  color: var(--ft-text);
  font-family: var(--ft-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--ft-bg);
  color: var(--ft-text);
  font-size: 1rem;
  line-height: 1.55;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
[role="button"] {
  min-block-size: 2.75rem;
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ft-focus);
  outline-offset: 3px;
}

:where(a) {
  color: var(--ft-primary);
  text-underline-offset: 0.18em;
}

:where(a:hover) {
  color: var(--ft-primary-hover);
}

.ft-container {
  width: min(100% - (var(--ft-gutter) * 2), var(--ft-content));
  margin-inline: auto;
}

.ft-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ft-space-4);
}

.ft-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ft-space-3);
}

.ft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--ft-space-4);
}

.ft-card,
.ft-panel {
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface);
  box-shadow: var(--ft-shadow-sm);
}

.ft-card {
  padding: var(--ft-space-6);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ft-card:hover {
  border-color: var(--ft-border-strong);
  box-shadow: var(--ft-shadow-md);
  transform: translateY(-2px);
}

.ft-panel {
  padding: clamp(var(--ft-space-5), 4vw, var(--ft-space-8));
}

.ft-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ft-space-2);
  min-block-size: 2.75rem;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--ft-radius-md);
  background: var(--ft-primary);
  color: var(--ft-primary-contrast);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.ft-button:hover {
  background: var(--ft-primary-hover);
  color: var(--ft-primary-contrast);
  transform: translateY(-1px);
}

.ft-button-secondary {
  border-color: var(--ft-border-strong);
  background: var(--ft-surface-raised);
  color: var(--ft-text);
}

.ft-button-secondary:hover {
  background: var(--ft-cardinal-soft);
  color: var(--ft-text);
}

.ft-input,
.ft-select,
.ft-textarea {
  display: block;
  width: 100%;
  min-block-size: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ft-border-strong);
  border-radius: var(--ft-radius-md);
  background: var(--ft-surface);
  color: var(--ft-text);
}

.ft-textarea {
  min-block-size: 8rem;
  resize: vertical;
}

.ft-input::placeholder,
.ft-textarea::placeholder {
  color: var(--ft-text-muted);
  opacity: 0.85;
}

.ft-upload {
  display: grid;
  min-block-size: 8rem;
  place-items: center;
  padding: var(--ft-space-6);
  border: 2px dashed var(--ft-border-strong);
  border-radius: var(--ft-radius-lg);
  background: var(--ft-surface-raised);
  color: var(--ft-text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.ft-upload:hover,
.ft-upload.is-dragover {
  border-color: var(--ft-primary);
  background: var(--ft-cardinal-soft);
  color: var(--ft-text);
}

.ft-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ft-upload-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--ft-space-3);
  margin-block-start: var(--ft-space-3);
}

.ft-upload-preview-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-md);
  background: var(--ft-surface-raised);
}

.ft-upload-preview img,
.ft-upload-preview video {
  display: block;
  width: 100%;
  height: 7rem;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--ft-bg);
}

.ft-upload-preview-item.is-expanded img,
.ft-upload-preview-item.is-expanded video {
  height: min(24rem, 60vw);
}

.ft-upload-expand {
  min-block-size: 2.25rem;
  padding: 0 var(--ft-space-3);
  border: 0;
  border-block-start: 1px solid var(--ft-border);
  background: transparent;
  color: var(--ft-primary);
  font-weight: 700;
}

.ft-upload-expand:hover {
  background: var(--ft-cardinal-soft);
}

.ft-upload-preview-meta {
  padding: var(--ft-space-2) var(--ft-space-3);
  color: var(--ft-text-muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.ft-upload-remove {
  position: absolute;
  inset-block-start: var(--ft-space-2);
  inset-inline-end: var(--ft-space-2);
  min-block-size: 2.25rem;
  padding: 0 var(--ft-space-2);
  border: 1px solid var(--ft-border-strong);
  border-radius: var(--ft-radius-sm);
  background: color-mix(in srgb, var(--ft-surface) 90%, transparent);
  color: var(--ft-text);
}

.ft-upload-empty {
  color: var(--ft-text-muted);
  font-size: 0.9rem;
}

.ft-label {
  display: block;
  margin-block-end: var(--ft-space-2);
  color: var(--ft-text);
  font-size: 0.9rem;
  font-weight: 700;
}

.ft-kicker {
  color: var(--ft-primary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ft-title {
  margin: 0;
  color: var(--ft-text);
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.ft-muted {
  color: var(--ft-text-muted);
}

.ft-divider {
  border: 0;
  border-block-start: 1px solid var(--ft-border);
}

.ft-alert {
  padding: var(--ft-space-4);
  border: 1px solid var(--ft-border);
  border-inline-start: 0.25rem solid var(--ft-primary);
  border-radius: var(--ft-radius-md);
  background: var(--ft-cardinal-soft);
}

.ft-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.18rem solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  color: var(--ft-primary);
  animation: ft-spin 700ms linear infinite;
  vertical-align: -0.2em;
}

.ft-spinner-lg {
  width: 2rem;
  height: 2rem;
  border-width: 0.25rem;
}

.ft-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--ft-space-3);
  color: var(--ft-text-muted);
}

@keyframes ft-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 40rem) {
  .ft-card {
    padding: var(--ft-space-5);
  }

  .ft-cluster > * {
    flex: 1 1 100%;
  }

  .ft-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .ft-card:hover,
  .ft-button:hover {
    transform: none;
  }
}