/**
 * Supplier Studio Design System v1
 *
 * Ported from the v0 design system (see DESIGN_SYSTEM.md at repo root).
 * Light mode only — dark mode is intentionally NOT implemented and will not be added.
 *
 * Per-tenant brand overrides for --primary, --secondary, --ring are applied
 * via resources/views/partials/brand-styles.blade.php and cascade into all
 * components automatically.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ========================================
   1. DESIGN TOKENS
   ======================================== */

:root {
  /* ----- SURFACES ----- */
  --background: #f8f9ff;
  --foreground: #0d1c2f;
  --card: #ffffff;
  --card-foreground: #0d1c2f;
  --popover: #ffffff;
  --popover-foreground: #0d1c2f;

  /* ----- BRAND (overridden per-tenant in brand-styles partial) ----- */
  --primary: #0D9488;
  --primary-rgb: 13 148 136;
  --primary-foreground: #ffffff;
  --secondary: #5c588e;
  --secondary-rgb: 92 88 142;
  --secondary-foreground: #ffffff;

  /* ----- NEUTRALS ----- */
  --muted: #eff4ff;
  --muted-foreground: #5b4043;
  --accent: #e6eeff;
  --accent-foreground: #0d1c2f;

  /* ----- SEMANTIC ----- */
  --destructive: #ba1a1a;
  --destructive-rgb: 186 26 26;
  --destructive-foreground: #ffffff;
  --success: #059669;
  --success-rgb: 5 150 105;
  --success-foreground: #ffffff;
  --warning: #EAB308;
  --warning-rgb: 234 179 8;
  --warning-foreground: #0d1c2f;
  --info: #3b82f6;
  --info-rgb: 59 130 246;
  --info-foreground: #ffffff;

  /* ----- BORDERS & INPUTS ----- */
  --border: #e3bdc1;
  --input: #eff4ff;
  --ring: var(--primary);
  --ring-rgb: var(--primary-rgb);

  /* ----- CHARTS ----- */
  --chart-1: #0D9488;
  --chart-2: #5c588e;
  --chart-3: #6c4a9f;
  --chart-4: #059669;
  --chart-5: #EAB308;

  /* ----- SUPPLIER STUDIO TOKENS ----- */
  --ss-navy: #0d1c2f;
  --ss-surface: #f8f9ff;
  --ss-surface-container: #e6eeff;
  --ss-surface-container-low: #eff4ff;

  /* ----- RADII ----- */
  --radius: 1rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* ----- SHADOWS ----- */
  --shadow-ambient: 0 20px 40px rgba(13, 28, 47, 0.06);
  --shadow-ambient-lg: 0 30px 60px rgba(13, 28, 47, 0.08);

  /* ----- TYPOGRAPHY ----- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-headline: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* ----- Z-INDEX ----- */
  --z-dropdown: 50;
  --z-sticky: 50;
  --z-modal-overlay: 50;
  --z-modal: 50;
  --z-toast: 100;
}

/* ========================================
   2. BASE STYLES
   ======================================== */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--foreground);
  background-color: var(--background);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ========================================
   3. SIGNATURE EFFECTS
   ======================================== */

/* Glass-morphism nav (used on top bars / sticky headers) */
.glass-nav {
  background: rgba(248, 249, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Glass card (used for elevated panels with translucency) */
.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Gradient text — primary → secondary diagonal */
.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Gradient button — primary → secondary horizontal */
.gradient-btn {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: #ffffff;
}

/* ========================================
   4. ANIMATIONS
   ======================================== */

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

.spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgb(var(--primary-rgb) / 0.2);
  border-top-color: var(--primary);
  animation: spin 0.7s linear infinite;
  border-radius: 50%;
}

@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--primary-rgb) / 0.3); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--primary-rgb) / 0); }
}

.pulse-border {
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* ========================================
   5. UTILITIES
   ======================================== */

/* Focus ring utility (for non-Tailwind interactive elements) */
.focus-ring:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgb(var(--ring-rgb) / 0.5);
}

/* Hide scrollbars while preserving scroll behaviour */
.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}