/*
  Skillzz organization product brand starter.
  Extracted from the current Skillzz app style language.

  Use this file as the first stylesheet in the new project.
  It keeps the organization product visually related to skill-zz.com
  without copying the full consumer app CSS.
*/

:root {
  /* Honey / amber brand palette */
  --sz-honey-50: #fffbeb;
  --sz-honey-100: #fef3c7;
  --sz-honey-200: #fde68a;
  --sz-honey-300: #fcd34d;
  --sz-honey-400: #fbbf24;
  --sz-honey-500: #f5bd2e;
  --sz-honey-600: #d97706;
  --sz-honey-700: #b45309;
  --sz-honey-800: #92400e;
  --sz-honey-900: #78350f;

  /* Warm ink scale */
  --sz-ink-900: #1f1b16;
  --sz-ink-700: #4a423a;
  --sz-ink-500: #6b6157;
  --sz-ink-300: #a8a096;
  --sz-ink-200: #d6cfc4;
  --sz-ink-100: #e8e2d6;
  --sz-ink-50: #f5f1e8;

  /* Surfaces */
  --sz-cream: #fffef9;
  --sz-paper: #ffffff;

  /* Semantic accents */
  --sz-success: #10b981;
  --sz-danger: #ef4444;
  --sz-info: #2563eb;

  /* App-level tokens */
  --sz-font-sans: "Heebo", "Segoe UI", Arial, sans-serif;
  --sz-radius-sm: 10px;
  --sz-radius-md: 14px;
  --sz-radius-lg: 20px;
  --sz-shadow-soft: 0 1px 2px rgba(245, 189, 46, 0.04), 0 4px 12px rgba(31, 27, 22, 0.04);
  --sz-shadow-lift: 0 14px 34px rgba(31, 27, 22, 0.1);
}

html {
  direction: rtl;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sz-cream);
  color: var(--sz-ink-900);
  font-family: var(--sz-font-sans);
  -webkit-font-smoothing: antialiased;
}

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

input,
select,
textarea {
  font-size: 16px;
}

button {
  cursor: pointer;
}

.sz-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sz-cream);
  color: var(--sz-ink-900);
}

.sz-container {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

.sz-card {
  background: var(--sz-paper);
  border: 1px solid var(--sz-ink-100);
  border-radius: var(--sz-radius-lg);
  box-shadow: var(--sz-shadow-soft);
}

.sz-panel {
  background: var(--sz-paper);
  border: 1px solid var(--sz-ink-100);
  border-radius: var(--sz-radius-md);
}

.sz-button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--sz-radius-md);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.sz-button-primary {
  background: var(--sz-honey-500);
  color: var(--sz-ink-900);
  box-shadow: 0 2px 0 var(--sz-honey-700);
}

.sz-button-primary:hover {
  background: var(--sz-honey-400);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--sz-honey-700);
}

.sz-button-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--sz-honey-700);
}

.sz-button-secondary {
  background: var(--sz-ink-900);
  color: var(--sz-cream);
}

.sz-button-ghost {
  background: var(--sz-paper);
  color: var(--sz-ink-900);
  border-color: var(--sz-ink-100);
}

.sz-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--sz-ink-100);
  border-radius: var(--sz-radius-md);
  background: var(--sz-paper);
  color: var(--sz-ink-900);
  padding: 12px 14px;
  outline: none;
}

.sz-input::placeholder {
  color: var(--sz-ink-300);
}

.sz-input:focus {
  border-color: var(--sz-honey-500);
  box-shadow: 0 0 0 3px rgba(245, 189, 46, 0.22);
}

.sz-label {
  display: grid;
  gap: 7px;
  color: var(--sz-ink-900);
  font-size: 13px;
  font-weight: 800;
}

.sz-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--sz-ink-50);
  color: var(--sz-ink-500);
  font-size: 12px;
  font-weight: 800;
}

.sz-pill-honey {
  background: var(--sz-honey-100);
  color: var(--sz-honey-800);
}

.sz-pill-success {
  background: #d1fae5;
  color: #047857;
}

.sz-title {
  margin: 0;
  color: var(--sz-ink-900);
  font-weight: 900;
  line-height: 1.15;
}

.sz-copy {
  color: var(--sz-ink-500);
  line-height: 1.65;
}

.sz-muted {
  color: var(--sz-ink-300);
}

.sz-safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.sz-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

@keyframes sz-bee-hover {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.sz-animate-bee-hover {
  animation: sz-bee-hover 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sz-button,
  .sz-animate-bee-hover {
    transition: none;
    animation: none;
  }
}