/* ============================================================
   Scaftra UI tokens — extracted from ui-astro
   Source: tailwind.config.mjs + src/styles/global.css
   Brand: teal #7CB9C8 (logo) / #3D8FA1 (default primary)
   ============================================================ */

:root{
  /* PRIMARY (teal scale, exact match) */
  --primary-50:  #f0fafa;
  --primary-100: #d9f1f3;
  --primary-200: #b7e3e8;
  --primary-300: #7cb9c8; /* logo */
  --primary-400: #5aa8b9;
  --primary-500: #3d8fa1; /* DEFAULT primary */
  --primary-600: #357588;
  --primary-700: #305f6f;
  --primary-800: #2d4f5c;
  --primary-900: #29434e;

  --scaftra-light: #7cb9c8;
  --scaftra:       #3d8fa1;
  --scaftra-dark:  #305f6f;

  /* APP CHROME (from --sc-* CSS vars) */
  --sc-primary: #3d8fa1;
  --sc-border:  #e5e7eb;
  --sc-text:    #1f2937;
  --sc-bg:      #ffffff;
  --sc-radius:  0.375rem; /* 6px */
  --sc-shadow:  0 1px 3px rgba(0,0,0,0.1);

  /* TAILWIND GRAYS used heavily in app code */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* SEMANTIC (Tailwind palette aliases used by .badge-*, .blocker-*, etc.) */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;

  --yellow-50:  #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fde68a;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;

  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;

  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  --orange-50:  #fff7ed;
  --orange-200: #fed7aa;
  --orange-700: #c2410c;

  --purple-100: #f3e8ff;
  --purple-800: #6b21a8;

  /* TYPOGRAPHY */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* RADII */
  --radius-sm:  0.25rem;  /* 4px  */
  --radius-md:  0.375rem; /* 6px  · default */
  --radius-lg:  0.5rem;   /* 8px  */
  --radius-xl:  0.75rem;  /* 12px */
  --radius-full:9999px;

  /* SHADOWS */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);

  /* SPACING (Tailwind 4-unit base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* MOTION */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms;
  --dur:      200ms;
  --dur-slow: 300ms;
}

[data-theme="dark"]{
  --sc-primary: #5aa8b9;
  --sc-border:  #374151;
  --sc-text:    #f9fafb;
  --sc-bg:      #111827;
}

/* ============================================================
   Component primitives — direct ports of @layer components
   from global.css. Drop these classes onto markup in mocks
   to get app-faithful styling.
   ============================================================ */

/* BUTTONS ------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:.5rem;font-weight:500;font-family:var(--font-sans);
  transition:all var(--dur-fast) ease;border:0;cursor:pointer;
}
.btn:focus{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary-400)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-sm{padding:.375rem .75rem;font-size:.875rem}
.btn-md{padding:.5rem 1rem;font-size:.875rem}
.btn-lg{padding:.75rem 1.5rem;font-size:1rem}
.btn-action{min-width:140px}

.btn-primary  {background:var(--primary-500);color:#fff}
.btn-primary:hover{background:var(--primary-600)}

.btn-secondary{background:var(--gray-100);color:var(--gray-700)}
.btn-secondary:hover{background:var(--gray-200)}

.btn-outline  {border:1px solid var(--gray-300);background:#fff;color:var(--gray-700)}
.btn-outline:hover{background:var(--gray-50)}

.btn-ghost    {color:var(--gray-600);background:transparent}
.btn-ghost:hover{background:var(--gray-100);color:var(--gray-900)}

.btn-danger   {background:var(--red-600);color:#fff}
.btn-danger:hover{background:var(--red-700)}

.btn-success  {background:var(--green-600);color:#fff}
.btn-success:hover{background:var(--green-700)}

/* BADGES -------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;
  padding:.125rem .625rem;border-radius:9999px;
  font-size:.75rem;font-weight:500;line-height:1.25;
}
.badge-gray  {background:var(--gray-100);color:var(--gray-800)}
.badge-green {background:var(--green-100);color:var(--green-800)}
.badge-yellow{background:var(--yellow-100);color:var(--yellow-800)}
.badge-red   {background:var(--red-100);color:var(--red-800)}
.badge-blue  {background:var(--blue-100);color:var(--blue-800)}
.badge-teal  {background:var(--primary-100);color:#1e6470}
.badge-purple{background:var(--purple-100);color:var(--purple-800)}

/* Workflow status badges (NEW / EDITED / COMPLETED / MISSING) */
.badge--new      {background:var(--blue-50);   color:#1d4ed8;border:1px solid var(--blue-200);  padding:.125rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;display:inline-flex;align-items:center}
.badge--edited   {background:var(--orange-50); color:#c2410c;border:1px solid var(--orange-200);padding:.125rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;display:inline-flex;align-items:center}
.badge--completed{background:var(--green-50);  color:#15803d;border:1px solid #bbf7d0;          padding:.125rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;display:inline-flex;align-items:center}
.badge--missing  {background:var(--red-100);   color:var(--red-700);border:1px solid var(--red-200);   padding:.125rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;display:inline-flex;align-items:center;gap:.25rem;animation:pulse-subtle 2s ease-in-out infinite}
.badge--pending  {background:var(--yellow-100);color:var(--yellow-800);border:1px solid var(--yellow-200);padding:.125rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;display:inline-flex;align-items:center;gap:.25rem}
.badge--approved {background:var(--green-100); color:var(--green-800); border:1px solid #bbf7d0;        padding:.125rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;display:inline-flex;align-items:center;gap:.25rem}
.badge--rejected {background:var(--red-100);   color:var(--red-800);   border:1px solid var(--red-200);  padding:.125rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;display:inline-flex;align-items:center;gap:.25rem}

@keyframes pulse-subtle{0%,100%{opacity:1}50%{opacity:.8}}

/* INPUTS -------------------------------------------------- */
.input{
  width:100%;padding:.5rem .75rem;
  border:1px solid var(--gray-300);border-radius:.5rem;
  background:#fff;color:var(--gray-900);font-family:var(--font-sans);
}
.input::placeholder{color:var(--gray-400)}
.input:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--primary-400)}

/* CARDS / TABLES ------------------------------------------ */
.card-hover{transition:all var(--dur) ease}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

.table-row-hover{transition:background-color var(--dur-fast) ease;cursor:pointer}
.table-row-hover:hover{background:var(--gray-50)}

/* APPROVAL STAMPS ----------------------------------------- */
.approval-stamp{border-radius:.5rem;padding:1rem;margin-top:1rem;transition:all var(--dur) ease;border:1px solid transparent}
.approval-stamp--approved{background:var(--green-50);border-color:#bbf7d0}
.approval-stamp--rejected{background:var(--red-50); border-color:var(--red-200)}
.approval-stamp--pending {background:var(--yellow-50);border-color:var(--yellow-200)}

/* FILTER CHIPS -------------------------------------------- */
.filter-chip{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.375rem .75rem;border-radius:9999px;
  font-size:.875rem;font-weight:500;
  border:1px solid var(--gray-200);background:#fff;color:var(--gray-700);
  cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast);
}
.filter-chip:hover{background:var(--gray-50);border-color:var(--gray-300)}
.filter-chip-active{border-color:var(--primary-400);background:var(--primary-50);color:#155e6c}

/* BLOCKER LINK / CHIP ------------------------------------- */
.blocker-link{color:var(--red-600);transition:color var(--dur-fast);cursor:pointer}
.blocker-link:hover{color:var(--red-700);text-decoration:underline}
.blocker-chip{cursor:pointer;transition:all var(--dur-fast)}
.blocker-chip:hover{box-shadow:0 0 0 2px #fca5a5}

/* TYPOGRAPHY ---------------------------------------------- */
html,body{font-family:var(--font-sans);color:var(--sc-text);background:#fff;-webkit-font-smoothing:antialiased}

/* SCROLLBAR HIDE (matches app base) ----------------------- */
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
.scrollbar-hide::-webkit-scrollbar{display:none}

/* ANIMATIONS (used across app) ---------------------------- */
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.animate-spin-slow{animation:spin-slow 3s linear infinite}

@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-in{animation:fade-in .15s ease-out}

@keyframes fade-slide-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-slide-in{animation:fade-slide-in .4s var(--ease-out) forwards;opacity:0}

@keyframes slide-in-right{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}

/* LINE CLAMP ---------------------------------------------- */
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================
   Mock-only aliases — bridge the names used in our HTML mocks
   (--accent, --ink, --line, --emerald, --amber, --rose, --sky)
   to the real Scaftra tokens. Drop this file into a mock and
   the indigo accent immediately becomes brand teal.
   ============================================================ */
:root{
  --bg:        var(--gray-50);
  --surface:   #fff;
  --surface-2: #fbfbfc;
  --line:      var(--gray-200);
  --line-2:    #eef0f3;
  --ink:       #0f172a;
  --ink-2:     var(--gray-700);
  --ink-3:     var(--gray-500);
  --ink-4:     #94a3b8;

  --accent:     var(--primary-500);
  --accent-2:   var(--primary-50);
  --accent-ink: #1e6470; /* readable teal text on pale bg */

  --amber:      var(--yellow-800);
  --amber-bg:   var(--yellow-100);
  --emerald:    var(--green-800);
  --emerald-bg: var(--green-100);
  --rose:       var(--red-700);
  --rose-bg:    var(--red-100);
  --slate-b:    var(--gray-700);
  --slate-bg:   var(--gray-200);
  --sky:        var(--blue-700);
  --sky-bg:     var(--blue-100);
  --violet:     #6d28d9;
  --violet-bg:  #ede9fe;
  --orange:     var(--orange-700);
  --orange-bg:  #ffedd5;
}