/* =========================================================
   CyaFactory — Base CSS (Apple Light Mode)
   Clean, spacious, minimal — iOS/macOS inspired
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&display=swap');

/* ── Design Tokens — Apple HIG Light ─────────────────────── */
:root {
  /* System backgrounds */
  --bg-base:        #F2F2F7;   /* Grouped table background */
  --bg-primary:     #FFFFFF;   /* Card / surface */
  --bg-secondary:   #F2F2F7;   /* Inset / secondary */
  --bg-tertiary:    #E5E5EA;

  /* Separators */
  --separator:        rgba(60,60,67,0.13);
  --separator-opaque: #D1D1D6;

  /* Labels */
  --label:            #000000;
  --label-secondary:  rgba(60,60,67,0.60);
  --label-tertiary:   rgba(60,60,67,0.36);
  --label-quaternary: rgba(60,60,67,0.18);

  /* System fills */
  --fill-primary:   rgba(120,120,128,0.20);
  --fill-secondary: rgba(120,120,128,0.14);
  --fill-tertiary:  rgba(118,118,128,0.08);

  /* Blues — steel, not iOS vivid */
  --blue:        #2563EB;
  --blue-light:  #4A7FDB;
  --blue-tinted: rgba(37,99,235,0.06);
  --blue-border: rgba(37,99,235,0.16);

  /* Greens — dark forest */
  --green:        #166534;
  --green-tinted: rgba(22,101,52,0.07);
  --green-border: rgba(22,101,52,0.18);

  /* Reds — deep burgundy */
  --red:          #991B1B;
  --red-tinted:   rgba(153,27,27,0.06);
  --red-border:   rgba(153,27,27,0.18);

  /* Oranges — dark amber */
  --orange:        #92400E;
  --orange-tinted: rgba(146,64,14,0.07);
  --orange-border: rgba(146,64,14,0.18);

  /* Radius */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius:     13px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 26px;

  /* Type scale */
  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md:   1.0625rem; /* 17px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.4375rem; /* 23px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.1875rem; /* 35px */
  --text-4xl:  2.75rem;   /* 44px */

  /* Shadows — light mode, very subtle */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-3: 0 8px 32px rgba(0,0,0,0.10), 0 3px 10px rgba(0,0,0,0.05);

  /* Motion */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur:         220ms;
  --dur-slow:    380ms;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: var(--bg-base);
  color: var(--label);
  min-height: 100vh;
  line-height: 1.47059;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fill-primary); border-radius: 99px; }

/* ── Typography ───────────────────────────────────────────── */
h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: var(--text-xl);  font-weight: 600; letter-spacing: -0.02em; }
h4 { font-size: var(--text-lg);  font-weight: 600; letter-spacing: -0.015em; }

/* ── Card ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* ── Pill / Badge ─────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pill-green  { background: rgba(22,101,52,0.09);  color: #14532D; }
.pill-red    { background: rgba(153,27,27,0.08);   color: #7F1D1D; }
.pill-blue   { background: rgba(37,99,235,0.07);   color: #1D4ED8; }
.pill-orange { background: rgba(146,64,14,0.08);   color: #78350F; }

/* ── Dot ──────────────────────────────────────────────────── */
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-green  { background: var(--green); }
.dot-orange { background: var(--orange); }
.dot-red    { background: var(--red); }
.dot-pulse  { animation: pulse 2.4s ease-in-out infinite; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--text-base);
  border-radius: var(--radius);
  padding: 10px 20px;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  user-select: none;
  letter-spacing: -0.01em;
}
.btn:active { transform: scale(0.97); }

.btn-blue   { background: var(--blue);  color: #fff; }
.btn-blue:hover  { background: #0070F0; box-shadow: 0 4px 16px rgba(0,122,255,0.30); }

.btn-green  { background: var(--green); color: #fff; }
.btn-green:hover { filter: brightness(1.06); box-shadow: 0 4px 16px rgba(52,199,89,0.30); }

.btn-red    { background: var(--red);   color: #fff; }
.btn-red:hover   { filter: brightness(1.06); box-shadow: 0 4px 16px rgba(255,59,48,0.28); }

.btn-secondary {
  background: var(--fill-tertiary);
  color: var(--label);
  border: 1px solid var(--separator);
}
.btn-secondary:hover { background: var(--fill-secondary); }

/* ── Progress ─────────────────────────────────────────────── */
.progress-track {
  width: 100%;
  height: 5px;
  background: var(--fill-tertiary);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
  transition: width 0.6s var(--ease-out);
}
.progress-fill-green  { background: var(--green); }
.progress-fill-orange { background: var(--orange); }

/* ── Section label ────────────────────────────────────────── */
.section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--label-tertiary);
}

/* ── Divider ──────────────────────────────────────────────── */
.divider { height: 1px; background: var(--separator); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
@keyframes slideOut {
  to { opacity: 0; transform: translateX(20px) scale(0.98); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}

.animate-in    { animation: fadeInUp 0.35s var(--ease-out) both; }
.animate-scale { animation: scaleIn  0.3s  var(--ease-spring) both; }

/* ── Stagger ──────────────────────────────────────────────── */
.stagger > *:nth-child(1) { animation-delay:  0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay:100ms; }
.stagger > *:nth-child(4) { animation-delay:150ms; }
.stagger > *:nth-child(5) { animation-delay:200ms; }
.stagger > *:nth-child(6) { animation-delay:250ms; }

/* ── Removing animation ───────────────────────────────────── */
.removing { animation: slideOut 0.32s var(--ease-out) forwards; }